{"id":1175,"date":"2011-07-22T10:19:02","date_gmt":"2011-07-22T08:19:02","guid":{"rendered":"http:\/\/www.itidea.nl\/?p=1175"},"modified":"2015-09-08T20:49:48","modified_gmt":"2015-09-08T18:49:48","slug":"client-side-social-dashboard-with-sharepoint-2010-and-spservices","status":"publish","type":"post","link":"https:\/\/www.itidea.nl\/index.php\/client-side-social-dashboard-with-sharepoint-2010-and-spservices\/","title":{"rendered":"Client side social dashboard with SharePoint 2010 and SPServices"},"content":{"rendered":"
The article I wrote for DIWUG SharePoint eMagazine 4 now also online here:<\/div>\n
\u00a0<\/div>\n
\u00a0<\/div>\n
One of the new features of SharePoint 2010 is tagging. Users can tag several items within SharePoint, such as pages and list items. The tags a user used can be viewed in a tag cloud on their profile page.<\/div>\n
\u00a0<\/div>\n
In Central Administration the page \u2018Manage Social Tags and Notes\u2019 is available to manage the users\u2019 social terms. Here social terms can be found and eventually deleted. To manage the users\u2019 social terms a user has to have sufficient permissions to Central Administration.<\/div>\n
\u00a0<\/div>\n
Besides using the \u2018Manage Social Tags and Notes\u2019 page, the SocialDataService web service can be used to retrieve information about tagging. This web service exposes a lot of operations to get all kinds of information about social data in SharePoint 2010. To retrieve the list of operations http:\/\/Site\/_vti_bin\/SocialDataService.asmx<\/a> can be called within a SharePoint site. When a specific operation is selected from the list the expected request xml is displayed and the response xml the web service returns.<\/div>\n
\u00a0<\/div>\n
The jQuery library SPServices abstracts SharePoint’s Web Services and makes them easier to use. A list of implemented web services within SPServices can be found at CodePlex: http:\/\/spservices.codeplex.com<\/a><\/div>\n
\u00a0<\/div>\n
The SPServices library can be used fully client side and is an ideal solution to accomplish the goal of this article: creating a client side dashboard of some social analytics within SharePoint 2010. Marc D. Anderson has developed the SPServices library and is very open to community requests for enhancements as well as to help with any bugs, questions, or issues. You can contact him through the Discussions on the CodePlex site at any time.<\/div>\n

The social dashboard functionality<\/h2>\n
Imagine an intranet portal at a certain company. The intranet portal is setup with SharePoint 2010 and the board wants to promote the social aspects of SharePoint, especially tagging, to the employees of the company.<\/div>\n
\u00a0<\/div>\n
At every company a lot of things are said between employees during a visit to the coffee machine or water cooler. To help discover how employees really interact and how the organization functions as a whole social interaction within SharePoint is really helpful. The board wants to give the employees a voice and thereby uncover what they find most important.<\/div>\n
\u00a0<\/div>\n
Besides this, the use of tagging will expose hidden knowledge in the organization. When an employee decides to move on to another company SharePoint keeps this information from being lost.<\/div>\n
\u00a0<\/div>\n
The SharePoint search will also benefit by the use of tagging. Often tagged content will have a positive effect on the contents search result ranking.<\/div>\n
\u00a0<\/div>\n
Unfortunately, adaptation of this new feature is currently poor in the organization and the use of tagging has to be stimulated in a way. Since people always like to be rewarded for their effort, the board decided to give away a bottle of champagne every month to the user who tags the most content.<\/div>\n
\u00a0<\/div>\n
To give the employees some information on how they\u2019re doing related to their colleagues, some statistics about tagging will be published on a page within SharePoint which is accessible to all employees. To make this page attractive, not only the most active users are displayed, but also the most used tags and the tags the current user used already.<\/div>\n
\u00a0<\/div>\n
Additional information is available to managers and members of the board to stimulate persons even more.<\/div>\n
\u00a0<\/div>\n
A tabular overview of the functionality based on the role of the user:<\/div>\n\n\n\n\n\n\n\n\n\n\n
\n
Functionality<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Employee<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Manager<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Board member<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n
\n
Tags of current user<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n
\n
Most used tags<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n
\n
Drill down to url<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n
\n
Top active users<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n
\n
Drill down to tag<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
X<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n
\n
Activity of employees in own department<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
X<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n
\n
Activity of employees in a selectable department<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
X<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
X<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
V<\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
\n
\u00a0<\/div>\n
All the code displayed in the article is based on jQuery or html. With references to jQuery, the SPServices library and the jQuery template plugin all the code can be pasted in a Content Editor web part on a SharePoint page.<\/div>\n
\u00a0<\/div>\n
\r\n\r\n<script src="\/jQueryLibrary\/jquery-1.4.4.min.js" type="text\/javascript"><\/script>\r\n<script src=" \/jQueryLibrary\/jquery.SPServices-0.5.8.min.js" type="text\/javascript"><\/script>\r\n<script src=" \/jQueryLibrary\/jquery.tmpl.js" type="text\/javascript"><\/script>\r\n\r\n<\/pre>\n<\/div>\n<\/div>\n
Tags of current user<\/h3>\n
To determine the tags a certain user used, one call to the SocialDataService web service with the help of SPServices will do. SPServices exposes an operation called \u2018GetTagsOfUser\u2019 which expects the parameter user account name. In this case the user account name is the account name of the currently logged in user.<\/div>\n
\u00a0<\/div>\n
The SPServices library exposes a function to get the account name of the current logged in user, \u2018SPGetCurrentUser\u2019. The code to get the account name of the current user:<\/div>\n
\u00a0<\/div>\n
\r\nvar currentUserAccount = $().SPServices.SPGetCurrentUser({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 fieldName: "Name"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n<\/pre>\n
The SPGetCurrentUser function does an AJAX call to grab \/_layouts\/userdisp.aspx?Force=True and \u2018scrapes\u2019 the values from the page based on the internal field name. The \u2018Name\u2019 field used in the code is the internal field name of the account name.<\/div>\n
\u00a0<\/div>\n
Since the fieldname \u2018Name\u2019 in the above code is the default option of the SPGetCurrentUser function, the call can be combined with the operation \u2018GetTagsOfUser<\/a>\u2019.<\/div>\n
\r\n$().SPServices({\r\n\u00a0\u00a0\u00a0 operation: "GetTagsOfUser",\r\n\u00a0\u00a0\u00a0 userAccountName: $().SPServices.SPGetCurrentUser(),\r\n\u00a0\u00a0\u00a0 completefunc: function (xData, Status) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(xData.responseXML).find("SocialTagDetail").each(function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 tagName = $("Term>Name", $(this)).text();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 tagsofuser.push({ Tag: tagName, Count: 1 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 tagsofuser = uniqueTags(tagsofuser);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 SortByCount(tagsofuser);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#currentUserTagsText").show();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#currentUserTags").html("");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#tagsofuserTemplate").tmpl(tagsofuser)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .appendTo("#currentUserTags");\r\n\u00a0\u00a0\u00a0 }\r\n});\r\n<\/pre>\n
The callback function gets the response of the web service. A part of the response is displayed here:\u00a0<\/div>\n
\r\n\r\n<?xml version="1.0"?>\r\n<soap:Envelope xmlns:soap="http:\/\/schemas.xmlsoap.org\/soap\/envelope\/" xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xmlns:xsd="http:\/\/www.w3.org\/2001\/XMLSchema">\r\n\u00a0 <soap:Body>\r\n\u00a0\u00a0\u00a0 <GetTagsOfUserResponse xmlns="http:\/\/microsoft.com\/webservices\/SharePointPortalServer\/SocialDataService">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <GetTagsOfUserResult>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <SocialTagDetail>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Url>http:\/\/sp2010\/Lists\/Tasks\/AllItems.aspx<\/Url>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Owner>sp2010\\mark<\/Owner>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <LastModifiedTime>2010-12-19T13:28:09.437<\/LastModifiedTime>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Title>Tasks - All Tasks<\/Title>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Term>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Id>974a854f-31b4-431f-91cb-a6289f58c978<\/Id>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Name>I like it<\/Name>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/Term>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <IsPrivate>false<\/IsPrivate>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/SocialTagDetail>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Rest of the SocialTagDetails are intentionally left out\ufffd\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/GetTagsOfUserResult>\r\n\u00a0\u00a0\u00a0 <\/GetTagsOfUserResponse>\r\n\u00a0 <\/soap:Body>\r\n<\/soap:Envelope>\r\n\r\n<\/pre>\n
The term name is stored in an array of objects. The Count is set to one, because this tag is default present one time. When the duplicates are removed in the uniqueTags method the Count of the Tag is adjusted if the tag is present more than once. Since this is a helper method it is not showed here. Afterwards the tags are sorted descending by the number stored in the variable Count. A jQuery template, tagsofuserTemplate, is used to show the results on the page. The template is rendered with the data and appended to a div with the id currentUserTags. The template uses the objects in the array:\u00a0<\/div>\n
\n
\r\n<div><script id="tagsofuserTemplate" type="text\/x-jquery-tmpl">\r\n<div>\u00a0<\/div>\r\n<div><div style="float:left;width:40%">\r\n<div>\u00a0<\/div>\r\n<div>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ${Tag}\r\n<div>\u00a0<\/div>\r\n<div><\/div>\r\n<div>\u00a0<\/div>\r\n<div><div style="float:left;width:20%">\r\n<div>\u00a0<\/div>\r\n<div>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ${Count}\r\n<div>\u00a0<\/div>\r\n<div><\/div><br \/>\r\n<div>\u00a0<\/div>\r\n<div><\/script>\r\n<div><\/pre>\n<\/div>\n
The tags of the current user are displayed as show in the figure below:<\/div>\n
\u00a0\"\"<\/a><\/div>\n
Since detailed information of the tags is available at the users\u2019 profile page, a link is displayed to get there.\u00a0<\/div>\n
Most used tags<\/h3>\n
The web service doesn\u2019t provide an operation to get the most used tags, but only an operation to get all the tags. Therefor all the tags terms have to be retrieved and afterwards counted and sorted to get the most used ones.<\/div>\n
\r\n\r\n$().SPServices({\r\n\u00a0\u00a0\u00a0 operation: "GetAllTagTerms",\r\n\u00a0\u00a0\u00a0 debug: false,\r\n\u00a0\u00a0\u00a0 completefunc: function (xData, Status) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(xData.responseXML).find("SocialTermDetail").each(function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 termName = $("Term>Name", $(this)).text();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 termGuid = $("Term>Id", $(this)).text();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 counter = $("Count", $(this)).text();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 terms.push({ Term: termName, Count: counter, TermGuid: termGuid });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 SortByCount(terms);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 terms.length = 5;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#showterms").html("");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#termTemplate").tmpl(terms)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .appendTo("#showterms");\r\n\u00a0\u00a0\u00a0 }\r\n});\r\n\r\n<\/pre>\n
In the above code the operation \u2018GetAllTagTerms<\/a>\u2019 of the SPServices library is used. This operation gets all the tag terms. The name, id and the counter of each term are retrieved from the returned xml. The tag terms are sorted by the Count variable and the number of items returned is minimized to the top 5 most used tag terms. The result is displayed on the page by a jQuery template:<\/div>\n
\n
\r\n<div><div style="float:left;width:40%">\r\n<div>\u00a0<\/div>\r\n<div>\u00a0\u00a0\u00a0\u00a0 <a href="#" id=${TermGuid}>\r\n<div>\u00a0<\/div>\r\n<div>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ${Term}\r\n<div>\u00a0<\/div>\r\n<div>\u00a0\u00a0\u00a0 <\/a>\r\n<div>\u00a0<\/div>\r\n<div><\/div>\r\n<div>\u00a0<\/div>\r\n<div><div style="float:left;width:20%">\r\n<div>\u00a0<\/div>\r\n<div>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ${Count}\r\n<div>\u00a0<\/div>\r\n<div><\/div>\r\n<div><\/pre>\n<\/div>\n
The most used tags are displayed as show in the figure below:<\/div>\n
\"\"<\/a><\/div>\n
To drill down on a tag the method GetAllTagUrls<\/a> with the parameter this.id, in this case the guid of the term selected, is called when a user selects one of the tags.\u00a0<\/div>\n
\r\n\r\n\u00a0\u00a0\u00a0 $().SPServices({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 operation: "GetAllTagUrls",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 termID: termId,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 debug: true,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 completefunc: function (xData, Status) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(xData.responseXML).find("SocialUrlDetail").each(function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 url = $("Url", $(this)).text();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 countUrl = $("Count", $(this)).text();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 urlsofterm.push({ Url: url, Count: countUrl });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0SortByCount(urlsofterm);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#urlsoftermContainer").show();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#showurlsofterm").html("");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#urlTemplate").tmpl(urlsofterm)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .appendTo("#showurlsofterm");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 });\r\n\r\n<\/pre>\n
The \u2018GetAllTagUrls\u2019 of the SPServices library is called with the termID as parameter. The result is displayed with another jQuery template:
\n\"\"<\/a><\/div>\n
Top active users<\/h3>\n
The SocialDataService web service doesn\u2019t provide an operation to get the top active users either. To determine the top active users in the site collection first all the available users have to be retrieved. \u00a0\u00a0\u00a0The SPServices library allows a call to the operation \u2018GetUserCollectionFromSite<\/a>\u2019, which the web service Users and Groups exposes.<\/div>\n
\r\n\r\n$().SPServices({\r\n\u00a0\u00a0\u00a0 operation: "GetUserCollectionFromSite",\r\n\u00a0\u00a0\u00a0 completefunc: function (xData, Status) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(xData.responseXML).find("User").each(function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 userName = $(this).attr("LoginName");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 userNames.push({ UserName: userName });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 GetTopTagsOfUsers(userNames);\r\n\u00a0\u00a0\u00a0 }\r\n});\r\n\r\n<\/pre>\n
In the code above the request to the web service is made and the result, the login names of all the users, is stored in an array.\u00a0<\/div>\n
With the array of login names the operation \u2018GetTopTagsOfUsers\u2019 is called to count the tags used by each user and format the result in a clear way.<\/div>\n
\u00a0<\/div>\n
To count the tags used for a single user the SocialDataService web service provides the \u2018CountTagsOfUser<\/a>\u2019 operation. The operation is called with the account name of the user as parameter. The result is formatted in an array of objects to store the account name and the number of tags of the user.\u00a0<\/div>\n
\r\n\r\nfunction CountTagsOfUser(useraccountname, f) {\r\n\u00a0\u00a0\u00a0 var tagCount = "";\r\n\u00a0\u00a0\u00a0 var tagsofuser = [];\r\n\u00a0\u00a0\u00a0 $().SPServices({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 operation: "CountTagsOfUser",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 userAccountName: useraccountname,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 debug: true,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 completefunc: function (xData, Status) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(xData.responseXML).find("CountTagsOfUserResult").each(function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 tagCount = $(this).text();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 tagsofuser.push({ Count: tagCount, UserAccountName: useraccountname });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 SortByCount(tagsofuser);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (typeof f == "function") f(tagsofuser);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return tagsofuser;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0 });\r\n}\r\n<\/pre>\n
A callback function is necessary to use the CountTagsForUser in the function GetTopTagsOfUsers and returns the result array when the counting of the tags of the specified user has finished.<\/div>\n
\r\n\r\nfunction GetTopTagsOfUsers(usernames) {\r\n\u00a0\u00a0\u00a0 var result = [];\r\n\u00a0\u00a0\u00a0 $.each(usernames, function (key, value) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 CountTagsOfUser(value["UserName"], function (items) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.each(items, function (i, n) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 result.push({ Count: n["Count"], UserAccountName: n["UserAccountName"] });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (usernames.length == result.length) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 SortByCount(result);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 result.length = 5;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#showcounttagsofuser").html("");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (isCEO || isManager) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#counttagsofuserTemplate").tmpl(result)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .appendTo("#showcounttagsofuser");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 } else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#counttagsofuserTemplateForUser").tmpl(result)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .appendTo("#showcounttagsofuser");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0 });\r\n}\r\n\r\n<\/pre>\n
The \u2018GetTopTagsOfUser\u2019 function retrieves for every user present in the site collection the number of tags and stores the result in an array of objects. Once this function completes, the number of usernames are equal to the tagcount result, the results are sorted descending to get the most active user on top and the number of results is limited to the top five users.<\/div>\n
When showing the results on the screen the first difference is made between a \u2018regular\u2019 employee and a manager\/board member.<\/div>\n
For a \u2018regular\u2019 employee a different template is used for rendering, because they aren\u2019t allowed to drill down on a user to see which tags these users did use.<\/div>\n
The template for a \u2018regular\u2019 employee:<\/div>\n
\r\n\r\n<script id="counttagsofuserTemplateForUser" type="text\/x-jquery-tmpl">\r\n<div style="float:left;width:40%">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ${UserAccountName}\r\n<\/div>\r\n<div style="float:left;width:20%">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ${Count}\r\n<\/div>\r\n<\/script>\r\n\r\n<\/pre>\n
The top active users part on the page for a \u2018regular\u2019 employee:<\/div>\n
\"\"<\/a><\/div>\n
And for a manager\/board member:<\/div>\n
\r\n\r\n<script id="counttagsofuserTemplate" type="text\/x-jquery-tmpl">\r\n<div style="float:left;width:40%">\r\n \u00a0\u00a0 <a href="#" id=${UserAccountName}>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ${UserAccountName}\r\n\u00a0\u00a0\u00a0 <\/a>\r\n<\/div>\r\n<div style="float:left;width:20%">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ${Count}\r\n<\/div>\r\n<\/script>\r\n\r\n<\/pre>\n
The top active users part on the page for a manager\/ board member:<\/div>\n
\"\"<\/a><\/div>\n
The GetTagsOfUser operation used to drill down on a user is the same method used by displaying the tags of the current user mentioned in the beginning of the article.\u00a0<\/div>\n
What\u2019s the difference between a \u2018regular\u2019 employee, a manager and a board member?<\/em><\/h4>\n
The differences are stored in the profile properties of the user profile.<\/div>\n
\u00a0<\/div>\n
The user profiles of all the people present in the company are set up with the Department field filled and\/or the Manager field filled. The Department field of the board has to be filled with \u2018CEO\u2019 to know this user a not a regular manager, but a member of the board.<\/div>\n
\u00a0<\/div>\n
The following table lists some examples of user profiles, their properties and their roles:<\/div>\n\n\n\n\n\n\n\n\n\n\n\n
\n
UserName<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Department<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Manager<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Role<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n
\n
Alex<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
ICT<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Andrew<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Employee<\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n
\n
Andrew<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
ICT<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
\u00a0<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Manager<\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n
\n
Anita<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Marketing<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Mark<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Employee<\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n
\n
Chris<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
HR<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Dave<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Employee<\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n
\n
Dave<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
HR<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
\u00a0<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Manager<\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n
\n
Jeff<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Marketing<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Mark<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Employee<\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n
\n
Mark<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Marketing<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
\u00a0<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Manager<\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n
\n
Paul<\/strong><\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
CEO<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
\u00a0<\/div>\n
\u00a0<\/div>\n<\/td>\n
\n
Board member<\/div>\n
\u00a0<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
\n
\u00a0<\/div>\n
To give an example on how to read the table: Jeff is an employee and member of the Marketing department. His manager is Mark. This makes Jeff a \u2018regular\u2019 employee.\u00a0<\/div>\n
The role column lists the role of the user based on the previous columns.<\/div>\n
\u00a0<\/div>\n
The information about the department and manager of a person is stored in their User Profile. The SPServices library supports a lot of operations on the UserProfileService web service. The one needed here is \u2018GetUserProfileByName<\/a>\u2019 to get the properties \u2018Department\u2019 and \u2018Manager\u2019. This method expects a parameter \u2018AccountName\u2019, which is the currently logged in user.<\/div>\n
\r\n\r\nvar CEOdepartment = "CEO";\r\n$().SPServices({\r\n \u00a0\u00a0 operation: "GetUserProfileByName",\r\n\u00a0\u00a0\u00a0 AccountName: currentUserAccount,\r\n\u00a0\u00a0\u00a0 completefunc: function (xData, Status) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(xData.responseXML).find("GetUserProfileByNameResult>PropertyData").each(function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/check for CEO department\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if ($("Name", $(this)).text().toUpperCase() == "Department".toUpperCase()) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 departmentOfCurrentUser = $("Values>ValueData>Value", $(this)).text();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (departmentOfCurrentUser.toUpperCase() == CEOdepartment.toUpperCase()) {\r\n\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0isCEO = true;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 GetDepartmentsAndUsers();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 else if ($("Name", $(this)).text().toUpperCase() == "Manager".toUpperCase()) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 managerName = $("Values>ValueData>Value", $(this)).text();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (managerName == "") {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (!isCEO) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 isManager = true;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 GetDepartmentsAndUsers();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0 }\r\n});\r\n<\/pre>\n<\/div>\n<\/div>\n
The callback function gets the response of the web service. A part of the xml response looks like:<\/div>\n
\r\n\r\n<?xml version="1.0"?>\r\n<soap:Envelope xmlns:soap="http:\/\/schemas.xmlsoap.org\/soap\/envelope\/" xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xmlns:xsd="http:\/\/www.w3.org\/2001\/XMLSchema">\r\n\u00a0 <soap:Body>\r\n\u00a0\u00a0\u00a0 <GetUserProfileByNameResponse xmlns="http:\/\/microsoft.com\/webservices\/SharePointPortalServer\/UserProfileService">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <GetUserProfileByNameResult>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <PropertyData>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <IsPrivacyChanged>false<\/IsPrivacyChanged>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <IsValueChanged>false<\/IsValueChanged>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Name>AccountName<\/Name>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Privacy>Public<\/Privacy>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Values>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <ValueData>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Value xsi:type="xsd:string">sp2010\\paul<\/Value>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/ValueData>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/Values>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/PropertyData>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <PropertyData>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <IsPrivacyChanged>false<\/IsPrivacyChanged>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <IsValueChanged>false<\/IsValueChanged>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Name>Department<\/Name>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Privacy>Public<\/Privacy>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Values>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <ValueData>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Value xsi:type="xsd:string">CEO<\/Value>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/ValueData>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/Values>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/PropertyData>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/GetUserProfileByNameResult>\r\n\u00a0\u00a0\u00a0 <\/GetUserProfileByNameResponse>\r\n\u00a0 <\/soap:Body>\r\n<\/soap:Envelope>\r\n<\/pre>\n
The current user in the response xml has the account name sp2010\\paul and is a member of the CEO department. \u00a0<\/div>\n
\u00a0<\/div>\n
The find method of the responseXML gets to the PropertyData in the xml and tries to find the \u2018Department\u2019 and \u2018Manager\u2019 properties. Once found the value of the property is retrieved and in this case the variable \u2018isCEO\u2019 is set to true, because Paul is a member of the CEO department. The department of the current user is stored in the variable departmentOfCurrentUser and the operation \u2018GetDepartmentsAndUsers\u2019 is called for later use on other functionality.<\/div>\n
\u00a0<\/div>\n
The above code is used to determine the role of the current logged in user and the \u2018Top active users\u2019 part on the page will display itself differently based on this role.\u00a0<\/div>\n
\u00a0<\/div>\n
Worried about security?\u00a0<\/div>\n
All information is gathered by calls to web services. Calls on the web services make everything security trimmed, so the approach is secure.<\/div>\n
Activity of employees in own or a selectable department<\/h3>\n
Managers are allowed to view the activity of all the employees which are a member of their department. The account names of these employees are displayed in a dropdown box on the page.<\/div>\n
\u00a0<\/div>\n
Besides viewing the activity of a single user, the board wants to view the activity within a whole department. The departments are listed in a dropdown box cascading the users of the selected department.<\/div>\n
\u00a0<\/div>\n
These two functionalities can be implemented in a single operation. The method \u2018GetDepartmentsAndUsers\u2019 is called in the previous code. This operation is responsible to provide the values to set up the cascading functionality between departments and account names of the users. This method is only called when the current logged in user is a manager of a CEO.
\n\u00a0<\/div>\n
To retrieve all the departments and account names the Search web service<\/a> is called. One call is made to the web service to get the departments and the account names by formatting the query to return these properties in the result. The SQL syntax is used and the scope is set to the People scope.<\/div>\n
\r\n\r\nvar queryTextSQL = "<QueryPacket xmlns='urn:Microsoft.Search.Query' Revision='1000'>"\r\nqueryTextSQL += "<Query>"\r\nqueryTextSQL += "<Context>"\r\nqueryTextSQL += "<QueryText language='en-US' type='MSSQLFT'>"\r\nif (isCEO) {\r\n\u00a0\u00a0\u00a0 queryTextSQL += "SELECT Title, Rank, Size, Description, Write, Path, AccountName, Department FROM scope() WHERE ( (\\"SCOPE\\" = 'People') ) ORDER BY \\"Rank\\" DESC"\r\n} else {\r\n\u00a0\u00a0\u00a0 queryTextSQL += "SELECT Title, Rank, Size, Description, Write, Path, AccountName, Department FROM scope() WHERE ( (\\"SCOPE\\" = 'People') ) AND (CONTAINS (Department,'" + departmentOfCurrentUser + "')) ORDER BY \\"Rank\\" DESC"\r\n}\r\nqueryTextSQL += "<\/QueryText>"\r\nqueryTextSQL += "<\/Context>"\r\nqueryTextSQL += "<\/Query>"\r\nqueryTextSQL += "<\/QueryPacket>";\r\n$().ready(function () {\r\n\u00a0\u00a0\u00a0 var resultText = "";\r\n\u00a0\u00a0\u00a0 $().SPServices({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 operation: "QueryEx",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 queryXml: queryTextSQL,\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 completefunc: function (xData, Status) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(xData.responseXML).find("RelevantResults").each(function (i) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 accountName = $("ACCOUNTNAME", $(this)).text();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 departments[i] = $("DEPARTMENT", $(this)).text();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 users.push({ AccountName: accountName, Department: departments[i] });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (isCEO) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#departmentContainer').show();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 fillDepartmentsDropdown('#departmentSelection', $.unique(departments), "Select department");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (isCEO || isManager) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#userContainer').show();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 fillUsersDropdown('#userSelection', users, "Select user");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 });\r\n});\r\n<\/pre>\n
Dependent if the user is a manager or board member different queries are fired. When a manager only the users which are member of the department, set earlier in the variable \u2018departmentOfCurrentUser\u2019, are retrieved.<\/div>\n
\u00a0<\/div>\n
When the response is retrieved the departments are stored in an array of strings and the users are stored in an array of objects. The object contains the account name of the user and the department which the user is a member of. The department of the user is needed to accomplish the cascading dropdown between departments and account names. The department dropdown is only filled and showed when the current logged in user is member of the CEO department. If the user is a manager of another department only the users of that department are shown in the users\u2019 dropdown box.<\/div>\n
\u00a0<\/div>\n
There are two different methods to fill the dropdown boxes for departments and users, because the users are stored in an array of objects, only the account name is used to fill the box:\u00a0<\/div>\n
\r\n\r\nfunction fillUsersDropdown(dropdownName, arrayToUse, text) {\r\n\u00a0\u00a0\u00a0 $(dropdownName).html("");\r\n\u00a0\u00a0\u00a0 $.each(arrayToUse,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 function (key, value) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(dropdownName).append('<option value="' + value["AccountName"] + '">' + value["AccountName"] + '<\/option>');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0 $(dropdownName).prepend("<option value='0' selected='true'>" + text + "<\/option>");\r\n\u00a0\u00a0\u00a0 $(dropdownName).find("option:first")[0].selected = true;\r\n}\r\n<\/pre>\n
The id\u2019s departmentContainer and userContainer used in the code contain the markup:<\/div>\n
\r\n\r\n\u00a0\u00a0\u00a0 <div style="float: left; width: 100%; display: none;" id="departmentContainer">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div style="float: left; width: 15%">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Select department<\/div>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <select id="departmentSelection" style="float: left; width: 15%">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/select>\r\n\u00a0\u00a0\u00a0 <\/div>\r\n\u00a0\u00a0\u00a0 <br \/>\r\n\u00a0\u00a0\u00a0 <div id="userContainer" style="float: left; width: 100%; display: none;">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div style="float: left; width: 15%">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Select user<\/div>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <select id="userSelection" style="float: left; width: 15%">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/select>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div style="clear: both; float: left; width: 25%">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href="#" onclick="GetTagsOfSelection(userSelection.value, departmentSelection.value);return false">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Show tags of selection<\/a><\/div>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <h4 style="clear: both; float: left; display: none;" id="showtagsofuserText">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Tags of selection:<\/h4>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div id="showtagsofuser" style="clear: both;">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\u00a0\u00a0\u00a0 <\/div>\r\n<\/pre>\n
The page now looks like this when the current logged in user is a board member:<\/div>\n
\"\"<\/a><\/div>\n
And a manager:<\/div>\n
\"\"<\/a><\/div>\n
The cascading functionality is now easy:\u00a0<\/div>\n
\r\n\r\n$('select').change(function (e) {\r\n\u00a0\u00a0\u00a0 if (this.id == "departmentSelection") {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#userSelection option').each(function (i, option) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(option).remove();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 j = 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 childArray.length = 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (this[this.selectedIndex].value != 0) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 departmentSelected = this[this.selectedIndex].text;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/filter the users array on the selected department\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 filteredUsers = $.grep(users, function (filter) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return filter["Department"] == departmentSelected;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 fillUsersDropdown('#userSelection', filteredUsers, "Select user");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 fillUsersDropdown('#userSelection', users, "Select user");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 }\r\n});\r\n<\/pre>\n
The code first empties the items in the users\u2019 dropdown box and fills it again based on the selected department.<\/div>\n
\u00a0<\/div>\n
The picture below shows the cascading functionality between departments and users:<\/div>\n
\"\"<\/a><\/a><\/div>\n
After making a selection of a department and\/or a user \u2018Show tags of selection\u2019 can be selected. Selecting this fires the operation \u2018GetTagsOfSelection()\u2019 with the values of the selected department and\/or user as parameters.\u00a0<\/div>\n
\r\n\r\nfunction GetTagsOfSelection(userSelection, departmentSelection) {\r\n\u00a0\u00a0\u00a0 var result = [];\r\n\u00a0\u00a0\u00a0 if (userSelection != 0) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 GetTagsOfUser(userSelection, true, true);\r\n\u00a0\u00a0\u00a0 } else if (departmentSelection != 0) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.each(filteredUsers, function (key, value) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 GetTagsOfUser(value["AccountName"], false, true, false, function (items) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.each(items, function (i, n) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 result.push({ Tag: n["Tag"], Count: 1 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 result = uniqueTags(result);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 SortByCount(result);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#showtagsofuserText").show();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#showtagsofuser").html("");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("#tagsofuserTemplate").tmpl(result)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .appendTo("#showtagsofuser");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0 }\r\n}\r\n<\/pre>\n
When a single user is selected the operation GetTagsOfUser() is used again. When a single department is selected the tags of all the users\u2019 member of the selected department are retrieved, counted and sorted descending. The jQuery template is rendered with the results.<\/div>\n
\u00a0<\/div>\n
The page now looks like this when the current logged in user is a board member:<\/div>\n
\"\"<\/a><\/div>\n
And a manager:
\n\"\"<\/a><\/div>\n
The result<\/h3>\n
Grabbing all the functionality together the social dashboards look like:<\/div>\n
\u00a0<\/div>\n
For an employee:<\/div>\n
\"\"<\/a><\/div>\n
For a manager:<\/div>\n
\"\"<\/a><\/div>\n
For a board member:<\/div>\n
\"\"<\/a><\/div>\n
This month the board member, Paul, wins the bottle of champagne, because he tagged the most content. Since this isn\u2019t the wanted outcome, employees have to win the bottle of course; Paul throws in two bottles of champagne for the winner next month.<\/div>\n
\u00a0<\/div>\n
This company just started to use the social aspects of SharePoint. The number of tags used isn\u2019t very high yet. The search results ranking within SharePoint will not benefit from this tagging; neither the hidden knowledge in the organization is stored in SharePoint yet. When the stimulation of the use of tagging continues, employees will embed the use of tagging in their daily work and it will not take long to see the positive effects of it.<\/div>\n
\u00a0<\/div>\n
Summary<\/h2>\n
The SocialDataService web service is a good starting point on retrieving and displaying social information like tagging on a page. To use the service fully client side the library SPServices is an excellent solution.<\/div>\n
\u00a0<\/div>\n
To display information as shown in this article the SocialDataService web service does not provide all the necessary information and other web services have to be used. Other web services used here are the Users and Groups, the UserProfile and the Search web services. With the use of all these services and additional jQuery the goal of creating a client side dashboard of some social analytics is accomplished.<\/div>\n
\u00a0<\/div>\n
Performance wise the solutions are not always the most optimal. For example when the most active users are gathered. First it grabs all the users from the site collection, counts the tags for all of these users and then it is limited to show the top 5 of highest tag counts. It\u2019s not the web service not being efficient; it\u2019s the lack of the availability of a function to get the highest tags counts without the need to make the count on a specific user.<\/div>\n","protected":false},"excerpt":{"rendered":"
The article I wrote for DIWUG SharePoint eMagazine 4 now also online here: \u00a0 \u00a0 One of the new features of SharePoint 2010 is tagging. Users can tag several items within SharePoint, such as pages and list items. The tags … Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[11,42,33],"class_list":["post-1175","post","type-post","status-publish","format-standard","hentry","category-sharepoint-2010","tag-jquery","tag-sharepoint-2010","tag-spservices"],"_links":{"self":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/1175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/comments?post=1175"}],"version-history":[{"count":22,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/1175\/revisions"}],"predecessor-version":[{"id":1215,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/1175\/revisions\/1215"}],"wp:attachment":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/media?parent=1175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/categories?post=1175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/tags?post=1175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}