Live OpenSocial editor

You can type in the field below and press the button to execute OpenSocial code. This is a good place to copy and paste code examples for experimenting with the OpenSocial API.

In addition to the standard JavaScript and OpenSocial methods, you may also call the output method to print output text. output can take a variable number of arguments, so you can print several variables on the same line without needing to construct the string yourself. If you have firebug installed and enabled, output will also echo output to the firebug console.

function response(data) {
  //Prints your name
  output(data.get("viewer_profile").getData().getDisplayName());
  //Adjust the height of this application
  _IG_AdjustIFrameHeight();
};

function request() {
  var req = opensocial.newDataRequest();
  // Add request code here
  req.add(req.newFetchPersonRequest("VIEWER"), "viewer_profile");
  req.send(response);
};

request();

Requesting profile data

This example displays profile information for the various classes of people exposed by the OpenSocial API.

The request function requests profile data for VIEWER, OWNER, VIEWER_FRIENDS, and OWNER_FRIENDS. request specifies response as the callback function for this request.

The response function defines an output method called printPerson which prints the thumbnail and profile URLs for the supplied Person object. response then iterates through each of the requested groups and calls printPerson on each record returned.

function response(data) {
  var viewer = data.get("viewer").getData();
  var owner = data.get("owner").getData();
  var viewer_friends = data.get("viewer_friends").getData();
  var owner_friends = data.get("owner_friends").getData();
  function printPerson(person) {
    output("  <em>Name:</em>", person.getDisplayName());
    var thumb = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
    output("    <em>Thumbnail:</em>", thumb);
    var profile = _args()["parent"] +  person.getField(opensocial.Person.Field.PROFILE_URL);
    output("    <em>Profile:</em>", profile);
    output("  ");
  };
  output("<strong>Viewer</strong>");
  printPerson(viewer);
  output("<strong>Owner</strong>");
  printPerson(owner);
  output("<strong>Viewer Friends</strong>");
  viewer_friends.each(printPerson);
  output("<strong>Owner Friends</strong>");
  owner_friends.each(printPerson);
  _IG_AdjustIFrameHeight();
};

function request() {
  var req = opensocial.newDataRequest();
  req.add(req.newFetchPersonRequest("VIEWER"), "viewer");
  req.add(req.newFetchPersonRequest("OWNER"), "owner");
  req.add(req.newFetchPeopleRequest("VIEWER_FRIENDS"), "viewer_friends");
  req.add(req.newFetchPeopleRequest("OWNER_FRIENDS"), "owner_friends");
  req.send(response);
};

request();

Working with Person AppData

The following example will demonstrate setting app data for the viewer (you).

request generates nondeterministic values for two data keys - sample_time (the current time) and sample_rand (a random number from 0 to 99 inclusive). Then it sends a request to store these two values in the VIEWER's personAppData and specifies response as the callback.

response checks the result object for errors and prints the outcome.

