Tory Douglas
Principal Consultant @Neudesic
Portals and Collaboration
Email: Tory.Douglas@neudesic.com
Blog: www.torydouglas.com
»
»
»
»
»
»
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
» 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
» Client Side Development
˃ Overview
˃ Example
» SharePoint Rest API
˃ Overview
˃ Examples
» Jquery
˃ Overview
˃ Examples
» Knockout
˃ Overview
˃ Examples
» Putting it all together
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
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.
» 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
˃ http://www.cpsaarizona.org
˃ http://www.cpsaarizona.org/Pages/Provider-Manual-Overview.aspx
» 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.
» 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 !!
For more info on OData checkout
http://msdn.microsoft.com/en-us/data/hh237663
» SharePoint 2010
˃ In SharePoint 2010 the rest api is limited to ListData.svc accessible
from http://contososerver/_vti_bin/ListData.svc.
˃ This can be used to interact with List Data inside of SharePoint.
» SharePoint 2013
˃ Urls can go through _api folder
˃ You can replace
http://spsphoenixdemo.sharepoint.com/_vti_bin/client.svc/web/lists
˃ With this
http://spsphoenixdemo.sharepoint.com/_api/web/lists
˃ Additional Rest API functionality exposed in 2013 (next slide)
» Using BCS REST service:
˃ http://msdn.microsoft.com/en-us/library/jj163227.aspx
» Using Search REST service:
˃ http://msdn.microsoft.com/en-us/library/office/dn423226.aspx
» Using Social Features REST service:
˃ http://msdn.microsoft.com/en-us/library/jj822974.aspx
» User Profiles
˃ http://msdn.microsoft.com/en-us/library/office/jj163800.aspx
» 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.
http://intranet/_vti_bin/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.
http://intranet/_vti_bin/ListData.svc/Manufacturers
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.
http://intranet/_vti_bin/ListData.svc/$metadata
The SharePoint Foundation interface returns entity data model XML that
describes the entity types for every list in the website.
http://intranet/_vti_bin/ListData.svc/Manufacturers(2)
Returns the specified list item by ID (2) as an Atom feed with one entry
that corresponds to the requested item.
http://intranet/_vti_bin/ListData.svc/Manufacturers?$orderby=Title
Sorts the Atom feed by name.
http://intranet/_vti_bin/ListData.svc/Vehicle?$select=Title&$filter=Man Use a filter to limit the items returned. The select call here brings back
ufacturerId%20eq%203
only the selected columns in this case the Title field.
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
https://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Manufacturers')/Items
Example getting the items inside the Manufacturers
list
https://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Countries')/Items
Example of getting the items inside the Countries list
https://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Manufacturers')/Items?$f Example of filtering a list with a lookup column.
ilter=CountryId%20eq%201
Countries and Manufacturers, here we are grabbing
the Manufacturers for country id = 1
https://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Vehicles')/Items
Example of getting the items inside the Vehicles list
https://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Vehicles')/Items?$filter=
ManufacturerId%20eq%2049
Example of getting the vehicles for ManufacturerId 49
which is BMW
https://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Vehicles')/Items(3)
Example of getting a single vehicle record.
» 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
» Include jquery on our site by either
downloading files or referencing from a CDN
» Jquery CDN example
»
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
» Jquery UI example
»
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
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
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert(“hello from jquery”);
});
</script>
</head>
<body>
</body>
</html>
http://jsfiddle.net/jZ3fz
<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>
» The documentation is pretty good
˃ http://api.jquery.com/
» Ajax specific information, pertains to what we
are trying to do today.
˃ http://api.jquery.com/jQuery.ajax/
» Let’s jump to some examples I have prepared
˃
˃
˃
˃
˃
˃
http://jsfiddle.net/Lqb22/
http://jsfiddle.net/Lqb22/1/
http://jsfiddle.net/Lqb22/2/
http://jsfiddle.net/Lqb22/3/
http://jsfiddle.net/Lqb22/4/
http://jsfiddle.net/Lqb22/6/
» 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
» www.knockoutjs.com
˃ Download the js file
˃ Or use the cdn
+ http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js
» Reference the js on your page
»
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
» 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
» 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
};
» 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 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
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
</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
– http://jsfiddle.net/crk7Y/
+ 2 way binding
– http://jsfiddle.net/7CQd3/
+ Computed Property
– http://jsfiddle.net/7CQd3/1/
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: http://msdn.microsoft.com/enus/library/fp142384.aspx
For additional information on SharePoint 2013 Cross Domain Library
http://msdn.microsoft.com/en-us/library/fp179927.aspx
Thank you for attending.
I hope you enjoyed it or at least learned a thing or two!!