Switch branches/tags
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
LicenseTerms-SampleApps .txt


#Title: ACTIVE ACCESS APIMASHUP STARTKIT Active Access APIMASHUP STARTERKIT ##Date: 2/30/2013 ##Version: v0.0.2 ##Author(s): Maria Naggaga


The Active Access Starter Kit is an HTML5 and JS Windows 8 App using the blank template. It leverages the Active Access API to populate a sporting , camping, concert etc based on a geographical location. APIMASH_ACTIVEACCESS API_StarterKit shows you how to interact with an external webservice((in this case Active Access API) using the datadapter, Binding.ListAPI , ListDataSourceAPI, and how to display the grouped data using custom group and item datasources.

Starter Kit was inspired by the [HTML ListView working data sources sample][1] This scenario demonstrates how to create a data adapter to interface with a web service. A data adapter is the component to interface between the list view and the supply of data, enabling virtualization.

This specific example uses XmlHttpRequest to access the Active Access search feature of Active Access which is exposed as a web service.Key Rates Limits: 2 call per second and 10,000 calls per day.


  • Make Calls to the Active Access API - WinJS.xhr
  • Creates a custom IListDataAdapter that connects to a web service and displays the data in a ListView control. -Implements the IListDataAdapter interface and creates a custom IListDataSource by inheriting from the VirtualizedDataSource calls.



  1. Step 1 : Setup your developer's environment. Install Windows 8 and Visual Studio 2012. If you are on a Mac Download a VM .
  2. Step 2: Download the Starter Kits from Github

###Kit Customization

  1. Open the ActiveAccessAPI.JSGo to the getCount:Function ( ) edit the following:

Var requestStr to call the data you want.

Code snippet

            // Build up a URL to request 50 items so we can get the count if less than that
            var requestStr = "http://api.amp.active.com/search/"
                + "?v=json"
                + "&k='" + that._query + "'"
                + "&l=New York City'" // this can also be a zip code , latitude or longitude
                + "&r=50" // radius number consider using this search content in the future 
                + "&m=''"// metadata the ultimate search.  Split up and make into drop boxes natural language applies, date time 
                + "&f='actvities'"// other options are result, trainining, and articles. Consider making an app focused on each one
                + "&s='relevance'" //other options include date_asc, dat_desc switch this option to a drop down box
                + "&num=25"
                + "&page=50"
                //+ "&api_key=";
                +"&api_key="+that._devkey+"";// change key
  1. Return the Promise by making an XMLHttpRequest to the server return WinJS.xhr({ url: requestStr}).then(

                //Callback for success
                function (request)
                    var results = [], count;
                    // Use the JSON parser on the results, safer than eval
                    var obj = JSON.parse(request.responseText);
                    // Verify if the service has returned activities
                    if (obj.numberOfResults)
                        var items = obj._results;
                        // Data adapter results needs an array of items of the shape:
                        // items =[{ key: key1, data : { field1: value, field2: value, ... }}, { key: key2, data : {...}}, ...];
                        // Form the array of results objects
                        for (var i = 0, itemsLength = items.length; i < itemsLength; i++)
                            var dataItem = items[i];
                                key: (fetchIndex + i).toString(),
                                data: { // edit the data request below to customize your display choices 
                                    title: dataItem.title,
                                    thumbnail: dataItem.meta.image1,
                                    width: dataItem.Width,
                                    height: dataItem.Height,
                                    linkurl: dataItem.SourceUrl,
                                    url: dataItem.MediaUrl,
                                    description : dataItem.meta.description

Screen Shots

Start Screen Start Screen

Enter Your API KEY and activity Search Key&query

Search Results results

##Change Log ###v0.0.0 Add version data here

2: a href="http://developer.active.com