Presentation is loading. Please wait.

Presentation is loading. Please wait.

Introduction to interacting with list data using Knockout and REST web services.

Similar presentations


Presentation on theme: "Introduction to interacting with list data using Knockout and REST web services."— Presentation transcript:

1 Introduction to interacting with list data using Knockout and REST web services

2 Who is the one they call Xenox?

3 Musician Developer Father SharePointian Federal Team SharePoint Developer Planet Technologies

4 What are we going to do today?

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

6 What is it?

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

8 Overview

9 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 Where your information is displayed Essentially the HTML portion … Copyright: 2008 Columbia Pictures. All Rights Reserved.

11 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 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 Simple binding

14 Create a Simple SharePoint List (MODEL) Representatives First Name Last Name Specialty Copyright: 2008 Columbia Pictures. All Rights Reserved.

15 Build a simple web page (VIEW) Use simple HTML Controls First Name: Last Name: Specialty:

16 Define bindings and Link it to HTML with Data Bindings (VIEWMODEL) 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);

17 Modify HTML to allow edits Bind controls Modify valueUpdate property valueUpdate: afterkeydown Bind a with options Copyright: 2008 Columbia Pictures. All Rights Reserved.

18 What options to I have within SharePoint?

19 Web Services (SOAP) /_vti_bin/Lists.asmx REST Interface (OData) /_vti_bin/listdata.svc New in /_api/ Copyright: 2008 Columbia Pictures. All Rights Reserved.

20 Construct HTTP request to query SharePoint list data HTTP verbData operation GETRetrieve POSTCreate PUTUpdate (update all fields and use default values for any undefined fields) DELETEDelete MERGEUpdate (update only the fields that are specified and changed from current version)

21 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! Copyright: 2008 Columbia Pictures. All Rights Reserved.

22 $metadata 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 Many Many More …. See ODATA References

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

24 Create a Specialty List in SharePoint Title Active Make the Specialty dropdown list an observable Connect options to SharePoint with REST call 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); }

25 Add optionsText: binding to set select display text Add optionsValue: binding to set value stored Specialty: self.SpecialtyId = ko.observable(); Copyright: 2008 Columbia Pictures. All Rights Reserved.

26 Add button to page and register click: binding with the ViewModel self.AddRepresentative = function () { alert('You want to add ' + self.FirstName() + ' ' + self.LastName()); }

27 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 Bind a 2 nd view model Select the node of the DOM you want to bind to var dispVm = { results: ko.observable(), }; ko.applyBindings(dispVm, document.getElementById('divDisplay')); Copyright: 2008 Columbia Pictures. All Rights Reserved.

29 Add foreach: binding ( ) Copyright: 2008 Columbia Pictures. All Rights Reserved.

30 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: }); })(); Copyright: 2008 Columbia Pictures. All Rights Reserved.

31 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

32 Experiment Write custom WCF Services Web Parts

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

34 Thank you!


Download ppt "Introduction to interacting with list data using Knockout and REST web services."

Similar presentations


Ads by Google