Archive for October 1, 2012

SharePoint 2013 Hosted App Part III

In my Previous posts I created an App that retrieved data from a public website.

SharePoint 2013 Hosted App
SharePoint 2013 Hosted App Part II

I used that data and added it to my App List in SharePoint. In this post I will explain how we also can interact with our personal Timeline using the App Framework. If a song is added to the Playlist, an update is posted on the users Timeline.

App Permissions

All interactions between an App and the App-Host are restricted with certain permissions. These permissions can be set in the AppManifest.xml. A good reference to check which Permissions you’re going to need is MSDN: http://msdn.microsoft.com/en-us/library/fp142383(v=office.15).aspx

To Read and Write from/to the Personal Timeline we need 2 specific permissions in 2 different scopes. Reading from the Timeline needs ‘Read’ permissions with Scope ‘User Profiles’. Writing however needs ‘Write’ permissions with Scope ‘Tenant’.

Schermafbeelding 2012-10-01 om 15.22.59

SP.UserProfiles.js

In order to interact with the Timeline using JavaScript, the library ‘SP.UserProfiles.js’ must be added to the page. The easiest way is to add the ScriptLink tag to the AdditionalPageHead Placeholder.

<SharePoint:ScriptLink ID=”ScriptLink” name=”SP.UserProfiles.js” runat=”server” ondemand=”false” localizable=”false” loadafterui=”true” />

Using the REST interface

Just to show that posting to the users Timeline was successful, the Timeline of the current user is displayed next to the Charts. A persons Timeline can be fetched using the REST interface.

Note: To make this script work on the RTM don’t forget to implement the headers in the $.ajax(); call

var base = getParameterByName(“SPAppWebUrl”);
var url = base + “/_api/social.feed/my/TimelineFeed”;
$.ajax({
url: url,
cache: false,
dataType: “json”,
type: “GET”,

headers: { “ACCEPT”: “application/json;odata=verbose” },
crossDomain: false,
success: function (data) {
var TimeLine = data.d.SocialFeed;
//do databinding
},
error: function (request, status, error) {
console.log(“error: ” + status);
console.log(“incoming Text: ” + error);
}
});

Posting a Status Update

Posting on the Timeline using the JavaScript Client OM is similar to creating an Item in a SharePoint List. I used the following code:

// Initialize the current client context and the SocialFeedManager instance.
clientContext = SP.ClientContext.get_current();
feedManager = new SP.Social.SocialFeedManager(clientContext);

// Create a link to include in the post.
var linkDataItem = new SP.Social.SocialDataItem();
linkDataItem.set_itemType(SP.Social.SocialDataItemType.link);
linkDataItem.set_text(‘sample’);
linkDataItem.set_uri(track.Sample);
var socialDataItems = [linkDataItem];

// Create the post content.
var postCreationData = new SP.Social.SocialPostCreationData();
postCreationData.set_contentText(“I added ” + track.TrackName + ” – ” + track.ArtistName + ” with a {0}.”);
postCreationData.set_contentItems(socialDataItems);

// Publish the post. Pass null for the “targetId” parameter because this is a root post.
resultThread = feedManager.createPost(null, postCreationData);

The SocialDataItem is used to create a link within the Update. After this the only thing that is needed is to ExecuteQueryAsync().

Results

results

In this case Marcel opened the App to add a track to the Playlist. Marcel also follows the administrator and therefor sees updates of administrator in his Timeline too.

This example can be downloaded here