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

Ashok Raja
 
Solutions Architect
September 23, 2013
 
Rate this article
 
Views
4264

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.NoArticle
1Introducing KoSp – Knockout binding handlers for SharePoint REST API and SPServices
2Beginning SharePoint development with KoSp, REST API and SP Services
3SharePoint Lookup fields, Choice Fields and its multi select variants in REST API and SPServices with Knockout For SharePoint (KoSp) – This Article
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
6Retrieving and binding User and User Group Details in SharePoint REST API with KoSpJs

KoSp Binder for SharePoint Lookup Field and Choice Field

PropertyApplicable ToExampleRemarks
srcspChoice /spLookupsrc:’sps’If data is retrieved via SPServices then its mandatory to set src to ‘sps’
multispChoice /spLookupmulti:trueIf 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 )
defaultValuespChoice /spLookupdefaultValue:’N.A’Not mandatory. This value will be replaced for empty values returned for a column
dataFormatspChoice /spLookupdisplayFormat:’<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.
displayFieldspLookupdisplayField:’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

Display

Note : Default values assigned by KoSp binders to blank values are highlighted

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.

Original

Knockout for SharePoint at Code Plex

Author Info

Ashok Raja
 
Solutions Architect
 
Rate this article
 
I am Ashok Raja, Share Point Consultant and Architect based out of Chennai, India. ...read more
 

Leave a comment