Quantcast
Channel: Sharepoint 2013 Hosting News (SuperBlogAds Network) » cheap sharepoint 2013
Viewing all articles
Browse latest Browse all 4

SharePoint 2013 Hosting :: Using KnockoutJs in SharePoint 2013

0
0

In this article we will see how to use Knockout.js in SharePoint 2013. You will not need server side coding, Visual Studio or SharePoint Designer to build this user interface (UI). Only knowledge of knockout.js is required. Before going into details, I am pasting a screenshot of how the UI will look once this sample is built.

We will need to refer to 3 js libraries. I have uploaded them in the document library but as a best practice, create a different JavaScript library for them – jquery-2.0.3.min.js, knockout-3.0.0rc.js and ko.sp-1.0.min.Ex.js

ko.sp-1.0.min.Ex.js can be downloaded from kosp.codeplex.com and has binders of knockout with SharePoint. Some SharePoint data types such as images and hyperlinks need special processing, to get the correct results, which is handled by this library.

We will use a simple example of a product list. Build a SharePoint List – ProductList – with the following columns and add a few records in this list.

Create a Site Page and Insert a Script Editor Web Part from the Media and Content category on to the page.

Click on Edit Snippet and paste the code as below

Click on Insert and Stop Editing. If all goes well you will see the results as shown in first screenshot.

A couple of things to note:

  • $.getJSON(_spPageContextInfo.webAbsoluteUrl + “/_vti_bin/listdata.svc/ProductList”

is the main data returning element. Change to your list name and you can add filters at the JSON request to get specific records.

  • Pagination is controlled in

self.currentPage = ko.computed(function () {

var startPageIndex = self.pageNumber();

var endPageIndex = self.pageNumber() + self.nbPerPage;

return self.Products().slice(startPageIndex ,endPageIndex );

  • For image data binding use spSrc (kosp library handles this)

This program can be extended for many other visual effects and checking boundary conditions. This is one of the powerful ways to write a UI without requiring server side coding and without Visual Studio and SharePoint Designer.


Viewing all articles
Browse latest Browse all 4

Latest Images

Trending Articles





Latest Images