Beginning SharePoint development with KoSp – Knockout for SharePoint , REST API and SP Services

This post would be a starting point for developing SharePoint applications using Knockout and KoSp ( Knockout for SharePoint). KoSp provides custom knockout binding handlers for SharePoint list data retrieved via oData queries for Rest API and CAML queries for SPServices.

Other Articles on Knockout For SharePoint (KoSpJs) Series

Follow the below steps to build your first KoSp based SharePoint application . The first method explains the REST API mode and the next method explains the SP Services mode.

Method 1: Data via Rest API

Step 1

Download ko.sp.min.Ex.js , knockout.js , jquery.js from the respective project sites.

Step 2

Upload the downloaded JavaScript libraries to Style Library of a SharePoint site

Step 3

Create a new SharePoint List named “Employees” with columns Title (Default), Skills (Choice Field With Multi-select option with values “Asp.Net”, “C#”, “SharePoint”, “VB.Net”)

Step 4

Add some records to this list so that we can display those data in our application

Step 5

Create a new SharePoint page or edit an existing page. Add a script editor web part (located under Media and Content Category) to the page.

Step 6

Click the “EDIT SNIPPET” link of script editor web part and copy paste the below code into it (Change the site URL in the script paths pointing to your style library or where ever you have placed the code)

 <script src="http://srv2:902/ko/Style Library/kosp/jquery-1.8.3.min.js"></script>
 <script src="http://srv2:902/ko/Style Library/kosp/knockout-3.0.0beta.js"></script>
 <script src="http://srv2:902/ko/Style Library/kosp/ko.sp-1.0.min.Ex.js"></script>
 <div>
 	<table width="600px">
 		<thead>
 			<tr>
 				<th>Employee Name</th>
 				<th>Skill Set</th>
 				<th>Created Date</th>
 				<th>Created By</th>
 			</tr>
 		</thead>
 		<tbody data-bind="template: { name: 'Emp', foreach: Employees }" />
 	</table>
 </div>
 <script type="text/html" id="Emp">
 	<tr>
 		<td data-bind="text:Title"></td>
 		<td data-bind="spChoice:Skills,multi:true"></td>
 		<td data-bind="spDate:Modified,dataFormat:'DD-MMM-YYYY, hh:mm:ss a'"></td>
 		<td data-bind="spUser:ModifiedBy"></td>
 	</tr>
 </script>
 <script type="text/javascript">
 	function EmployeeModal() {
 		var self = this;
 		self.Employees = ko.observableArray([]);
 		$.getJSON(_spPageContextInfo.webAbsoluteUrl + "/_vti_bin/listdata.svc/Employees?$expand=Skills,ModifiedBy",
 			function (data) {
 				if (data.d.results) {
 					self.Employees(ko.toJS(data.d.results));
 				}
 			}
 	  );
 	}
 	$(document).ready(function () {
 		ko.applyBindings(new EmployeeModal());
 	});
 
 </script>

Check in and save the page.

That’s it. Now the data will be rendered in a tabular format as shown below.

Well, let’s see what’s there in the above code. If you notice the code, except for spDate, spUser and spChoice in the data-bind attribute, all the remaining code is related to typical knockout view and View Modal. The data binding handlers starting with “sp” are related to KoSp and it take cares of parsing and formatting the data.

If the default text binder of Knockout is used instead of KoSp, the below would be the expected output.

Template code with default text binder

 <script type="text/html" id="Emp">
     <tr>
         <td data-bind="text:Title"></td>
         <td data-bind="text:Skills"></td>
         <td data-bind="text:Modified"></td>
         <td data-bind="text:ModifiedBy"></td>
     </tr>
 </script>

Method 2 : Data via Sp Services

Step 1

Download SP Services from codeplex along with all the JavaScript libraries mentioned in Step 1 of Method 1

Step 2

Follow steps from 2 to 6 in Method 1 and replace the code with the below code.

 <script src="http://srv2:902/ko/Style Library/kosp/jquery-1.8.3.min.js"></script>
 <script src="http://srv2:902/ko/Style Library/kosp/jquery.SPServices-2013.01.min.js"></script>
 <script src="http://srv2:902/ko/Style Library/kosp/knockout-3.0.0beta.js"></script>
 <script src="http://srv2:902/ko/Style Library/kosp/ko.sp-1.0.min.Ex.js"></script>
 
 <div>
 	<table width="600px">
 		<thead>
 			<tr>
 				<th>Employee Name</th>
 				<th>Skill Set</th>
 				<th>Created Date</th>
 				<th>Created By</th>
 			</tr>
 		</thead>
 		<tbody data-bind="template: { name: 'Emp', foreach: Employees }" />
 	</table>
 </div>
 <script type="text/html" id="Emp">
 	<tr>
 		<td data-bind="text:Title"></td>
 		<td data-bind="spChoice:Skills,src:'sps'"></td>
 		<td data-bind="spDate:Modified,src:'sps',dataFormat:'DD-MMM-YYYY, hh:mm:ss a'"></td>
 		<td data-bind="spUser:ModifiedBy,src:'sps'"></td>
 	</tr>
 </script>
 <script type="text/javascript">
 
 	function Employee(data) {
 		this.Title = ko.observable(data.Title);
 		this.Skills = ko.observable(data.Skills);
 		this.Modified = ko.observable(data.Modified);
 		this.ModifiedBy = ko.observable(data.ModifiedBy);
 	}
 
 	function EmployeeModal() {
 		var self = this;
 		self.Employees = ko.observableArray([]);
 		$().SPServices({
 			operation: "GetListItems",
 			async: false,
 			listName: "Employees",
 			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,
 							Skills: l.Skills,
 							Modified: l.Modified,
 							ModifiedBy: l.Editor
 						}))
 					});
 				}
 			}
 		});
 	}
 	$(document).ready(function () {
 		ko.applyBindings(new EmployeeModal());
 	});
 
 </script>

Save and publish the page. You can expect the same output as shown in Step 6 of Method 1

If the default text binder of Knockout is used instead of KoSp, the below would be the output you can expect.

Hope this might have provided you a clear understanding of how to begin with KoSp for SharePoint

Knockout for SharePoint at Code Plex