Introduction to interacting with list data

using Knockout and REST web services

Who is the one they call Xenox?

Musician
Developer
Father
SharePointian

Federal Team
SharePoint Developer Planet Technologies

What are we going to do today?

 MVVM in brief
Knockout overview
SharePoint REST overview
Connecting the Dots

Copyright: 2008 Columbia Pictures. All Rights Reserved.

What is it?

 Separation of powers/interests

Model
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.

Overview

 JavaScript Library
Free, Open Source

Copyright: 2008 Columbia Pictures. All Rights Reserved.

No dependencies (other than JavaScript)

Compatible with all major browsers
Used to implement Model View ViewModel pattern
2-Way Data Binding
Notify subscribers about changes

 Where your information is displayed

Essentially the HTML portion

<input type="text"/>
<input type="checkbox"/>
<select> </select>
Copyright: 2008 Columbia Pictures. All Rights Reserved.

 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.

 Where the most of your logic and coding is

Binding definitions
The glue that holds it all together

Copyright: 2008 Columbia Pictures. All Rights Reserved.

Simple binding

Create a Simple SharePoint List (MODEL)

Representatives
First Name
Last Name
Specialty

Copyright: 2008 Columbia Pictures. All Rights Reserved.

 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>

 Define 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>

 Modify HTML to allow edits

Bind <input> controls
Modify valueUpdate property
valueUpdate: afterkeydown
Bind a <select> with options

Copyright: 2008 Columbia Pictures. All Rights Reserved.

What options to I have within SharePoint?

 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.

 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)

 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.

 $metadata
Shows data entity model for every list in site
$orderby
Sorts by Property
/listdata.svc/{listname}?$orderby=Title desc

$select
Bring back only what you need
/listdata.svc/{listname}?$select=Title, ID
$expand
Returns related data inline (Joins)
/listdata.svc/{listname}?$expand=Specialty

$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

Many Many More . See ODATA References

Copyright: 2008 Columbia Pictures. All Rights Reserved.

Putting it together LIVE

 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>

Copyright: 2008 Columbia Pictures. All Rights Reserved.

Add optionsText: binding to set select display text

Add 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();

 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());
}

 Create 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());
}
});

 Bind a 2nd view model

Select the node of the DOM you want to bind to
Copyright: 2008 Columbia Pictures. All Rights Reserved.

<script type="text/javascript">
var dispVm = {
results: ko.observable(),
};
ko.applyBindings(dispVm, document.getElementById('divDisplay'));
</script>

 Add foreach: binding

Copyright: 2008 Columbia Pictures. All Rights Reserved.

<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>

 Add polling to retrieve list items

(function poll() {
$.ajax({
url: _spPageContextInfo.webServerRelativeUrl +
"_vti_bin/listdata.svc/Representatives?$expand=Specialty",
success: function (data) {
//Update the Display
dispVm.results(data.d.results);
}, dataType: "json", complete: poll, timeout: 30000
});
})();

Copyright: 2008 Columbia Pictures. All Rights Reserved.

 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

 Experiment
Write custom WCF Services
Web Parts

 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-javascriptand-jquery

http://bit.ly/spsbmorexlg

Thank you!