Transcript SharePoint and Knockout for the REST of Us

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!