Export (0) Print
Expand All

Working with Large Contact Collections

Ff747596.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 load more than 100 contacts.

Suppose that you plan to use a View object to page through a user's contact collection. By using the loadAll method, you can get only 100 contacts (or any resource) at a time. Therefore, you must use a loading code pattern that makes multiple requests until all contacts are fetched.

The following code example shows how to load a large collection of contacts recursively. The full code sample follows later in this topic.

function contactsLoaded(dataLoadCompletedEventArgs) {
    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 {
        $get('Name_list').options.length = 0; // Clear list of names in dropdown.
        for (var i = 0; i < contactsCollection.get_length(); i++) {
            var contact = contactsCollection.getItem(i);
            addOption($get('Name_list'), contact.get_formattedName(), contact.get_id());
        }
        displayContact($get('Name_list').options[$get('Name_list').selectedIndex].value)
    }
    $get('ContactCount').innerText = "Loaded " + contactsCollection.get_length() + " contacts.";
}

The following code sample loads all of the authenticated user's contacts and displays them in a drop-down list. In practice, you would not use a drop-down list to display a large number of items; the list is used here only to illustrate the concept.

To create and test this Microsoft ASP.NET-based (ASPX) page:

<%@ 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 - Large Contact Collection</title>
    <script type="text/javascript" src="http://js.live.net/4.1/loader.js"></script>

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

        function appLoaded(applicationLoadCompletedEventArgs) {
            Microsoft.Live.Core.Namespace.using("wl:Microsoft.Live");
            // Page refresh.
            if (wl.App.get_auth().get_state() === wl.AuthState.authenticated) {
                wl.App.get_dataContext().loadAll(Microsoft.Live.DataType.contacts, contactsLoaded);
            }
        }

        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();
            dataContext.loadAll(Microsoft.Live.DataType.contacts, contactsLoaded);
        }

        function signOutCallback() {
            $get('Name_list').options.length = 0;
            $get('txtBox1').value = "";
            $get('txtBox2').value = "";
            $get('txtBox3').value = "";
            $get('txtBox4').value = "";
            $get('ContactCount').innerText = "";
        }
        function contactsLoaded(dataLoadCompletedEventArgs) {
            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 {
                $get('Name_list').options.length = 0; // Clear list of names in dropdown.
                for (var i = 0; i < contactsCollection.get_length(); i++) {
                    var contact = contactsCollection.getItem(i);
                    addOption($get('Name_list'), contact.get_formattedName(), contact.get_id());
                }
                displayContact($get('Name_list').options[$get('Name_list').selectedIndex].value)
            }
            $get('ContactCount').innerText = "Loaded " + contactsCollection.get_length() + " contacts.";
        }
        // 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);
        }

        // 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('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";
                }
            }
        }
    </script>
    <style type="text/css">
    table { border-collapse: collapse;}
    table td{
    border: 1px solid blue;
    padding: 4px;}
    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>
                    <wl:userinfo />
                    <label>
                        Contact list (by FormattedName):</label><br />
                    <br />
                    <select id="Name_list" onchange="displayContact($get('Name_list').options[$get('Name_list').selectedIndex].value)">
                        <option value="">Display Names</option>
                    </select>
                </td>
                <td class="d">
                    <span>FirstName: </span>
                    <input type="text" id="txtBox1" /><br />
                    <span >LastName: </span>
                    <input type="text" id="txtBox2" /><br />
                    <span>CID: </span>
                    <input type="text" disabled="disabled" id="txtBox3"/><br />
                    <span>IsFriend?:</span>
                    <input type="text" id="txtBox4" />
                </td>
            </tr>
        </table>
        <span id='ContactCount'>No contacts loaded.</span>
    </div>
</body>
</html>

Show:
© 2014 Microsoft