Working with Contacts (JavaScript Sample)

Ff749827.note(en-us,MSDN.10).gifNote:
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 use the Messenger Connect JavaScript API to work with Windows Live user contacts and categories.

To create and test this ASPX page:

  1. Follow the instructions in Getting Started Sample for ASP.NET.
  2. Add a page named Contacts.aspx to the project that you created in Getting Started Sample for ASP.NET.
  3. Replace the HTML element in Contacts.aspx with the code sample that follows this procedure.
  4. Ensure that the web.config file has the required keys in the <wl:app> tag.
  5. Test the page at http://your-domain/Contacts.aspx.
  6. Create a new contact.
  7. Select a contact from the drop-down control and then either update or delete it.
Ff749827.note(en-us,MSDN.10).gifNote:
The JavaScript programming overview titled Using the JavaScript Library and Controls for Messenger Connect applies to Windows Live user contacts.
<%@ Import Namespace="System.Web.Configuration" %>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wl="http://apis.live.net/js/2010">
<head runat="server">
    <title>Javascript API - Contact Sample</title>
    <script type="text/javascript" src="http://js.live.net/4.1/loader.js"></script>

    <script type="text/javascript">
        var dataContext;
        var contactsCollection;
        var categoriesCollection;
        var contactSelected;
        var contactCategoryId = new Array();

        function appLoaded(applicationLoadCompletedEventArgs) {
            // Page refresh.
            if (Microsoft.Live.App.get_auth().get_state() === Microsoft.Live.AuthState.authenticated) {
                dataContext = wl.App.get_dataContext();
                loadContactsAndCategories();
            }
        }

        function signInCallback(signInCompletedEventArgs) {
            if (signInCompletedEventArgs.get_resultCode() != Microsoft.Live.AsyncResultCode.success) {
                alert("sign-in failed: " + Microsoft.Live.AsyncResultCode.toString(signInCompletedEventArgs.get_resultCode()));
                return;
            }
            // Get datacontext and load contacts.
            dataContext = Microsoft.Live.App.get_dataContext();
            loadContactsAndCategories();
        }

        function signOutCallback() {
            clearData();
        }

        function loadContactsAndCategories() {
            dataContext.loadAll(Microsoft.Live.DataType.contacts, contactsLoaded);
            dataContext.loadAll(Microsoft.Live.DataType.contactCategories, categoriesLoaded)
        }

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

            if (dataLoadCompletedEventArgs.get_resultCode() != Microsoft.Live.AsyncResultCode.success) {
                alert("Contacts failed to load: " + Microsoft.Live.AsyncResultCode.toString(dataLoadCompletedEventArgs.get_resultCode()));
                return;
            }

            contactsCollection = dataLoadCompletedEventArgs.get_data();
            continueLoadingContacts(dataLoadCompletedEventArgs);
        }

        function continueLoadingContacts(dataLoadCompletedEventArgs) {
            if (dataLoadCompletedEventArgs.get_resultCode() !== Microsoft.Live.AsyncResultCode.success) {
                alert("Contacts failed to load: " + Microsoft.Live.AsyncResultCode.toString(dataLoadCompletedEventArgs.get_resultCode()));
                return;
            }
            if (contactsCollection.hasNextPage()) {
                contactsCollection.loadNextPage(continueLoadingContacts);
            }
            else {
                for (var i = 0; i < contactsCollection.get_length(); i++) {
                    var contact = contactsCollection.getItem(i);
                    addOption($get('Name_list'), contact.get_formattedName(), contact.get_id());
                }
                $get('Num_contacts').innerText = contactsCollection.get_length();
            }
        }

        function categoriesLoaded(dataLoadCompletedEventArgs) {
            $get('Category_Chk_list').innerHTML = "";
            if (dataLoadCompletedEventArgs.get_resultCode() != Microsoft.Live.AsyncResultCode.success) {
                alert("Categories failed to load...!");
                return;
            }

            categoriesCollection = dataLoadCompletedEventArgs.get_data();
            for (var i = 0; i < categoriesCollection.get_length(); i++) {
                var category = categoriesCollection.getItem(i);
                contactCategoryId.push(category.get_id());
                addChkbox($get('Category_Chk_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;
            selectbox.options.add(optn);
        }

        // Add checkboxes.
        function addChkbox(parent, text, value) {
            parent.innerHTML += "<input id='" + value + "' type='checkbox' value='" + value + "'/>" + text + "<br/>";
        }

        // Clear data.
        function clearData() {
            $get('txtBox0').value = "";
            $get('txtBox1').value = "";
            $get('txtBox2').value = "";
            $get('txtBox3').value = "";
            $get('txtBox4').value = "";
            $get('Num_contacts').innerText = "0";
            $get('Category_Chk_list').innerHTML = "";
            $get('Name_list').options.length = 0;
            contactCategoryId.clear();
        }

        // For a contact selected in the dropdown, display its properties in the text boxes.
        function displayContact(id) {
            for (var i = 0; i < contactsCollection.get_length(); i++) {
                var contact = contactsCollection.getItem(i);
                if (contact.get_id() === id) {
                    contactSelected = contact;
                    $get('txtBox0').value = contactSelected.get_formattedName();
                    $get('txtBox1').value = contactSelected.get_firstName();
                    $get('txtBox2').value = contactSelected.get_lastName();
                    $get('txtBox3').value = (contactSelected.get_cid() !== undefined) ? contactSelected.get_cid() : "";
                    $get('txtBox4').value = (contactSelected.get_isFriend() === true) ? "true" : "false";
                    var categories = contactSelected.get_categories();

                    // Clear checkboxes.
                    for (var k = 0; k < contactCategoryId.length; k++) {
                        $get(contactCategoryId[k]).checked = false;
                    }
                    for (var j = 0; j < categories.length; j++) {
                        var categoryInfo = categories[j];
                        if ($get(categoryInfo.get_id()) !== null) {
                            $get(categoryInfo.get_id()).checked = true;
                        }
                    }
                }
            }
        }
    </script>
    <style type="text/css">
    table { border-collapse: collapse;}
    table td{
    border: 1px solid blue;
    padding: 4px;  vertical-align: top;}
    td.d span {
    display: inline-block;
    min-width: 120px;}
    </style>
</head>
<body>
    <div>
        <wl:app channel-url="<%=WebConfigurationManager.AppSettings["wl_wrap_channel_url"]%>"
            callback-url="<%=WebConfigurationManager.AppSettings["wl_wrap_client_callback"]%>?<%=SessionId%>"
            client-id="<%=WebConfigurationManager.AppSettings["wl_wrap_client_id"]%>" scope="WL_Contacts.View"
            onload="appLoaded">
        </wl:app>
        <h1>
           Large Contact Collection</h1>

        <wl:signin onsignin="{{signInCallback}}" onsignout="{{signOutCallback}}"/>
        <br />
        <hr />
        <table>
            <tr>
                <td>
                    <h4>User Profile</h4>
                    <wl:userinfo/>
                    <label>
                        Contacts by FormattedName</label><br />
                    <span>Number Contacts Loaded: </span> 
                    <span id="Num_contacts">0</span> <br />
                    <select id="Name_list">
                        <option value="">Display Names</option>
                    </select>
                    <input type="button" name="go" value="Display" onclick="displayContact($get('Name_list').options[$get('Name_list').selectedIndex].value)" />
                </td>
                <td class="d">
                    <h4>Contact Properties</h4>
                    <span>FormattedName:</span>
                    <input type="text" id="txtBox0" disabled="disabled" /><br />
                    <span>FirstName: </span>
                    <input type="text" id="txtBox1" /><br />
                    <span>LastName: </span>
                    <input type="text" id="txtBox2" /><br />
                    <span>CID: </span>
                    <input type="text" id="txtBox3" disabled="disabled" /><br />
                    <span>IsFriend?</span>
                    <input type="text" id="txtBox4" disabled="disabled"/><br />

                </td>
                <td class="d">
                <h4>Contact Categories</h4>
                <div id="Category_Chk_list">
                </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Show: