KoSpJs, Knockout Js for SharePoint 2013 and SharePoint 2010 is a knockout Js binder extensions for SharePoint REST API and SP Services. KoSp provides custom knockout binding handlers that enables easy binding of json data from SharePoint lists retrieved via REST API with oData queries and  SP Services with CAML queries with client side controls.

As the data retrieved via SharePoint REST API is represented as complex nested json objects, binding it to client side controls requires slicing and parsing. Particularly complex field types like Lookups, Multi-select choices, User Accounts, Dates requires parsing and formatting of its value before it can be used in client side. KoSp provides custom knockout binders to handle values of these complex SharePoint field types with ease.

Note: The primary object of KoSpJs is to provide a flexible and easy option to display SharePoint List data rather than monitoring and propagating the changes back to SharePoint. So the binders are targeted towards display controls rather that input controls.

KoSpJs also supports data retrieved via SPservices. Checkout out the documentation section to learn more about SPServices specific view modal and binding handlers.

Dependencies

The below JavaScript libraries are pre-requisites for KoSp
1. Knockout Js ( Tested with Version 2.3 and 3.0 Beta)
2. jQuery ( For REST API calls)
3. Moment JS  ( For Date Time parsing and formatting, bundled with ko.sp-[Version Number].min.Ex.js)
4. Numerals JS ( For Number formatting, bundled with ko.sp-[Version Number].min.Ex.js)
5. SP Services – Optional, its required only if you wish to perform data requests via lists.asmx with CAML queries instead of oData queries with REST API

The below is an output based on a list named as Books , which has almost all possible data types supported by SharePoint Rest API

Data Types and its representation on output

 

Index Label Name Field Type Remarks
0 Keywords Choice Multi- Select
1 Sample Content Attachments Multi – Items
2 Technology Lookup Multi-select
3 Authors People/Group Multi-Select
4 Release Date Date Time Formatted Text
5 Level Lookup Single Selection
6 Download Book Hyperlink URL link
7 Availability Choice Single Selection
8 Price – Original Price Currency With Decimal Value
8 Price- Discount Number With Decimal Value
8 Price- Discounted Price Calculated Field Price - Discount
9 Is Active Yes / No Formatted Text
  Last updated on Date Time Formatted Text
  Last Updated By People/Group Single User
  (Book Image) Hyperlink URL of an Image
  (Title) Single Line of text Default text binding
  (Description) Rich Text Default html binding

The below is the column structure of the source list, named as “Books”. This list contains almost all the field types supported by SharePoint REST API. To name a few, this list contains Lookup, Choice and User fields with multi-select option, calculated field, currency, number, hyperlink, image and date time fields apart from multiple file attachments to list item.

Knockout View Modal

<script type="text/javascript">
     function BookModal() {
         var self = this;
         self.Books = ko.observableArray([]);
         $.getJSON(_spPageContextInfo.webAbsoluteUrl + "/_vti_bin/listdata.svc/Books?$expand=Level,Technology,Keywords,Availability,Authors,Attachments,ModifiedBy",
             function (data) {
                 if (data.d.results) {
                     self.Books(ko.toJS(data.d.results));
                 }
             }
         );
     }
     ko.applyBindings(new BookModal());
</script>

 

KoSpJs data binding – Partial

<div data-bind="template: { name: 'allBooks-template', foreach: Books }"></div>

<script type="text/html" id="allBooks-template">
	<div class="bookDetails">
	 <div>
		 <div><b>Technology</b></div>
		 <span data-bind="spLookup:Technology,multi:true,dataFormat:'<br/>'"></span>
	 </div>
	 <div>
		 <div><b>Author(s)</b></div>
		 <span data-bind="spUser:Authors,multi:true,dataFormat:'<br/>'"></span>
	 </div>
	 <div>
		 <div><b>Release Date</b></div>
		 <span data-bind="spDate:ReleaseDate"></span>
	 </div>
	 <div>
		 <div><b>Level</b></div>
		 <span data-bind="spLookup:Level"></span>
	 </div>
	 <div>
		 <a href="#" data-bind="spHref:DownloadURL,displayText:'Download Book'"></a>
	 </div>
	</div>
</script>

 

Documentation

1. Introducing KoSp, Knockout binding Handlers for SharePoint 2013 and SharePoint 2010 Rest API and SP Services

2. Beginning SharePoint development with KoSp – Knockout for SharePoint, 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 (KoSpJs)

4. KnockoutJs for SharePoint (KoSpJs) - Formatting Date, Number Fields in SharePoint REST API and SPServices

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

more documentation coming soon …. 

To know more about KoSp visit  http://www.ashokraja.me/category/kosp.aspx

Visit my blog at http://www.ashokraja.me

To get updated information on release and documentation

Follow @Ashok_Raja

Follow @KoSpJs

My Other Projects on Codeplex

Free WebParts for SharePoint 2013 and 2010

SharePoint Dynamic Forms

Useful links from by blog

SharePoint 2013 Books and Tutorials

SharePoint Tips and Tricks

Tools for SharePoint 2013 and SharePoint 2010

SharePoint How To's

SharePoint News and Events

Last edited Jan 16 at 1:39 AM by AshokRaja, version 14