Knockout JS for SharePoint – This post is on handling json data of SharePoint Lookup fields, Choice Fields and its multi select variants from REST API and SPServices with KoSp. SharePoint Choice fields and Lookup fields are rendered as nested json objects in SharePoint Rest API. But in SPServices it is rendered as single line of text separated with ; # . This post explains the options available in KoSp to bind these types of complex SharePoint fields to html controls.
Other Articles on Knockout For SharePoint (KoSp) Series
Sl.No | Article |
1 | Introducing KoSp – Knockout binding handlers for SharePoint REST API and SPServices |
2 | Beginning SharePoint development with KoSp, REST API and SP Services |
3 | SharePoint Lookup fields, Choice Fields and its multi select variants in REST API and SPServices with Knockout For SharePoint (KoSp) – This Article |
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 | Retrieving and binding User and User Group Details in SharePoint REST API with KoSpJs |
KoSp Binder for SharePoint Lookup Field and Choice Field
Property | Applicable To | Example | Remarks |
src | spChoice /spLookup | src:’sps’ | If data is retrieved via SPServices then its mandatory to set src to ‘sps’ |
multi | spChoice /spLookup | multi:true | If its a multi selection is enabled for the column then this parameter is required for REST API calls and has to be set as true (without apostrophe as its a boolean parameter ) |
defaultValue | spChoice /spLookup | defaultValue:’N.A’ | Not mandatory. This value will be replaced for empty values returned for a column |
dataFormat | spChoice /spLookup | displayFormat:’<br/>’ | Applicable for multi-select columns and is not mandatory. By default multiple items are displayed as comma separated items. If you would like to display items separated with any other character then this parameter can be used. |
displayField | spLookup | displayField:’Column2’ | If the lookup field is mapped to any other field other than “Title” field in the parent (source) list, then this parameter is required to specify the original field that is mapped to this column (Applicable only for REST API Calls) |
Example for KoSp binder for Lookup and choice filed with SharePoint REST API (oData Query)
<script type="text/html" id="template1">
<tr>
<td data-bind="text:Title"></td>
<td data-bind="spLookup:DeploymentCountry,displayField:'Country',defaultValue:'Country Not Available'"></td>
<td data-bind="spLookup:CityName,defaultValue:'City Not Available'"></td>
<td data-bind="spLookup:Technology,multi:true,defaultValue:'Not Applicable',dataFormat:' / '"></td>
<td data-bind="spChoice:CurrentStatus"></td>
<td data-bind="spChoice:Tags,multi:true,defaultValue:'Not Tagged'"></td>
</tr>
</script>
Example for KoSp binder for Lookup and choice filed with SPServices ( CAML Query)
<script type="text/html" id="template2">
<tr>
<td data-bind="text:Title"></td>
<td data-bind="spLookup:DeploymentCountry,src:'sps',displayField:'Country',defaultValue:'Country Not Available'"></td>
<td data-bind="spLookup:CityName,src:'sps',defaultValue:'City Not Available'"></td>
<td data-bind="spLookup:Technology,src:'sps',defaultValue:'Not Applicable',dataFormat:' / '"></td>
<td data-bind="spChoice:CurrentStatus,src:'sps'"></td>
<td data-bind="spChoice:Tags,src:'sps',defaultValue:'Not Tagged'"></td>
</tr>
</script>
Output
Full Source code for both the types of binding
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.SPServices-2013.01.min.js"></script>
<script src="js/knockout-3.0.0beta.js"></script>
<script src="js/ko.sp-1.0.min.Ex.js"></script>
<div id="restDiv">
<table width="900px">
<thead>
<tr>
<th>Project Name</th>
<th>Country</th>
<th>Location</th>
<th>Technology</th>
<th>Status</th>
<th>Tags</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 data-bind="spLookup:DeploymentCountry,displayField:'Country',defaultValue:'Country Not Available'"></td>
<td data-bind="spLookup:CityName,defaultValue:'City Not Available'"></td>
<td data-bind="spLookup:Technology,multi:true,defaultValue:'Not Applicable',dataFormat:' / '"></td>
<td data-bind="spChoice:CurrentStatus"></td>
<td data-bind="spChoice:Tags,multi:true,defaultValue:'Not Tagged'"></td>
</tr>
</script>
<script type="text/javascript">
function KoSpModal() {
var self = this;
self.Items = ko.observableArray([]);
$.getJSON(_spPageContextInfo.webAbsoluteUrl + "/_vti_bin/listdata.svc/Projects?$expand=DeploymentCountry,CityName,Technology,CurrentStatus,Tags",
function (data) {
if (data.d.results) {
self.Items(ko.toJS(data.d.results));
}
}
);
}
ko.applyBindings(new KoSpModal(), restDiv);
</script>
<div id="spsDiv">
<table width="900px">
<thead>
<tr>
<th>Project Name</th>
<th>Country</th>
<th>Location</th>
<th>Technology</th>
<th>Status</th>
<th>Tags</th>
</tr>
</thead>
<tbody data-bind="template: { name: 'template2', foreach: Employees }" />
</table>
</div>
<script type="text/html" id="template2">
<tr>
<td data-bind="text:Title"></td>
<td data-bind="spLookup:DeploymentCountry,src:'sps',displayField:'Country',defaultValue:'Country Not Available'"></td>
<td data-bind="spLookup:CityName,src:'sps',defaultValue:'City Not Available'"></td>
<td data-bind="spLookup:Technology,src:'sps',defaultValue:'Not Applicable',dataFormat:' / '"></td>
<td data-bind="spChoice:CurrentStatus,src:'sps'"></td>
<td data-bind="spChoice:Tags,src:'sps',defaultValue:'Not Tagged'"></td>
</tr>
</script>
<script type="text/javascript">
function Employee(data) {
this.Title = ko.observable(data.Title);
this.DeploymentCountry = ko.observable(data.DeploymentCountry);
this.CityName = ko.observable(data.CityName);
this.Technology = ko.observable(data.Technology);
this.CurrentStatus = ko.observable(data.CurrentStatus);
this.Tags = ko.observable(data.Tags);
}
function KoSpModal() {
var self = this;
self.Employees = ko.observableArray([]);
$().SPServices({
operation: "GetListItems",
async: false,
listName: "Projects",
CAMLViewFields: "<ViewFields Properties='True' />",
CAMLQuery: "<Query></Query>",
completefunc: function (xData, Status) {
var spsData = $(xData.responseXML).SPFilterNode("z:row").SPXmlToJson({ includeAllAttrs: true, removeOws: true });
if (spsData) {
$.each(spsData, function (k, l) {
self.Employees.push(new Employee({
Title: l.Title,
DeploymentCountry: l.Deployment_x0020_Country,
CityName: l.City_x0020_Name,
Technology: l.Technology,
CurrentStatus: l.Current_x0020_Status,
Tags: l.Tags
}))
});
}
}
});
}
ko.applyBindings(new KoSpModal(), spsDiv);
</script>
Original Data ( Default All Items View of List)
In the below Projects List, Deployment Country and City Name are lookup fields from a different list named “location” mapped to “Title” and “Country” columns respectively. Current Status and Tags are choice fields in which multiple value selection is enabled for Tags field.
Leave a comment