Organizing Activities by Activity Type

Ff751314.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 organize a list of activities that are displayed on a webpage. Such organization can be done through one of the following approaches:

  • Either a specific activity or all activities can be requested from the Windows Live endpoint. This approach uses server-side filtering.
  • The in-memory activity collection on the page can be sorted to show either a specific activity or all activities. This approach uses client-side filtering.

For more information about filtering, see Data Filtering and Views. For more information about activity templates, see Working with Activities (JavaScript Library).

There are two ways to limit the display of activities to a specific type on a webpage:

  • Filter the results on the server side by requesting only the activity template type that you want, through use of the options parameter of the load method.
  • Filter the results on the client side when you iterate through the activities collection, and display only activities that match the specified type.

The following code example demonstrates the server-side approach. In this example, only AddCommentActivity activity types are returned from Windows Live.

function getCommentActivities() {
    options = { "$top":    String.format("{0}", $get('selShow').value), 
                "$filter": "ActivityType eq 'AddCommentActivity'" };
    Microsoft.Live.App.get_dataContext().load(Microsoft.Live.DataType.myActivities, options, myActivitiesLoaded);
}

The following code example demonstrates the client-side approach.

function createListOfActivities(ActivitiesCollection) {
    var activityFilterType = Microsoft.Live.Services.AddPhotoActivity;
    for (var i = 0; i < ActivitiesCollection.get_length(); i++) {
        if (ActivitiesCollection.getItem(i) !== undefined) {
            var activity = ActivitiesCollection.getItem(i);
            if (Type.canCast(activity, activityFilterType)) {
                // The activity is of the correct type, display it.
            }
        }
    }
}

The preceding code assumes that you already have a data context and an in-memory activities collection. For more information about the Activities resource, see Working with Activities (JavaScript Library). For an API usage overview, see Using the Data Context.

The following sample demonstrates how to filter activities and show only activities that match a specified activity template type. The sample demonstrates both client-side and server-side filtering.

To test this page:

  1. Follow the instructions in Getting Started Sample for ASP.NET.
  2. Create a new ASP.NET page in the sample project.
  3. Replace the <html> element with the sample code the 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="http://www.w3.org/1999/xhtml" xmlns:wl="http://apis.live.net/js/2010">
