Presentation on theme: "Presentation Prep Open Fiddler"— Presentation transcript:
1SharePoint Client Side Development with rest, jquery, and intro to knockout Presentation PrepOpen FiddlerOpen Sample files in sharepoint designer and put into advanced modeOpen https://spsphoenixdemo.sharepoint.com in chromeOpen https://spsphoenixdemo.sharepoint.com in IECloseClose lync
2About Me Tory Douglas Principal Consultant @Neudesic Portals and CollaborationBlog:Microsoft Certified Professional (MCP)Microsoft Certified Application Developer(MCAD)Microsoft Certified Solution Developer(MCSD)Microsoft Certified Technical Specialist WSS 3.0 ConfigurationMicrosoft Certified Technical Specialist MOSS 2007 ConfigurationMicrosoft Certified Technical Specialist SharePoint 2010 ConfigurationAbout Me
3There 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.
4Many 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 OnlineThere 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
5Agenda Client Side Development SharePoint Rest API Jquery Knockout OverviewExampleSharePoint Rest APIExamplesJqueryKnockoutPutting it all togetherAgenda
6What are we building? Requirements Filter manufacturers by country Load vehicles for a manufacturerSee specific vehicle detailsListsVehicles ListLookup to manufacturerManufacturers ListLookup to countriesCountries ListVehicles ListManufacturers ListCountries ListFilter manufacturers by countryLoad vehicles for a manufacturerSee specific vehicle detailsWhat are we building?
11Can you think of an example of a site you use that takes advantage of client side development? GmailYahoo MailOffice Web AppsAn example I did for a client on SharePoint 2010Examples
13What is ReST? REST stands for Representational State Transfer. Simple stateless client-server architecture using http protocolRESTful applications use HTTP requests to perform different actions based on http verbs:Get: get a listPost : create a listDelete: delete a listPut or Merge: change a listToday 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 listPost : create a listDelete: delete a listPut or Merge: change a listToday were focusing on the most common use case, reading data, which uses http get.What is ReST?
14Why is ReST important? Gaining momentum in industry Flickr, Twitter, YouTube, SharePoint 2013Simpler and Easier to UseResults can be returned in JSON and ATOM format.Easier to use than Soap-based web service.Each query is submitted with a unique urlCan be cached by proxy serversCan 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 industryFlickr,Twitter,YouTube,SharePoint 2013Simpler and Easier to UseResults can be returned in JSON and ATOM format.Easier to use than Soap-based web service.Each query is submitted with a unique urlCan be cached by proxy serversCan 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?
16SharePoint 2010 vs 2013 SharePoint 2010 SharePoint 2013 In SharePoint 2010 the rest api is limited to ListData.svc accessible fromThis can be used to interact with List Data inside of SharePoint.SharePoint 2013Urls can go through _api folderYou can replaceWith thisAdditional Rest API functionality exposed in 2013 (next slide)SharePoint 2010 vs 2013
17SharePoint 2013 Additional Rest API’s Using BCS REST service:Using Search REST service:Using Social Features REST service:User ProfilesNot 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
18If 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
19SharePoint 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 2010Remember the $ or your queries wont work they way you expectSharePoint 2010 ListData.svc
20Sample 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 belowhttps://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Manufacturers')/ItemsExample getting the items inside the Manufacturers listhttps://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Countries')/ItemsExample of getting the items inside the Countries listhttps://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Manufacturers')/Items?$filter=CountryId%20eq%201Example of filtering a list with a lookup column. Countries and Manufacturers, here we are grabbing the Manufacturers for country id = 1https://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Vehicles')/ItemsExample of getting the items inside the Vehicles listhttps://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Vehicles')/Items?$filter=ManufacturerId%20eq%2049Example of getting the vehicles for ManufacturerId 49 which is BMWhttps://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Vehicles')/Items(3)Example of getting a single vehicle record.Remember the $ or your queries won’t work they way you expectSharePoint 2013 Client.svc
Jquery UI example. You can add the reference in multiple ways : Reference in the head section of html page. Reference in of a page tied to a master page. Add script tag directly to a visual web part. Wiring up jquery.",