SharePoint and Knockout for the REST of Us Welcome All! 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 brief Knockout overview SharePoint REST overview Connecting the Dots Copyright: 2008 Columbia Pictures. All Rights Reserved.

MVVM (Model View ViewModel) What is it?

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.

Knockout.js Overview

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.

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.

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 is Binding definitions The glue that holds it all together Copyright: 2008 Columbia Pictures. All Rights Reserved.

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

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.

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>

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

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.

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! Show example of: http://spf2010/_vti_bin/listdata.svc/Representatives Add a representative http://spf2010/_vti_bin/listdata.svc/Representatives(1) 3. Show Fiddler and add accept to: application/json Copyright: 2008 Columbia Pictures. All Rights Reserved.

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: http://spf2010/_vti_bin/listdata.svc/$metadata Show sorted http://spf2010/_vti_bin/listdata.svc/Representatives?$orderby=FirstName desc 3. Show Filtered http://spf2010/_vti_bin/listdata.svc/Representatives?$filter=FirstName eq ‘Xenox’ $inlinecount=allpages /$count Many Many More …. See ODATA References

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

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 http://spf2010/_vti_bin/listdata.svc/Specialty <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>

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

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

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

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

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

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

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

Where do we go from here? Experiment Write custom WCF Services Web 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 http://bit.ly/spsbmorexlg Please fill out an Evaluation Thank you!