How to get User Details and User Group Details in SharePoint 2013 REST API with Knockout for SharePoint Js (KoSpJs)

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

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

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

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

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

The final output rendered with the help of KoSpJs

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>

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