1. SharePoint Client Side Development with rest, jquery, and intro to knockout
Presentation Prep
Open Fiddler
Open Sample files in sharepoint designer and put into advanced mode
Open in chrome
Open in IE
Close
Close lync

2. About Me Tory Douglas Principal Consultant @Neudesic
Portals and Collaboration
Blog:
Microsoft Certified Professional (MCP)
Microsoft Certified Application Developer(MCAD)
Microsoft Certified Solution Developer(MCSD)
Microsoft Certified Technical Specialist WSS 3.0 Configuration
Microsoft Certified Technical Specialist MOSS 2007 Configuration
Microsoft Certified Technical Specialist SharePoint 2010 Configuration
About Me

3. There have been many changes recently with client side technologies and developing for SharePoint.
This class will explore how we can utilize these new libraries with the SharePoint and it’s rest api to quickly build new functionality on top of the platform.

4. Many recent changes for Client Side and developing for SharePoint
Many recent changes for Client Side and developing for SharePoint. The rest api is a great improvement.
This session will explore using rest api, jquery and knockout.
These techniques can be used on SharePoint 2010 , 2013 and SharePoint Online
There have been many changes recently with client side technologies and developing for SharePoint.
This session will explore how we can utilize these new libraries with SharePoint and it’s rest api to quickly build new functionality on top of the platform.
Summary

5. Agenda Client Side Development SharePoint Rest API Jquery Knockout
Overview
Example
SharePoint Rest API
Examples
Jquery
Knockout
Putting it all together
Agenda

6. What are we building? Requirements Filter manufacturers by country
Load vehicles for a manufacturer
See specific vehicle details
Lists
Vehicles List
Lookup to manufacturer
Manufacturers List
Lookup to countries
Countries List
Vehicles List
Manufacturers List
Countries List
Filter manufacturers by country
Load vehicles for a manufacturer
See specific vehicle details
What are we building?

7. Client Side Development

8. What does client side development mean to you?

9. What does client side development mean to me?

10. a few things… HTML CSS JavaScript JSON DOM Async SharePoint CSOM
We call it client side development because we are performing much of the interaction on the client (web browser) in this case, instead of relying on the server to perform the processing.
HTML
CSS
JavaScript
JSON
DOM
Async
SharePoint CSOM
No Page Refresh
User Experience
In general I believe it is combing these ideas / technologies together to create a better user experience.
a few things…

11. Can you think of an example of a site you use that takes advantage of client side development?
Gmail
Yahoo Mail
Office Web Apps
An example I did for a client on SharePoint 2010
Examples

12. SharePoint Rest API

13. What is ReST? REST stands for Representational State Transfer.
Simple stateless client-server architecture using http protocol
RESTful applications use HTTP requests to perform different actions based on http verbs:
Get: get a list
Post : create a list
Delete: delete a list
Put or Merge: change a list
Today were focusing on the most common use case, reading data, which uses http get.
REST stands for Representational State Transfer.
Simple stateless architecture, client-server, HTTP protocol is usually used.
RESTful applications use HTTP requests to perform different actions based on http verbs:
Get: get a list
Post : create a list
Delete: delete a list
Put or Merge: change a list
Today were focusing on the most common use case, reading data, which uses http get.
What is ReST?

14. Why is ReST important? Gaining momentum in industry
Flickr, Twitter, YouTube, SharePoint 2013
Simpler and Easier to Use
Results can be returned in JSON and ATOM format.
Easier to use than Soap-based web service.
Each query is submitted with a unique url
Can be cached by proxy servers
Can be used outside of .net since doesn’t need specific assemblies.
Can be used for mobile device such as ios or android.
No CAML !!
Gaining momentum in industry
Flickr,Twitter,YouTube,SharePoint 2013
Simpler and Easier to Use
Results can be returned in JSON and ATOM format.
Easier to use than Soap-based web service.
Each query is submitted with a unique url
Can be cached by proxy servers
Can be used outside of .net since doesn’t need specific assemblies.
Can be used for mobile device such as ios or android.
No CAML !!
Why is ReST important?

