Ashok Raja's Blog
Beginning SharePoint development with KoSp - Knockout for SharePoint , REST API and SP Services
by Ashok Raja T 10. September 2013 23:12

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

Sl.No Article
1 Introducing KoSpJs - Knockout binding handlers for SharePoint REST API and SPServices
2 Beginning SharePoint development with KoSpJs, REST API and SP Services - This Article
3 SharePoint Lookup fields, Choice Fields and it's multi select variants in KoSpJs
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

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

clip_image001

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.

clip_image002

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.

clip_image003

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.

clip_image004

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>
Note : Subsequent post explains in detail about each and every Knockout binding handlers available in KoSp

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.

clip_image005

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

Knockout for SharePoint at Code Plex

blog comments powered by Disqus