Knockout with SharePoint - Netwoven

Knockout with SharePoint

By Sushant Agrawal  •  January 21, 2014  •  3380 Views

Netwoven Blog

In this blog, I will show how to display one or many SharePoint lists in SharePoint web page using REST services and out of the box features. The source lists can be anywhere in a site collection. At minimum the user is required to have read permission for all those lists you intent to display.

I will use knockout.js and jQuery to implement this. There will be no server side code and hence with the deployment is just very simple. You can utilize this method both in On-Prem and office 365 environments.

Background

With SharePoint 2003, 2007 and 2010 we have been using Server Site Object model to develop our SharePoint web parts. Start with SharePoint 2010, Client Side Object Model was introduced. Based on the fit for purpose we have utilized CSCOM to develop our Web parts. With the simplicity of CSCOM and combined with the new REST Services you can write an effective web part.

Microsoft continuous to invest heavily on “Client side object model”. Starting from SharePoint 2010 several REST services were developed corresponding to server side “SharePoint object model” or web Services. Microsoft continued this approach in SharePoint 2013. There is now REST service available for most function available through server side object model. There are over 2000 REST based services available in SharePoint 2013 out of the box. I will show in this blog how easy it is to use REST services in SharePoint 2013 along with HTML5 Knockout.js templates.

Implementation

Site Structure Preparations

  • Create a sub site in the root site collection. I gave it a name “NWSush”
  • Create a list in the site “NWSush”. I created the custom list by name “NWTestSush”. The list has 3 fields 1) Title, 2) MyName, 3) context. I added four items in that list. Our code will show these four list items in the root site
Knockout with SharePoint

Deployment Preparation

  • I will keep all HTML, JavaScript files and style sheets (CSS) in site collection’s “Site Assets” library. This library is provided out of the box in SharePoint site / site collection
  • HTML code will refer to style sheets and JavaScript files in the same folder (folder of the library)
Knockout with SharePoint

Code Development

1. Provide the CSS and .js files in “Site Assets” library

2. Do following changes in HTML file

  • Change the file extension from .htm to .txt
  • Get the url’s of css and .js file stored in the “Site Assets” library and provide these url’s in the html file

3. Upload the text file created (in step 2 above) to “Site Assets” library

4. Drag /drop content editor web part in SharePoint root site in a “web part zone” wherein we want to display the SharePoint list items. “Content Editor Web Part” is available in “Media and Content” category of Web Part selection

5. Edit “Content Editor Web part” and in “Content Link” provide the url of uploaded text file. In my case it was “/NWSush/SiteAssets/NWProjects.txt”. NWProjects.htm was my original html file

6. If everything is done correctly the contents of SharePoint list will appear correctly in the web page

Code

1. HTML: NWProjects.htm

  • Here is my html code. See how I used “Knockout.js” from aspnetcdn site. If you are using “https://” then remember to replace “http://” with https:// in the url for download of knockout-2.2.1.js and jQuery-1.7.1.js. Please note that jQuery version 2.2 didn’t work with SharePoint 2013
  • I have provided Knockout template with the <script> tag within the HTML itself
<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Netwoven Project Pages</title>

</head>

<body>

<link rel=”stylesheet” href=”/NWSush/SiteAssets/StyleSheet1.css” type=”text/css” />

<script type=”text/javascript” src=”http://ajax.aspnetcdn.com/ajax/jQuery/jQuery-1.7.1.js”></script>

<script src=”http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js”></script>

<script src=”/NWSush/SiteAssets/NWProjects.js”></script>

<!–<input id=”Button1″ type=”button” value=”button” onclick=”LoadNWData(0)” />–>

<div id=”KO1″>

<div data-bind=”template:{name:’KOListTemplate’, foreach:results, as:’listRow’}”></div>

<script type=”text/html” id=”KOListTemplate”>

<table class=”imagetable”>

<tr>

<td data-bind=”text:Title”></td>

<td data-bind=”text:MyName”></td>

<td data-bind=”text:Context”></td>

</tr>

</table>

</script>

</div>

</body>

</html>

2. JavaScript: NWSush.js

  • Here is the javascript file. Check How I used recursion. I have provided the values “NWSush” twice in the var subsites. This is to mimic multiple lists. See how the SharePoint REST call to provide all list items is called in $.ajax.
<

var results = [];var rootSite = “http://srv-symmat-113/”;

var subSites = [“NWSush”, “NWSush”];

var length = subSites.length;

function LoadNWData(index) {

$.ajax(

{

url: rootSite + subSites[index] + “/_api/web/lists/GetByTitle(‘NWTestSush’)/items”,

success: function (data) {

results.push.apply(results, data.d.results);

if (index == (length – 1)) {

ko.applyBindings(results);

return;

}

else {

index++;

LoadNWData(index);

}

},

error: function (fn, status, error) {

alert(‘There was error:’ + error);

},

method: “GET”,

headers: {

“ACCEPT”: “application/json;odata=verbose”

}

}

);

}

$(function () { LoadNWData(0); })

3. Stylesheets:stylesheet1.css

I have used following very simple stylesheet to display html table. You can create your own stylesheet or download one from the internet

table.imagetable {

font-family: verdana,arial,sans-serif;

font-size:11px;

color:#333333;

border-width: 1px;

border-color: #999999;

border-collapse: collapse;

}

table.imagetable th {

background:#b5cfd2 url(‘cell-blue.jpg’);

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: #999999;

}

table.imagetable td {

background:#dcddc0 url(‘cell-grey.jpg’);

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: #999999;

width:200px;

}

button.buttonClass {

padding:8px;

}

4. Here is the display of list contents in the Content Editor web part.

Knockout with SharePoint
Sushant Agrawal

Sushant Agrawal

Sushant Agrawal is Director and Chief Technology Officer of Netwoven India. Over a period he has been working on and mastered several software technologies. Sushant holds a BS in Computer Science from Birla Institute of Technology (BIT), Ranchi.

Leave a comment

Your email address will not be published. Required fields are marked *

Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Fast Track
Microsoft Partner
MISA
MISA
Unravel The Complex
Stay Connected

Subscribe and receive the latest insights

Netwoven Inc. - Microsoft Solutions Partner

Get involved by tagging Netwoven experiences using our official hashtag #UnravelTheComplex