15. SharePoint Rest Service Architecture
For more info on OData checkout
Green box is requesting data from the blue box
Odata is the protocol of how the client can communicate to the web service and get the data.
In our example today our green box , the web browser is going to be requesting vehicle, manufacturer, and country data from our data store (3 related SharePoint lists)
Our rest call tells the client.svc web service that we want the response in JavaScript Object Notation (JSON).
We get the data back in a raw format and then we have to parse it with javascript and make it look pretty.
What is Odata
OData defines an abstract data model and a protocol that let any client access information exposed by any data source.
SharePoint Rest Service Architecture

16. SharePoint 2010 vs 2013 SharePoint 2010 SharePoint 2013
In SharePoint 2010 the rest api is limited to ListData.svc accessible from
This can be used to interact with List Data inside of SharePoint.
SharePoint 2013
Urls can go through _api folder
You can replace
With this
Additional Rest API functionality exposed in 2013 (next slide)
SharePoint 2010 vs 2013

17. SharePoint 2013 Additional Rest API’s
Using BCS REST service:
Using Search REST service:
Using Social Features REST service:
User Profiles
Not going to go over these but wanted to include in a slide deck to make you aware that they exist.
SharePoint 2013 Additional Rest API’s

18. If you like to work in ie then you will want to turn off the feed reader view so you can see the xml from the rest api calls in the browser.
Quick Tip IE

19. SharePoint 2010 ListData.svc
Typing the URL of the REST service returns a standard Atom service document that describes collections of information that are available in the SharePoint Foundation site.
Typing a name after the URL of the service returns SharePoint Foundation list data in XML format as a standard Atom feed that contains entries for every list item and the properties of each item, in addition to navigation properties that are represented as Atom links. Navigation properties represent relationships to other SharePoint Foundation lists that are formed through lookup columns.
The SharePoint Foundation interface returns entity data model XML that describes the entity types for every list in the website.
Returns the specified list item by ID (2) as an Atom feed with one entry that corresponds to the requested item.
Sorts the Atom feed by name.
Use a filter to limit the items returned. The select call here brings back only the selected columns in this case the Title field.
The list names and field names are case sensitive in 2010
Remember the $ or your queries wont work they way you expect
SharePoint 2010 ListData.svc

20. Sample 2013 calls we will be using today to get data from lists
Remember we can swap “_vti_bin/client.svc” with “_api”, we are using this below
Example getting the items inside the Manufacturers list
Example of getting the items inside the Countries list
Example of filtering a list with a lookup column. Countries and Manufacturers, here we are grabbing the Manufacturers for country id = 1
Example of getting the items inside the Vehicles list
Example of getting the vehicles for ManufacturerId 49 which is BMW
Example of getting a single vehicle record.
Remember the $ or your queries won’t work they way you expect
SharePoint 2013 Client.svc

21. JQuery

22. Jquery is a small feature rich javascript library to make your life easier
HTML document traversal and manipulation
event handling, Animation
Ajax much simpler, wraps the browser XMLHttpRequest object
Cross browser support
Jquery ui is another library, focused around the user interface
provides interactions, effects, widgets, and themes
built on top of the jQuery
What is Jquery?

23. Include jquery on our site by either downloading files or referencing from a CDN
Jquery CDN example
<script type="text/javascript" src="
Jquery UI example
<script type="text/javascript" src="
You can add the reference in multiple ways :
Reference in the head section of html page
Reference in <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server"> of a page tied to a master page
Add script tag directly to a visual web part
Wiring up jquery

24. Wiring up Jquery http://jsfiddle.net/jZ3fz <html> <head>
<script type="text/javascript" src="
<script type="text/javascript" src="
<script type="text/javascript">
$(document).ready(function() {
alert(“hello from jquery”);
});
</script>
</head>
<body>
</body>
</html>
Wiring up Jquery

