SharePoint and Knockout for the REST of Us

Introduction to interacting with list data

using Knockout and REST web services

Introductions

Who is the one they call ‘Xenox’?

How did I get here?

Musician

Developer

Father

SharePointian

Federal Team

SharePoint Developer Planet Technologies

Agenda

What are we going to do today?

Recipe

MVVM in briefKnockout overviewSharePoint REST overviewConnecting the Dots

Copyright: 2008 Columbia Pictures. All Rights Reserved.

MVVM (Model View ViewModel)

What is it?

MVVMSeparation of powers/interestsModel

Holds the information Independent of UI

View Formats the information State representation of the view model

ViewModel Encapsulates behavior Code representation of data and operations

Copyright: 2008 Columbia Pictures. All Rights Reserved.

Knockout.js

Overview

Knockout.js

JavaScript LibraryFree, Open SourceNo dependencies (other than JavaScript)Compatible with all major browsersUsed to implement Model View ViewModel pattern2-Way Data BindingNotify subscribers about changes

Copyright: 2008 Columbia Pictures. All Rights Reserved.

Knockout.js -> View

Where your information is displayedEssentially the HTML portion

<input type="text"/><input type="checkbox"/><select> … </select>

Copyright: 2008 Columbia Pictures. All Rights Reserved.

Knockout.js -> Model

Defines what is kept in your data store Looks like JSON{

j: 'Java',

s: 'Script',

o: 'Object',

n: 'Notation'} Copyright: 2008 Columbia Pictures. All Rights Reserved.

Knockout.js -> ViewModel

Where the most of your logic and coding isBinding definitionsThe glue that holds it all together

Copyright: 2008 Columbia Pictures. All Rights Reserved.

Knockout Demo

Simple binding

Starting out small

Create a Simple SharePoint List (MODEL)Representatives

First NameLast NameSpecialty

Copyright: 2008 Columbia Pictures. All Rights Reserved.

Starting out small

Build a simple web page (VIEW)Use simple HTML Controls

<p>First Name: <strong data-bind="text:FirstName"></strong></p><p>Last Name: <strong data-bind="text:LastName"></strong></p><p>Specialty: <strong data-bind="text:Specialty"></strong></p>

Apply the glueDefine bindings and Link it to HTML with Data Bindings (VIEWMODEL)

