1. SharePoint and Knockout for the REST of Us
Welcome All!
Introduction to interacting with list data
using Knockout and REST web services

2. Introductions
Who is the one they call ‘Xenox’?

3. How did I get here? Musician Developer Father SharePointian
Federal Team
SharePoint Developer Planet Technologies

4. Agenda
What are we going to do today?

5. Recipe MVVM in brief Knockout overview SharePoint REST overview
Connecting the Dots
Copyright: 2008 Columbia Pictures. All Rights Reserved.

6. MVVM (Model View ViewModel)
What is it?

7. MVVM Separation of powers/interests Model View ViewModel
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.

8. Knockout.js
Overview

9. Knockout.js JavaScript Library Free, Open Source
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
Copyright: 2008 Columbia Pictures. All Rights Reserved.

10. Knockout.js -> View Where your information is displayed
Essentially the HTML portion
<input type="text"/>
<input type="checkbox"/>
<select> … </select>
Copyright: 2008 Columbia Pictures. All Rights Reserved.

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

12. Knockout.js -> ViewModel
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.

13. Knockout Demo Simple binding
->Create a New Visual Studio Project (KO)
Show basic knockout functionality
-> Add new Module
-> Add Sample ASPX page
Simple binding

14. Starting out small Create a Simple SharePoint List (MODEL)
Representatives
First Name
Last Name
Specialty
Create in Visual Studio or using the UI
Visual Studio (Sandboxed Solution)
Add Custom List
Edit Feature to include list instance
Deploy
Copyright: 2008 Columbia Pictures. All Rights Reserved.

15. 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>
Visual Studio
Add Item
Module
For simplicity, putting all files in root (Edit elements.xml)
Add jQuery
Add Knockout
Add New Site Page (Default)
Add JavaScript references below, or drag and drop for intellisense
<SharePoint:Scriptlink ID="ScriptKnockout" runat="server" Name="~sitecollection/knockout.debug.js" Language="javascript" />
<SharePoint:Scriptlink ID="ScriptJQuery" runat="server" Name="~sitecollection/jquery.debug.js" Language="javascript" />
Add HTML
<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>

16. Apply the glue
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>
Add JavaScript
<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>
2. Add page to feature
3. Deploy
Show observable edits within browser IE dev tools

17. Big Deal, what next? Modify HTML to allow edits
Bind <input> controls
Modify valueUpdate property
valueUpdate: ‘afterkeydown’
Bind a <select> with options
Copy all fields and convert to Input
<p>First Name: <input data-bind="value:FirstName"/></p>
<p>Last Name: <input data-bind="value:LastName"/></p>
<p>Specialty: <input data-bind="value:Specialty"/></p>
Change binding to value
See what happens
Modify the valueUpdate property to:
, valueUpdate:'afterkeydown‘
Bind Specialty to a Select
(Replace Specialty Edit Field)
<select data-bind="value:Specialty, valueUpdate:'afterkeydown', options:sOptions"></select>
Add static Options values
this.sOptions = ["Research and Development", "Security", "Investing"];
CODE: KnockoutSimple.sln
Copyright: 2008 Columbia Pictures. All Rights Reserved.

18. Web Services
What options to I have within SharePoint?

19. Web Services Options - Lists
Web Services (SOAP)
REST Interface (OData)
New in 2013
Copyright: 2008 Columbia Pictures. All Rights Reserved.

20. 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)

21. listdata.svc – Lets get some
GET site information as ATOM feed (XML)
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!
Show example of:
Add a representative
3. Show Fiddler and add accept to:
application/json
Copyright: 2008 Columbia Pictures. All Rights Reserved.

22. OData query options $select $metadata $orderby $expand $filter
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
Show example of:
Show sorted
desc
3. Show Filtered
eq ‘Xenox’
$inlinecount=allpages
/$count
Many Many More …. See ODATA References

23. Demo Putting it together LIVE
Copyright: 2008 Columbia Pictures. All Rights Reserved.
Putting it together LIVE

24. 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>
CODE: Open KnockoutSimple
1. Create Specialties List
Title
Active
2. Add Data to instance Elements.XML
3. Modify Representatives list to make Specialty a lookup (Lists/Specialties)
4. Add Specialty Feature
Add Caption to Specialty
<p>Specialty: <select data-bind="value:Specialty, valueUpdate:'afterkeydown', options:sOptions, optionsCaption:'Select a Specialty ...'"/></p>
Check endpoint
<Data>
<Rows>
<Row>
<Field Name="ID">1</Field>
<Field Name="Title">Management</Field>
<Field Name="Active">True</Field>
</Row>
<Field Name="ID">2</Field>
<Field Name="Title">Financial Portfolios</Field>
<Field Name="ID">3</Field>
<Field Name="Title">Insurance</Field>
<Field Name="ID">4</Field>
<Field Name="Title">Computers</Field>
<Field Name="Active">False</Field>
<Field Name="ID">5</Field>
<Field Name="Title">Black leather gloves</Field>
<Field Name="ID">6</Field>
<Field Name="Title">Research and Development</Field>
<Field Name="ID">7</Field>
<Field Name="Title">Security</Field>
<Field Name="ID">8</Field>
<Field Name="Title">Investors</Field>
</Rows>
</Data>

25. Connect it Add optionsText: binding to set select display text
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>
1. Modify control to display the Title Value
<p>Specialty: <select data-bind="value:SpecialtyId, valueUpdate:'afterkeydown', options:sOptions, optionsText:'Title', optionsValue:’Id’, optionsCaption:'Select a Specialty ...'"></select></p>
<p>Specialty: <strong data-bind="text:SelectedSpecialty"></strong></p>
self.SpecialtyId = ko.observable();

26. Add functionality
Add button to page and register click: binding with the ViewModel
<input type="button" data-bind="click: AddRepresentative"
value="Add Representative" />
Simplify view model by removing unneeded Display Code
Isolate Data source from view model.
<script type="text/javascript">
var sOptions = ko.observable();
$.getJSON(_spPageContextInfo.webServerRelativeUrl + "_vti_bin/listdata.svc/Specialties?$select=Title,Active,Id&$filter=Active eq true", {}, dataCallBack);
function dataCallBack(data) {
sOptions(data.d.results); }
</script>
self.AddRepresentative = function () {
alert('You want to add ' + self.FirstName() + ' ' self.LastName()); }

27. Post to a SharePoint List
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()); }
});

28. Real Time Feed 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>
CODE KnockoutSimple3.sln

29. Real Time Feed 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)"> 
(<em data-bind="text: Specialty.Title"></em>)</span>
</p>
</div>
CODE KnockoutSimple3.sln

30. 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 Display
dispVm.results(data.d.results);
}, dataType: "json", complete: poll, timeout: 30000
});
})();
Copyright: 2008 Columbia Pictures. All Rights Reserved.
CODE KnockoutSimple3.sln

31. 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
There are many ways to interact with the data
Leave the HTML to the Front End Designers
Work in parallel

32. Where do we go from here? Experiment Write custom WCF Services
Web Parts

33. References MSDN - Using the REST Interface
MSDN – SharePoint Foundation REST Interface
ODATA.ORG – URI Conventions
Knockout.js
Long Polling Example
and-jquery

34. Please fill out an Evaluation
Please fill out an Evaluation
Thank you!