The JavaScript layer will act as our controller for the application, providing the data-fetching methods to access profiles and friendships:

<script type="text/javascript">
var socialController = {
   //fetch profile photos for friends
   fetchConnections: function(insertID){
      osapi.people.get({userId: "@viewer",
                        groupId: "@friends",
                        count: 36}).execute(function(result){
         var friends = result.list;
         var html = '';
         for (var i = 0; i < friends.length; i++){
            html += "<img src='" + friends[i].thumbnailUrl + "'onclick=
                    'socialController.loadProfile("" + friends[i].id + "");' />";
         }
         document.getElementById(insertID).innerHTML = html;
      });
   },

   //load profile for a given user
   loadProfile: function(uid){
      osapi.people.get({userId: uid}).execute(function(result){
         if (!result.error){
            //build basic profile information
            var name = result.name.givenName + " " + result.name.familyName;
            var html = "<img src='" + result.thumbnailUrl
                     + "' alt='profile image' />"
                     + "<div><span>Name:</span> " + name + "</div>"
                     + "<div><span>Gender:</span> " + result.gender + "</div>"
                     + "<div><span>Profile URL:</span> <a href='"
                     + result.profileUrl + "'>" + result.profileUrl
                     + "</a></div><br />"
                     + "<div class='header'>Profile URLs</div>";

            //load all urls for the user
            for (var i = 0; i < result.urls.length; i++){
               html += "<div><span>" + result.urls[i].type + ": </span>"
                     + "<a href='" + result.urls[i].value + "'>"
                     + result.urls[i].value + "</a></div>";
            }

            //add new markup to the application
            document.getElementById("profileContent").innerHTML = html;
         }
      });
   }
};

//load friend list
socialController.fetchConnections("friendLinks");

//load viewer profile information
socialController.loadProfile("@viewer");
</script>
]]></Content>
</Module>

Our first function, fetchConnections(...), is tasked with fetching the current user’s friends and building out the content of the application’s right column. We issue a call to the osapi.people.get(...) method, passing in a configuration object stating that we want to collect data from the viewer; then qualify that by specifying that we want to access the viewer’s friends group; and finally quantify that by stating that we want to pass back 36 results (or friends). Once that request returns, we build out the profile images for each friend with an onclick event to call the socialController.loadProfile(...) function. That markup is then injected into the DOM node we have set up for the right column.

Our next function, loadProfile(), accepts a user identifier as its single parameter. We issue another request to osapi.people.get(), but this time just pass in the userId as our configuration object, stating that we want to get the profile of that particular user. When that request completes, we build the markup for the user’s name, gender, and profile URL, extracted from the result set returned from our people request. We then loop through each OpenSocial URL object in the profile, adding each one to our return object. Once all of the markup has been generated, we inject it into the left column of our application.

Our last piece of script, below our functions, contains the request methods that we need to call to get our initial markup payload for the application. We call our fetchConnections(...) function to grab the viewer’s friends; next, we call the loadProfile(...) function, passing in the ID of the profile to fetch as the @viewer object, which will grab the current user’s profile.