<script type="text/javascript">var Person = function () {

var self = this;this.FirstName = ko.observable("Dale");this.LastName = ko.observable("Doback");this.Specialty = ko.observable("Research and

Development");}

var myRep = new Person();ko.applyBindings(myRep);

</script>

Big Deal, what next?

Modify HTML to allow editsBind <input> controls

Modify valueUpdate propertyvalueUpdate: ‘afterkeydown’

Bind a <select> with options

Copyright: 2008 Columbia Pictures. All Rights Reserved.

Web Services

What options to I have within SharePoint?

Web Services Options - Lists

Web Services (SOAP) http://<site>/_vti_bin/Lists.asmx

REST Interface (OData) http://<site>/_vti_bin/listdata.svc

New in 2013 http://<site>/_api/

Copyright: 2008 Columbia Pictures. All Rights Reserved.

Web Services – listdata.svc Construct HTTP request to query SharePoint list data

HTTP verb Data operation

GET Retrieve

POST Create

PUT Update (update all fields and use default values for any undefined fields)

DELETE Delete

MERGE Update (update only the fields that are specified and changed from current version)

listdata.svc – Lets get some

GET site information as ATOM feed (XML) http://{URL}/_vti_bin/listdata.svc

Get List data in XML /listdata.svc/{listname}

Get specific list item by ID /listdata.svc/{listname}(1)

Brings back list item #1

Available as JSON Also!Copyright: 2008 Columbia Pictures. All Rights Reserved.

OData query options

$metadata Shows data entity model for every list in site

$orderby Sorts by Property /listdata.svc/{listname}?$orderby=Title desc

$filter Filters by Property (works for lookup properties as

well) /listdata.svc/{listname}?$filter=Title eq ‘Some Value’ /listdata.svc/{listname}?$filter=Specialty/Title eq

‘Business’

$select Bring back only what you need /listdata.svc/{listname}?

$select=Title, ID

$expand Returns related data inline (Joins) /listdata.svc/{listname}?

$expand=Specialty

Many Many More …. See ODATA References

Demo

Putting it together LIVE

Copyright: 2008 Columbia Pictures. All Rights Reserved.

Get SharePoint Data Create a Specialty List in SharePoint

Title Active

Make the Specialty dropdown list an observable Connect <select> options to SharePoint with REST call

<script type="text/javascript">var sOptions = ko.observable();

$.getJSON(_spPageContextInfo.webServerRelativeUrl + "_vti_bin/listdata.svc/Specialty?$select=Title,Id,Active&$filter=Active

eq true", {}, dataCallBack);

function dataCallBack(data) { sOptions(data.d.results); }</script>

Connect it

Add optionsText: binding to set select display textAdd optionsValue: binding to set value stored

<p>Specialty: <select data-bind="options:sOptions, optionsText:'Title',value:SpecialtyId, optionsValue:'Id'"></select></p>

self.SpecialtyId = ko.observable();

Copyright: 2008 Columbia Pictures. All Rights Reserved.

Add functionality

Add button to page and register click: binding with the ViewModel

<input type="button" data-bind="click: AddRepresentative" value="Add Representative" />

self.AddRepresentative = function () {alert('You want to add ' + self.FirstName() + ' ' +

self.LastName());}

Post to a SharePoint ListCreate function to post to list

self.AddRepresentative = function () {var url = _spPageContextInfo.webServerRelativeUrl +

"_vti_bin/listdata.svc/Representatives";

$.ajax({type: 'POST',url: url,contentType: 'application/json',processData: false,data: ko.toJSON(myPerson),success: function () {

alert('You added ' + self.FirstName() + ' ' + self.LastName());

}});

Real Time Feed

Bind a 2nd view model Select the node of the DOM you want to bind to

<script type="text/javascript">var dispVm = {

results: ko.observable(), };

ko.applyBindings(dispVm, document.getElementById('divDisplay'));</script>

Copyright: 2008 Columbia Pictures. All Rights Reserved.

Real Time Feed

Add foreach: binding

<div style="float:right; padding:25px;" id="divDisplay"><div data-bind="foreach:results">

<p><strong data-bind="text: FirstName"></strong><strong data-bind="text: LastName"></strong><span data-bind="if: (Specialty !=

null)">&nbsp;(<em data-bind="text:

Specialty.Title"></em>)</span></p>

</div></div>

Copyright: 2008 Columbia Pictures. All Rights Reserved.

Real Time Feed

Add polling to retrieve list items

(function poll() {$.ajax({

url: _spPageContextInfo.webServerRelativeUrl + "_vti_bin/listdata.svc/Representatives?

$expand=Specialty",success: function (data) {

//Update the DisplaydispVm.results(data.d.results);

}, dataType: "json", complete: poll, timeout: 30000});

})();

Copyright: 2008 Columbia Pictures. All Rights Reserved.

We’ve only scratched the surface

Controlling text and appearance The visible

binding The text binding The html binding The css binding The style binding The attr binding

Working with form fields The click binding The event binding The submit binding The enable binding The disable binding The value binding The hasfocus binding The checked binding The options binding The selectedOptions

binding The uniqueName

binding

Control flow The foreach

binding The if binding The ifnot binding The with binding

Rendering templates The template

binding

Where do we go from here?

ExperimentWrite custom WCF ServicesWeb Parts

References MSDN - Using the REST Interface

http://msdn.microsoft.com/en-us/library/ff798339.aspx

MSDN – SharePoint Foundation REST Interface http://msdn.microsoft.com/en-us/library/ff521587(v=office.14).aspx

ODATA.ORG – URI Conventions http://

www.odata.org/documentation/uri-conventions#FilterSystemQueryOption

Knockout.js http://knockoutjs.com/

Long Polling Example http://

techoctave.com/c7/posts/60-simple-long-polling-example-with-javascript-and-jquery

Please fill out an Evaluation

Thank you!

http://bit.ly/spsbmorexlg