One of the big new areas of SharePoint is social data. If you’re going to be writing custom solutions for SharePoint you will absolutely encounter the need to access social data at some point. This section will demonstrate how to pull some of this data for use in your solutions.
HTML
Create a new HTML file in Visual Studio and name it JSOMGetSocialData.html. The markup for this page will include a couple of DIVs and a SPAN to output data to. It consists of the following lines:
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
Welcome back <span id="WelcomeMessageUserName"></span>
</div>
<div id="UserFollows" />
This example has more references than any other example so far. You’ll notice that in addition to the references to sp.js and sp.runtime.js, we’ve also included a reference to sp.userprofiles.js. As mentioned earlier in this chapter, JSOM functionality is included throughout many different files that serve specific needs. In this example, since we want to get social data for the user, we have to include a reference to the sp.userprofiles.js file in order to access that functionality.
We’ll also include a custom CSS file titled JSOMGetSocialData.css. This will be used to style the output from the script. All of the other examples could have easily included CSS for styling. You’ll find in your custom development efforts that styling will play a big role in a lot of your web parts; so this example will show you how easy it is to include.
Figure 8-22. The site has been removed from the root site
ChapTer 8 ■ WOrKing WiTh The JavaSCripT ObJeCT MOdel
JavaScript
Create a new JavaScript file in Visual Studio and name it JSOMGetSocialData.js; include the following code:
$(function () {
ExecuteOrDelayUntilScriptLoaded(getUserProfileProperties, "sp.userprofiles.js");
});
function getUserProfileProperties() {
var clientContext = new SP.ClientContext();
var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);
this.userProperties = peopleManager.getMyProperties();
clientContext.load(userProperties);
var followingManager = new SP.Social.SocialFollowingManager(clientContext);
this.following = followingManager.getFollowed(15);
clientContext.executeQueryAsync(
$("#WelcomeMessageUserName").text(userProperties.get_displayName());
var followedItems = "Items you are following:<br />";
$.each(following, function( index, value ) {
followedItems += "<a href='" + value.get_uri() + "'>" + value.get_name() +
"</a><br />";
});
$("#UserFollows").append(followedItems);
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
In the jQuery Document.ready function, we include the ExecuteOrDelayUntilScriptLoaded built-in function. We need to use this because our JavaScript code relies on the functionality found in sp.userprofiles.js and would cause errors if it ran prior to that file being loaded:
ExecuteOrDelayUntilScriptLoaded(getUserProfileProperties, "sp.userprofiles.js");
ChapTer 8 ■ WOrKing WiTh The JavaSCripT ObJeCT MOdel
Once the getUserProfileProperties function is fired, we obtain a reference to the current client context, and then create a new PeopleManager object with the following code:
var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);
this.userProperties = peopleManager.getMyProperties();
clientContext.load(userProperties);
We can create a new PeopleManager object by using the SP.UserProfiles.PeopleManager() method, passing in the client context as its parameter. The PeopleManager object provides methods for accessing data about users. In this case, we can obtain all the properties for the current user by using the
peopleManager.getMyProperties() method, and loading the userProperties variable on the client context.
Next, we’ll get all the items the user is following by using the SocialFollowingManager() object:
var followingManager = new SP.Social.SocialFollowingManager(clientContext);
this.following = followingManager.getFollowed(15);
We can create a new SocialFollowingManager object using the SP.Social.SocialFollowingManager() method, passing in the client context as its parameter. We can then obtain all the “actors” the user is
following by using the getFollowed() method. An “actor” is really just anything that the user follows, which can be users, documents, sites, or tags. When you call the getFollowed() method, you need to pass in a number, which corresponds to the actors that you want returned. In this example, we use 15, which indicates all the actors. You can see the full list of values at http://msdn.microsoft.com/en-us/library/microsoft.
sharepoint.client.social.socialactortypes(v=office.15).aspx.
The success method in this example is the most complex so far, as we need to show more data than in other examples. First, we’ll get the user name of the current user to display on the page:
$("#WelcomeMessageUserName").text(userProperties.get_displayName());
The userProperties object has many methods to retrieve data; to get the username, we can call the get_displayName() method. Next, we’ll loop through all the followed items to build a list to show the user:
var followedItems = "Items you are following:<br />";
$.each(following, function( index, value ) {
followedItems += "<a href='" + value.get_uri() + "'>" + value.get_name() + "</a><br />";
});
First, we create a new variable to hold all the followed items. Next, we loop through each item using a jQuery each loop. For each item, we call the get_uri() and get_name() methods to construct a link so that the user can jump directly to the item from the page. Finally, we append all the HTML to the page with the following line:
$("#UserFollows").append(followedItems);
ChapTer 8 ■ WOrKing WiTh The JavaSCripT ObJeCT MOdel
Figure 8-23. Social data being retrieved via JSOM
CSS
Create a new CSS file in Visual Studio and name it JSOMGetSocialData.css; include the following code:
#WelcomeMessage { margin-bottom: 20px;
}
#WelcomeMessageUserName { font-weight: bold;
}
#UserFollows {
border:dashed 1px #C0C0C0;
width:240px;
padding: 6px;
}
This CSS is very basic and only intended to provide a simple demonstration of styling. We’ll apply a bottom margin on the welcome message to the user, and put the user name in bold. The followed items will be wrapped in a dashed border for emphasis.
Results
Set the Content Link property of the Content Editor Web Part to the HTML file and save the page. The page will display a “Welcome back” message to the user, along with their name in bold. Directly underneath is a list of all the items that they are following, displayed as hyperlinks, as shown in Figure 8-23.
ChapTer 8 ■ WOrKing WiTh The JavaSCripT ObJeCT MOdel
Summary
In this chapter, we took a deep dive into the JavaScript Object Model (JSOM) and looked at how it can be used to create custom web parts using the Etherson method. We looked at a wide variety of examples:
querying for list data, creating new lists and sites, and querying for social data about users. Even though this was a long chapter in comparison to others in this book, it only scratched the surface on what is possible with JSOM in SharePoint. However, after working through all the examples presented here, you should have a very firm grasp on working with JSOM and on how HTML, JavaScript, and CSS all work together in a custom web part. You should now be comfortable enough to begin crafting your own custom solutions using JSOM. In the next chapter, we’ll look at a lot of the same examples and learn how to perform tasks using the REST API.