25. <script type="text/javascript"> $(document).ready(function() { $.ajax({ url: "/_api/web/lists/getbytitle(‘listname’)/items" , method: "GET", headers: { "Accept": "application/json; odata=verbose" }, success: function (data) { // Returns JSON collection of the results $.each(data.d.results,function(key,val){ var title = val.Title; //reference list column off of the val object here we get the Title column alert(title); }); }, error: function (data) { alert('an error has occurred'); } </script>
Jquery ajax call

26. Jquery API Docs The documentation is pretty good
Ajax specific information, pertains to what we are trying to do today.
Jquery API Docs

27. Jquery Examples Let’s jump to some examples I have prepared
Jquery Examples

28. Knockout

29. What is Knockout? Knockout is a Javascript Library
Has the concept of an underlying data model, uses Model-View-View-Model (MVVM) pattern
Makes it easier to maintain your application when things get more complicated
Can be used to create rich dynamic User Interfaces
What is Knockout?

30. Getting Started www.knockoutjs.com Reference the js on your page
Download the js file
Or use the cdn
Reference the js on your page
<script type="text/javascript" src="
Getting Started

31. Model-View-View Model (MVVM) is a design pattern for building user interfaces.
It allows you to split your UI into three parts to help keep it simple:
A Model
A View Model
A View
A model:
-your application’s stored data.
-data represents objects and operations in your business domain
-independent of any ui
-usually use ajax to read a write this data
A view model: a pure-code representation of the data and operations on a UI. For example, if you’re implementing a list editor, your view model would be an object holding a list of items, and exposing methods to add and remove items.
Note that this is not the UI itself: it doesn’t have any concept of buttons or display styles. It’s not the persisted data model either - it holds the unsaved data the user is working with. When using KO, your view models are pure JavaScript objects that hold no knowledge of HTML. Keeping the view model abstract in this way lets it stay simple, so you can manage more sophisticated behaviors without getting lost.
A view: a visible, interactive UI representing the state of the view model. It displays information from the view model, sends commands to the view model (e.g., when the user clicks buttons), and updates whenever the state of the view model changes.
When using KO, your view is simply your HTML document with declarative bindings to link it to the view model. Alternatively, you can use templates that generate HTML using data from your view model.
MVVM and View Models

32. The Model Your application’s stored data.
Data represents objects and operations in your business domain
Independent of any ui
Usually use ajax to read a write this data
Sample view model (it’s a javascript object)
var myViewModel = {
    personName: 'Bob',
    personAge: 123 };
The Model

33. pure-code representation of the data and operations on a UI.
For what we build today our view model will hold the following types of information :
Manufacturers property array
Countries property array
Vehicles property array
SelectedVehicle object
Methods to help add or set items to this data above
Note that this is not the UI itself:
no concept of buttons or display styles
holds the unsaved data the user is working with.
The View Model

34. The View The user interface, what you see.
Displays information from the view model.
Can send commands to the view model (e.g., when the user clicks buttons)
Updates when the state of the view model changes.
When using KO, your view is simply your HTML document
The View

35. Putting it all together
<html>
<head>
<script type="text/javascript" src="
</head>
<body>
My name is <span data-bind="text: personName"></span> and i am <span data-bind="text: personAge"></span> years old.
</body>
<script>
var myViewModel = { personName: 'Bob', personAge: 123};
ko.applyBindings(myViewModel);
</script>
</html>
Examples
View bound to data model
2 way binding
Computed Property
Putting it all together

36. Back to our examples

37. Assumptions /Additional info
To keep our examples simple today we assumed we are writing code in the context of an authenticated user. This could be javascript in a web part or on a SharePoint page.
For additional information on app authentication and authorization (Oauth) you can visit:
For additional information on SharePoint 2013 Cross Domain Library
Assumptions /Additional info

38. Questions? Thank you for attending.
I hope you enjoyed it or at least learned a thing or two!!
Questions?