<head>
    <title>Sorting Activities By Type</title>
    <script type="text/javascript" src="http://js.live.net/4.1/loader.js"></script>
    <script type="text/javascript">
        var dataContext;
        var myActivitiesCollection;
        var displayTemplate = "{0}<br/>" +
                              "<div>{1}</div></br>" +
                              "<strong>Published:</strong> {2} + <br/>" +
                              "<strong>Replies: </strong> {3} (<a href=\"{4}\">reply<\/a>) </br>";
        var lastReplyTemplate = "<strong>Last Reply: </strong> {1}";

        function appLoaded(applicationLoadCompletedEventArgs) {
            if (Microsoft.Live.App.get_auth().get_state() === Microsoft.Live.AuthState.authenticated) {
                getActivities();
            }
        }
        function signOut() {
            $get('ActivitiesList').innerHTML = "";
        }
        function signIn(signInCompletedEventArgs) {
            if (signInCompletedEventArgs.get_resultCode() != Microsoft.Live.AsyncResultCode.success) {
                alert("sign-in failed: " + signInCompletedEventArgs.get_resultCode());
                return;
            }
            // Get LiveDataContext and load contacts.
            dataContext = signInCompletedEventArgs.get_dataContext();
            getActivities();
        }

        function getActivities() {
            if ($get('serverSelType').value === "All") {
                options = { "$top": String.format("{0}", $get('selShow').value) };
            }
            else {
                options = { "$top": String.format("{0}", $get('selShow').value), "$filter": "ActivityType eq '" + $get('serverSelType').value + "'" };
            }
            $get('clientSelType').selectedIndex = 0;
            Microsoft.Live.App.get_dataContext().load(Microsoft.Live.DataType.myActivities, options, myActivitiesLoaded);
        }

        function myActivitiesLoaded(dataLoadCompletedEventArgs) {
            if (dataLoadCompletedEventArgs.get_resultCode() != Microsoft.Live.AsyncResultCode.success) {
                alert("Activities failed to load! Are you signed in?");
                return;
            }
            myActivitiesCollection = dataLoadCompletedEventArgs.get_data();
            createListOfActivities(myActivitiesCollection);

        }
        // List only a "view" of the activities.
        function createListOfActivities(ActivitiesCollection) {
            var list = $get('ActivitiesList');
            var activityFilterType = $get('clientSelType').value;
            list.innerHTML = '';
            for (var i = 0; i < ActivitiesCollection.get_length(); i++) {
                if (ActivitiesCollection.getItem(i) !== undefined) {
                    var activity = ActivitiesCollection.getItem(i);
                    if (activityFilterType === "All" || Type.canCast(activity, eval(activityFilterType))) {
                        list.innerHTML += "<li>";
                        list.innerHTML += getActivityProperties(activity);
                        list.innerHTML += "</li>";
                    }
                }
            }
        }
        function getActivityProperties(activity) {
            var htmlSummary = activity.get_htmlSummary();
            var pubDate = activity.get_published();
            var htmlContent = (activity.get_htmlContent() !== undefined) ? activity.get_htmlContent() : "";
            var lastReply = (activity.get_lastReplyTime() !== undefined) ? activity.get_lastReplyTime() : "";
            var repliesCount = (activity.get_repliesCount() !== undefined) ? activity.get_repliesCount() : 0;
            var repliesLink = activity.get_repliesLink();

            var output = displayTemplate.replace(/\{0\}/g, htmlSummary);
            output = output.replace(/\{1\}/, htmlContent);
            output = output.replace(/\{2\}/, pubDate);
            output = output.replace(/\{3\}/, repliesCount);
            output = output.replace(/\{4\}/, repliesLink);
            if (repliesCount > 0) {
                output += lastReplyTemplate.replace(/\{1}/, lastReply);
            }
            return output;
        }
    </script>
    <style type="text/css">
    ul { list-style-type: none;}
    </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_Activities.Update"
            onload="appLoaded">
        </wl:app>
        <wl:signin onsignin="{{signIn}}" onsignout="{{signOut}}"></wl:signin>
        <br /><hr /> 
        <wl:userinfo/>
        <br />
        <h3>Your Recent Activities - By Type</h3>
        Fetch:
        <select id="selShow">
            <option value="5">5</option>
            <option value="10" selected="selected">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
        </select>
        Server-side filter type:
        <select id="serverSelType">
            <option value="All" selected="selected">All Activities</option>
            <option value="AddPhotoActivity">Photo</option>
            <option value="AddArticleActivity">Article</option>
            <option value="AddBookmarkActivity">Bookmark</option>
            <option value="AddCommentActivity">Comment</option>
            <option value="AddVideoActivity">Video</option>
        </select>
        <input type="button" value="Refresh" onclick="getActivities()" />
        Client-side filter type:
        <select id="clientSelType">
            <option value="All" selected="selected">All Fetched</option>
            <option value="Microsoft.Live.Services.AddPhotoActivity">Photo</option>
            <option value="Microsoft.Live.Services.AddArticleActivity">Article</option>
            <option value="Microsoft.Live.Services.AddBookmarkActivity">Bookmark</option>
            <option value="Microsoft.Live.Services.AddCommentActivity">Comment</option>
            <option value="Microsoft.Live.Services.AddVideoActivity">Video</option>
        </select>
        <input type="button" value="Refresh" onclick="createListOfActivities(myActivitiesCollection)" />
        <ul id="ActivitiesList">
        </ul>
    </div>
</body>
</html>

Show: