Working with Categories

Current information about Live Connect is now available in the Windows Live Developer Center. The information in the following sections is provided for legacy purposes only.

This topic demonstrates how to get the contact categories of the authenticated user and display the number of contacts in each category.

To work with categories, you must first create a data context and an in-memory contacts collection. For more information about the contact resource, see Working with Contacts (JavaScript Library). For more information about the data context, see Using the Data Context.

The following sample shows how to create, update, retrieve, and delete contact categories.

To create and test this sample:

  1. Follow the instructions in Getting Started Sample for ASP.NET.
  2. Add a new ASPX page to the project that you created in Getting Started Sample for ASP.NET.
  3. Replace the HTML element in the new ASPX page with the code that follows this procedure.
  4. Ensure that the web.config file has the required keys in the <wl:app> tag.
<%@ Import Namespace="System.Web.Configuration" %>
<html xmlns="" xmlns:wl="">
<head runat="server">
    <title>Javascript API - Contact Categories</title>
    <script type="text/javascript" src=""></script>

    <script type="text/javascript">
        var dataContext;
        var categoriesCollection;
        var contactSelected;

        function appLoaded(applicationLoadCompletedEventArgs) {
            // Page refresh.
            if (wl.App.get_auth().get_state() === wl.AuthState.authenticated) {
                dataContext = wl.App.get_dataContext();
                dataContext.loadAll(Microsoft.Live.DataType.contactCategories, categoriesLoaded);

        function signInCallback(signInCompletedEventArgs) {
            if (signInCompletedEventArgs.get_resultCode() != Microsoft.Live.AsyncResultCode.success) {
                alert("sign-in failed: " + Microsoft.Live.AsyncResultCode.toString(signInCompletedEventArgs.get_resultCode()));
            // Get datacontext and load contacts.
            dataContext = Microsoft.Live.App.get_dataContext();
            dataContext.loadAll(Microsoft.Live.DataType.contactCategories, categoriesLoaded);
        function signOutCallback() {
            $get('Name_list').options.length = 0;
            $get('txtBox1').value = "";

        function categoriesLoaded(dataLoadCompletedEventArgs) {
            $get('Name_list').options.length = 0; // Clear list of names.

            if (dataLoadCompletedEventArgs.get_resultCode() != Microsoft.Live.AsyncResultCode.success) {
                alert("Categories failed to load...!");

            categoriesCollection = dataLoadCompletedEventArgs.get_data();
            for (var i = 0; i < categoriesCollection.get_length(); i++) {
                var category = categoriesCollection.getItem(i);
                addOption($get('Name_list'), category.get_title(), category.get_id());

        // Add items to the drop down.
        function addOption(selectbox, text, value) {
            var optn = document.createElement("OPTION");
            optn.text = text;
            optn.value = value;

        // For a contact selected in the dropdown, display its properties.
        function getCategoryDetails(id) {
            for (var i = 0; i < categoriesCollection.get_length(); i++) {
                var category = categoriesCollection.getItem(i);
                if (category.get_id() == id) {
                    categorySelected = category;
                    $get('CategoryUpdated').innerHTML = "Last updated: " + categorySelected.get_updated();
                    categorySelected.loadContacts(function (dataLoadCompletedEventArgs) {
                       if (dataLoadCompletedEventArgs.get_resultCode() !== Microsoft.Live.AsyncResultCode.success) {
                           alert("Contacts for the category failed to load.");
                       else {
                           var contactsCollection = dataLoadCompletedEventArgs.get_data();
                           $get('CategoryCount').innerHTML = "Contacts in this category: " + contactsCollection.get_length();
    <style type="text/css">
            border-collapse: collapse;
        table td
            border: 1px solid blue;
            padding: 4px;
        td.d span
            display: inline-block;
            min-width: 200px;
        <wl:app channel-url="<%=WebConfigurationManager.AppSettings["wl_wrap_channel_url"]%>"
            client-id="<%=WebConfigurationManager.AppSettings["wl_wrap_client_id"]%>" scope="WL_Contacts.View"
           Listing Contact Categories</h1>
        <wl:signin onsignin="{{signInCallback}}" onsignout="{{signOutCallback}}" />
        <br />
        <hr />
                    <wl:userinfo />
                        Categories:</label><br />
                    <br />
                    <select id="Name_list">
                        <option value="">Category Names</option>
                    <input type="button" name="go" value="Show Details" onclick="getCategoryDetails($get('Name_list').options[$get('Name_list').selectedIndex].value)" />
                <td class="d">
                    <span id="CategoryUpdated"></span>
                    <br />
                    <span id="CategoryCount"></span>