SharePoint and Knockout for the REST of Us
Download
Report
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)">
(<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!