function response(data) { var update_time_error = data.get("update_time").hadError(); var update_rand_error = data.get("update_rand").hadError(); output("Did update_time have an error?", update_time_error); output("Did update_rand have an error?", update_rand_error); _IG_AdjustIFrameHeight(); }; function request() { var time = new Date().toString(); var rand = Math.floor(Math.random() * 100); //Random number 0-99 output("<strong>Setting data</strong>"); output("Setting time to", time); output("Setting rand to", rand); var req = opensocial.newDataRequest(); req.add(req.newUpdatePersonAppDataRequest("VIEWER", "sample_time", time), "update_time"); req.add(req.newUpdatePersonAppDataRequest("VIEWER", "sample_rand", rand), "update_rand"); req.send(response); }; request();

This code retrieves the values set in the previous example.

request sends a request for the sample_time and sample_rand for VIEWER and specifies response as the callback.

response obtains the VIEWER's values for these fields and outputs them.

function response(data) {
  var viewer = data.get("viewer").getData();
  var viewer_data = data.get("data").getData()[viewer.getId()];
  output("Your current time value: ", _hesc(viewer_data["sample_time"]));
  output("Your current rand value: ", _hesc(viewer_data["sample_rand"]));
  _IG_AdjustIFrameHeight();
};

function request() {
  output("<strong>Getting data</strong>");
  var fields = [ "sample_time", "sample_rand" ];
  var req = opensocial.newDataRequest();
  req.add(req.newFetchPersonRequest("VIEWER"), "viewer"); //Needed to get the viewer's ID number
  req.add(req.newFetchPersonAppDataRequest("VIEWER", fields), "data");
  req.send(response);
};

request();

Working with ActivityStreams

This example puts an entry into your ActivityStream.

The loadData function sends a request for the VIEWER and specifies request as a callback.

request opens a new ActivityStream and posts an activity where the title contains the VIEWER's name and the current time, specifying response as the callback for the request. When this function executes, the user will be prompted to give this application permission to post to their ActivityStream.

response checks to see if an error code was returned from the new activity request.

function response(data) {
  var ret = data.get("createActivity");
  if (ret) {
    output("Was there an error creating the activity?", ret.hadError());
    _IG_AdjustIFrameHeight();
  }
};

function request(data) {
  var viewer = data.get("viewer").getData();
  
  output("<strong>Setting ActivityStream data</strong>");
  var stream_title  = "OpenSocial Sample Requests Stream";
  var stream_params = { };
  var stream = opensocial.newStream("", stream_title, stream_params);
  
  var activity_text = [ viewer.getDisplayName(), 
                        " ran the AS sample in the",
                        " CodeRunner gadget on ",
                        new Date().toString() ].join(""); 
  var activity_params = { };
  
  var activity = opensocial.newActivity(stream, activity_text, activity_params);
  opensocial.requestCreateActivity(activity, 
                                   opensocial.CreateActivityPriority.HIGH, 
                                   response);
  output("Setting activity to '", activity_text, "'");
  _IG_AdjustIFrameHeight();
};

function loadData() {
  var req = opensocial.newDataRequest();
  req.add(req.newFetchPersonRequest("VIEWER"), "viewer");
  req.send(request);
};

loadData();

This example will obtain your ActivityStream and print its contents.

The request function fetches the VIEWER's ActivityStream and specifies response as the callback.

response iterates over each returned activity and prints the title of the activity.

function response(data) {
  output("<strong>Got activity stream data</strong>");
  var ret = data.get("viewer_activities").getData();
  output("Your application ID:", ret["requestedStream"].getField(opensocial.Stream.Field.APP_ID));
  
  function printActivity(activity) {
    output(" >> ", activity.getField("title"));
  };

  ret["activities"].each(printActivity);
  _IG_AdjustIFrameHeight();
};

function request() {
  var req = opensocial.newDataRequest();
  req.add(req.newFetchActivitiesRequest("VIEWER"), "viewer_activities");
  req.send(response);
};

request();

You are in profile mode. This code shows how to make a link to the canvas mode.

Note that the following method gets the Application ID from an ActivityStream request, and an Orkut profile UID from the OWNER's Profile URL. This approach is a temporary workaround, and functions to generate links will be availble in an upcoming version of the API.

function makeLink(page, app_id, uid) {
  return [ _args()["parent"], 
           "/Application.aspx?appId=", 
           app_id, 
           "&uid=",
           uid,
           "&up_page=", 
           page ].join("");
};

function makeAnchor(text, url) {
  var anchor = document.createElement("a");
  anchor.target = "_top";
  anchor.href = url;
  anchor.innerHTML = text;
  return anchor;
};

function response(data) {
  var activities = data.get("owner_activities").getData();
  var stream = activities["requestedStream"];
  var app_id = stream.getField(opensocial.Stream.Field.APP_ID);
  console.log(app_id, "app_id");
  var viewer = data.get("owner").getData();
  var profile_url = viewer.getField(opensocial.Person.Field.PROFILE_URL);
  var regex = /uid=([^&#]+)/;
  var result = profile_url.match(regex);
  if (result.length == 2) {
    var uid = result[1];
    var container = document.getElementById("link_container");
    container.innerHTML = "";

    var url = makeLink("people", app_id, uid);
    var anchor = makeAnchor("This is a link to the People page", url);
    container.appendChild(anchor);

    container.appendChild(document.createElement("br"));

    url = makeLink("editor", app_id, uid);
    anchor = makeAnchor("This is a link to the Editor page", url);
    container.appendChild(anchor);
    _IG_AdjustIFrameHeight();
  }
};

function request() {
  var req = opensocial.newDataRequest();
  req.add(req.newFetchPersonRequest("OWNER"), "owner");
  req.add(req.newFetchActivitiesRequest("OWNER"), "owner_activities");
  req.send(response);
};

request();

This is a div with an ID of 'link_container'

]]>