Ashok Raja's Blog
How to get User Details and User Group Details in SharePoint 2013 REST API with Knockout for SharePoint Js (KoSpJs)
by Ashok Raja T 15. January 2014 13:22

Retrieving User details like user name, login id, email and other details from a Person or Group column is not straight forward in SharePoint 2013 REST API. This requires additional parsing of JSON data as it is retuned as a nested JSON node. KoSpJs (Knockout for SharePoint) provides easy options to bind these type of complex JSON objects and it also allows you to bind any property associated with User Object

Other Articles in KoSpJs Series

Sl.NoArticle
1Introducing KoSpJs - Knockout binding handlers for SharePoint REST API and SPServices
2Beginning SharePoint development with KoSpJs, REST API and SP Services
3SharePoint Lookup fields, Choice Fields and it's multi select variants in KoSpJs
4Formatting Date, Number Fields in SharePoint REST API and SPServices with KoSpJs
5Binding Hyperlink and Image URLs with KoSpJs in SharePoint REST API and SPServices
6User Details and User Group Details in SharePoint 2013 REST API with Knockout for SharePoint – This Article

spUser is the KoSpJs property that is used to bind values from Person or Group data type of SharePoint.

Attributes associated with spUser

multi:true

This parameter is required if “Allow Multi Selection” is set to Yes in SharePoint Person or Group Column

src:'sps'

Is required if data is bound using SPServices

displayField:'[Column Name]'

By default , spUser returns the display name of the user account or Group. If you would like to view other properties like Email or Login Id, then appropriate field names has to be provided. Check the below list to view the list of other properties associated with SharePoint User Accounts

Note: By default CAML query for retrieving data from a SharePoint list via Lists.asmx returns only display name and internal id (not the login id) of the Person or Group Field. So the displayField property is not applicable to data retrieved via SPServices. To know about how to filter data based on User refer this SharePoint Tip

List of some of the properties that can be used as displayField parameter

Sl.NoProperty
1Id
2ContentTypeID
3ContentType
4Name
5Modified
6Created
7Account
8EMail
9MobileNumber
10AboutMe
11SIPAddress
12IsSiteAdmin
13Deleted
14Hidden
15Picture
16Department
17JobTitle

For the demonstration purpose I have used a list named as “Manage Permissions” with the below field structure. Out of the columns shown below, Permitted Users and Permitted Groups are multi selection enabled. As the name indicates, the Permitted Users columns and Administrator Columns accepts Person as input and Permitted Groups accept Groups as input

Columns

I have added couple of records to this list to demonstrate the code

List Data

The final output rendered with the help of KoSpJs

OutPut

The below is the piece of code that has been used to bind SharePoint List data to html controls with KoSpJs

Data binding with REST API, Kockout Js and KoSpJs

 <script type="text/javascript" src="js/pre/jquery-1.8.3.min.js"></script>
 <script type="text/javascript" src="js/pre/knockout-3.0.0beta.js"></script>
 <script type="text/javascript" src="js/ko.sp-1.0.min.Ex.js"></script>
 <h1>KoSpJs binding based on REST API</h1>
 <br />
 
 <div id="restDiv">
     <table width="1000px">
         <thead>
             <tr>
                 <th>Permission Details</th>
                 <th>Administrator Details</th>
                 <th>Permitted Users</th>
                 <th>Permitted Groups</th>
                 <th>Created By</th>
             </tr>
         </thead>
         <tbody data-bind="template: { name: 'template1', foreach: Items }" />
     </table>
 </div>
 <script type="text/html" id="template1">
     <tr>
         <td data-bind="text:Title"></td>
         <td>
             <b>User Name : </b><span data-bind="spUser:Administrator"></span><br />
             <b>Log In Id : </b><span data-bind="spUser:Administrator,displayField:'Account'"></span><br />
             <b>Email Id  : </b><span data-bind="spUser:Administrator,displayField:'EMail'"></span><br />
         </td>
         <td data-bind="spUser:PermittedUsers,multi:true"></td>
         <td data-bind="spUser:PermittedGroups,multi:true"></td>
         <td data-bind="spUser:CreatedBy"></td>
     </tr>
 </script>
 <script type="text/javascript">
     function KoSpModal() {
         var self = this;
         self.Items = ko.observableArray([]);
         $.getJSON(_spPageContextInfo.webAbsoluteUrl + "/_vti_bin/listdata.svc/ManagePermissions?$expand=CreatedBy,Administrator,PermittedUsers,PermittedGroups",
             function (data) {
                 if (data.d.results) {
                     self.Items(ko.toJS(data.d.results));
                 }
             }
       );
     }
     ko.applyBindings(new KoSpModal(), restDiv);
 </script>
Note: To retrieve values of Person or Group columns in SharePoint REST API requires those columns to be included in the expand parameter of oData query.

Data binding with SPServices, Knockout Js and KoSpJs

 <script type="text/javascript" src="js/pre/jquery-1.8.3.min.js"></script>
 <script type="text/javascript" src="js/pre/knockout-3.0.0beta.js"></script>
 <script type="text/javascript" src="js/ko.sp-1.0.min.Ex.js"></script>
 <script type="text/javascript" src="js/sp/jquery.SPServices-0.7.2.min.js"></script>
 
 <h1>KoSpJs binding based on SP Services</h1>
 <br />
 <div id="spsDiv">
     <table width="1000px">
         <thead>
             <tr>
                 <th>Permission Details</th>
                 <th>Administrator Details</th>
                 <th>Permitted Users</th>
                 <th>Permitted Groups</th>
                 <th>Created By</th>
             </tr>
         </thead>
         <tbody data-bind="template: { name: 'template2', foreach: Items }" />
     </table>
 </div>
 <script type="text/html" id="template2">
     <tr>
         <td data-bind="text:Title"></td>
         <td data-bind="spUser:Administrator,src:'sps'"></td>
         <td data-bind="spUser:PermittedUsers,multi:true,src:'sps'"></td>
         <td data-bind="spUser:PermittedGroups,multi:true,src:'sps'"></td>
         <td data-bind="spUser:CreatedBy,src:'sps'"></td>
     </tr>
 </script>
 <script type="text/javascript">
 
     function Item(data) {
         this.Title = ko.observable(data.Title);
         this.Administrator = ko.observable(data.Administrator);
         this.PermittedUsers = ko.observable(data.PermittedUsers);
         this.PermittedGroups = ko.observable(data.PermittedGroups);
         this.CreatedBy = ko.observable(data.CreatedBy);
     }
 
     function KoSpModal() {
         var self = this;
         self.Items = ko.observableArray([]);
         $().SPServices({
             operation: "GetListItems",
             async: false,
             listName: "Manage Permissions",
 
             CAMLViewFields: "<ViewFields Properties='True' />",
             CAMLQuery: "<Query></Query>",
             completefunc: function (xData, Status) {
                 var spsData = $(xData.responseXML).SPFilterNode("z:row").SPXmlToJson({ includeAllAttrs: true, removeOws: true });
                 console.log(JSON.stringify(spsData));
                 if (spsData) {
                     $.each(spsData, function (k, l) {
                         self.Items.push(new Item({
                             Title: l.Title,
                             Administrator: l.Administrator,
                             PermittedUsers: l.Permitted_x0020_Users,
                             PermittedGroups: l.Permitted_x0020_Groups,
                             CreatedBy: l.Author
                         }))
                     });
                 }
             }
         });
     }
 
     ko.applyBindings(new KoSpModal(), spsDiv);
 </script>

Download KoSpJs from CodePlex

blog comments powered by Disqus