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

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.

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)

 
 
 
 

  
   
 

     
     
     
     
    
   
   
  
Employee Name
Skill Set
Created Date
Created By

 
 
 

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

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.

 
 
 
 
 
 

  
   
 

     
     
     
     
    
   
   
  
Employee Name
Skill Set
Created Date
Created By

 
 
 

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