Accessing Member Information

Accessing Profile Information

Now you can begin creating the actual body of code that uses the OpenSocial API to display some useful information, such as the viewer’s name and profile photo.

You can fetch this data by creating an opensocial.newDataRequest object, populating it with a request to fetch the viewer (that’s you), and sending the request to the server.

This example uses the key opensocial.IdSpec.PersonId.VIEWER, or the enum value “VIEWER” for short - but you can also use the opensocial.IdSpec.PersonId.OWNER key. If Alice is viewing Bob’s profile, then Alice is the viewer and Bob is the owner. You can access information about both users by specifying the appropriate key.

To see this in action, replace the CDATA content in your gadget with the following JavaScript:

<?xml version="1.0" encoding="UTF-8"?>
  <ModulePrefs title="Hello, world!">
    <Require feature="opensocial-0.8"/>
    <Require feature="dynamic-height"/>
  <Content type="html"><![CDATA[
    <script type="text/javascript">
    function response(data) {
      var viewer = data.get("viewer").getData();
      var name = viewer.getDisplayName();
      var thumb = viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);

      var html = '<img src="' + thumb + '"/>' + name;
      document.getElementById('dom_handle').innerHTML = html;

    function request() {
      var req = opensocial.newDataRequest();
      // req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
      var viewer = opensocial.IdSpec.PersonId.VIEWER;
      req.add(req.newFetchPersonRequest(viewer), 'viewer');

    <div id="dom_handle"></div>

Note that the send method within the request is asynchronous, and it takes a callback function - in our example, response - as a parameter. This callback function will be invoked when the response comes back from the server.

Accessing Friend Information

This next portion of the tutorial builds on the previous, but in addition to showing your own information (as the viewer), it will describe how to fetch all of your friends and display their information within the gadget.

First you need to modify your request to ask for the data about the viewer and the viewer’s friends. You can batch this request for two data sets by modifying the request function like this:

function request() {
  var params = { };
  // params[opensocial.DataRequest.PeopleRequestFields.MAX] = 50;
  // params[opensocial.DataRequest.PeopleRequestFields.FILTER] = opensocial.DataRequest.FilterType.HAS_APP;
  // params[opensocial.DataRequest.PeopleRequestFields.SORT_ORDER] = opensocial.DataRequest.SortOrder.NAME;

  var idspec = opensocial.newIdSpec({ "userId" : "VIEWER", "groupId" : "FRIENDS" });
  var req = opensocial.newDataRequest();
  req.add(req.newFetchPersonRequest("VIEWER"), "viewer");
  req.add(req.newFetchPeopleRequest(idspec, params), "viewer_friends");

Note that you are adding a newFetchPeopleRequest, which will return a collection of many people, as opposed to a newFetchPersonRequest, which only returns one person. New to OpenSocial v0.8 is the IdSpec, which takes a Javascript object passing information on the type of information you’d like, whether it be the OWNER or VIEWER of the application, as well as the collection of friends for the previously mentioned objects. Check out for additional information about this.

You can also add different parameters to the opt_params variable using constants from opensocial.DataRequest.PeopleRequestFields; adding the following line, for example, filters the set of VIEWER_FRIENDS to only include friends that have also added the same OpenSocial Application to your networks:

params[opensocial.DataRequest.PeopleRequestFields.FILTER] = opensocial.DataRequest.FilterType.HAS_APP;

Now you can add code to the response method to print out your friends’ profile photos and links to their profile pages.

function response(data) {
  var viewer = data.get("viewer").getData();
  var name = viewer.getDisplayName();
  var thumb = viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);
  var profile = viewer.getField(opensocial.Person.Field.PROFILE_URL);

  var html = '<img src="' + thumb + '"/>' +
             '<a href="' + profile + '" target="_top">' + name + '</a>';

  html += '<hr>';

  var viewer_friends = data.get("viewer_friends").getData();
  viewer_friends.each(function(person) {
    var thumb = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
    var profile = person.getField(opensocial.Person.Field.PROFILE_URL);
    html += '<a href="' + profile + '" target="_top" style="float:left">' +
            '<img src="' + thumb + '"/>' +

  document.getElementById('dom_handle').innerHTML = html;
  // This function changes the height of the module.  Make sure you add
  // <Require feature="dynamic-height"> to your XML component.


The object that contains your friends’ data is a collection of Person objects. The above example uses the viewer_friends.each method to iterate through every Person in the collection.