Ashok Raja's Blog
SharePoint Lookup fields, Choice Fields and its multi select variants in REST API and SPServices with Knockout For SharePoint (KoSp)
by Ashok Raja T 23. September 2013 21:33

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

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

blog comments powered by Disqus