SharePoint Lookup fields, Choice Fields and its multi select variants in REST API and SPServices with Knockout For SharePoint (KoSp)

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

KoSp Binder for SharePoint Lookup Field and Choice Field

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.

Knockout for SharePoint at Code Plex