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.No | Article |
1 | Introducing KoSpJs – Knockout binding handlers for SharePoint REST API and SPServices |
2 | Beginning SharePoint development with KoSpJs, REST API and SP Services |
3 | SharePoint Lookup fields, Choice Fields and it’s multi select variants in KoSpJs |
4 | Formatting Date, Number Fields in SharePoint REST API and SPServices with KoSpJs |
5 | Binding Hyperlink and Image URLs with KoSpJs in SharePoint REST API and SPServices |
6 | User 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
List of some of the properties that can be used as displayField parameter
Sl.No | Property |
1 | Id |
2 | ContentTypeID |
3 | ContentType |
4 | Name |
5 | Modified |
6 | Created |
7 | Account |
8 | |
9 | MobileNumber |
10 | AboutMe |
11 | SIPAddress |
12 | IsSiteAdmin |
13 | Deleted |
14 | Hidden |
15 | Picture |
16 | Department |
17 | JobTitle |
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>
Leave a comment