How to write an OpenSocial Gadget, Part 2: Friends in Common

[Diego]

The basic form of a Gadget that shows us the a list of people comprised of those in common between myself (the viewer) and the owner of the page I'm looking at.

As a rule, To retrieve data, you create a DataRequest by calling opensocial.newDataRequest(). You then call DataRequest.add(request) once for each type of data you would like to retrieve.

To retrieve data, you create a DataRequest by calling opensocial.newDataRequest(). You then call DataRequest.add(request) once for each type of data you would like to retrieve.

After queueing all of the individual requests, call DataRequest.send(callback). The callback parameter is a function that will be executed once the server request has been processed. This function takes one DataResponse parameter that has the results of the request.

For example, if you want to get information about "friends", you would do something like this:

<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="Friends in Common Example">   <Require feature="opensocial-0.5"/>
 </ModulePrefs>

 <Content type="html">

 <![CDATA[

 <script type="text/javascript">

 function onLoadFriends(dataResponse) {

    var viewer = dataResponse.get('viewer').getData();

    var owner = dataResponse.get('viewer').getData();

    var html = 'Friends in common with ' + owner.getDisplayName(); 

    html += ':<br><ul>';

    var viewerFriends = dataResponse.get('viewerFriends').getData();

    var ownerFriends = dataResponse.get('ownerFriends').getData();

    viewerFriends.each(function(person) {

                for (var i=0; i<ownerFriends.length; ++i) {

                        if (ownerFriends[i].getId() == person.getId()) {

                        html += '<li>' + person.getDisplayName();

                                break;

                        }

                }

    });

    html += '</ul>';

    document.getElementById('message').innerHTML = html;

  };

 

/**

  * Request information about viewer and owner friends

  */

  function getData() {

    document.getElementById('message').innerHTML = 'Requesting friends...';

    var req = opensocial.newDataRequest();

    req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');

    req.add(req.newFetchPeopleRequest ('VIEWER_FRIENDS'), 'viewerFriends');

    req.add(req.newFetchPersonRequest('OWNER'), 'owner');

    req.add(req.newFetchPeopleRequest ('OWNER_FRIENDS'), 'ownerFriends');

    req.send(onLoadFriends);

  };

  opensocial.registerOnloadHandler(getData);

  </script>

  <div id="message"> </div>

  ]]>

  </Content>

</Module> 

Tip: All API calls are asynchronous, that is, they may require a server request to retrieve or update information. Because of this, you need to pass in a callback function that will be executed once the data is ready for access, potentialy after being returned from the server.

The last parameter in the newFetch*Request() calls ("viewer", "viewerFriends" above) is a string key used to retrieve the data in the response.

The OpenSocial API defines the following roles:

• Viewer: the user logged into the browser. As a viewer you might be viewing your own Orkut page, or you might be viewing another Orkut user's profile.
• Owner: the user who owns the profile or gadget in question.
• Friends: users whom the owner or viewer has added as friends in Orkut.

Within a gadget, usually the very first thing you want to do is to make the request.

The dataResponse parameter passed into the callback function is of type DataResponse. In the callback, DataResponse.get(key) with the string key you passed in to the newFetch*Request() returns a ResponseItem containing the results of the request.

Calling dataResponse.get(key).getData() returns you the actual response data for a successful request. Response data types associated with common requests:

• newFetchPersonRequest("VIEWER", key): Information about the user who is currently viewing the gadget. Returns an object of the type opensocial.Person.
• newFetchPeopleRequest("VIEWER_FRIENDS"', key): Information about the friends of the viewer. Returns a collection of objects of the type opensocial.Person.
• newFetchPersonRequest("OWNER", key): Information about the user who is currently hosting the gadget. Returns an object of the type opensocial.Person.
• newFetchPeopleRequest("OWNER_FRIENDS", key): Information about the friends of the owner. Returns a collection of objects of the type opensocial.Person.

DataResponse.get(key).hasError() will return true if a given request was unsucessful.

As before, we register an onload handler by calling:

opensocial.registerOnloadHandler(getData);

[miki_wafa]

the code doesn't work! *sigh*

code written by Rohit Rai works!

[Steve]

Indeed, your implementation of the container javascript libraries seem to completely skip the .getData() call from data.get('viewer'), data.get('owner'), etc. I have managed to get my test app working by removing these lines entirely.

One other thing I noticed from looking at your javascript from within ning is this bug that I found on a profile page:

opensocial.registerOnloadHandler = function(fun) {
onloadHandler = callback;
};


[Diego]

Hi Steve,

we're fixing both the getData() and this other bug in a release later today, thanks for pointing them out!

[michael]

I've been trying for the last 20 minutes to figure out how to run my gadget on OpenSocial. Its probably really really simple but it escapes me right now.

[DJ Webster]

So guys tell me, i do this by creating an widget.configuration.xml & adding this or is there there another way of doing it, im not so good with API