Presentation is loading. Please wait.

Presentation is loading. Please wait.

SharePoint and Knockout for the REST of Us

Similar presentations


Presentation on theme: "SharePoint and Knockout for the REST of Us"— Presentation transcript:

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 Add JavaScript. 2. Add page to feature. 3. Deploy. Show observable edits within browser IE dev tools.", "width": "800" }

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

Specialty:

Ads by Google