Presentation is loading. Please wait.

Presentation is loading. Please wait.

Tory Douglas Principal Portals and Collaboration Blog: » Microsoft Certified.

Similar presentations

Presentation on theme: "Tory Douglas Principal Portals and Collaboration Blog: » Microsoft Certified."— Presentation transcript:


2 Tory Douglas Principal 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


4 » 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

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

6 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




10 HTMLCSSJavaScript JSONDOMAsync SharePoint CSOM No Page Refresh User Experience 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. In general I believe it is combing these ideas / technologies together to create a better user experience.

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 ˃http://www.cpsaarizona.org ˃


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

14 » 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 since doesnt need specific assemblies. » Can be used for mobile device such as ios or android. » No CAML !!

15 For more info on OData checkout

16 » SharePoint 2010 ˃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)

17 » Using BCS REST service: ˃ aspx aspx » Using Search REST service: ˃ aspx aspx » Using Social Features REST service: ˃ aspx aspx » User Profiles ˃ aspx aspx

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.

19 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. 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. SharePoint Foundation interface returns entity data model XML that describes the entity types for every list in the website. the specified list item by ID (2) as an Atom feed with one entry that corresponds to the requested item. the Atom feed by name. ufacturerId%20eq%203 Use a filter to limit the items returned. The select call here brings back only the selected columns in this case the Title field.

20'Manufacturers')/ItemsExample getting the items inside the Manufacturers list'Countries')/ItemsExample of getting the items inside the Countries list'Manufacturers')/Items?$f ilter=CountryId%20eq%201 Example of filtering a list with a lookup column. Countries and Manufacturers, here we are grabbing the Manufacturers for country id = 1'Vehicles')/ItemsExample of getting the items inside the Vehicles list'Vehicles')/Items?$filter= ManufacturerId%20eq%2049 Example of getting the vehicles for ManufacturerId 49 which is BMW'Vehicles')/Items(3)Example of getting a single vehicle record. 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


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

23 » Include jquery on our site by either downloading files or referencing from a CDN » Jquery CDN example » » 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

24 $(document).ready(function() { alert(hello from jquery); });

25 $(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'); } });

26 » The documentation is pretty good ˃ » Ajax specific information, pertains to what we are trying to do today. ˃

27 » Lets jump to some examples I have prepared ˃ ˃ ˃ ˃ ˃ ˃


29 » 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

30 » ˃Download the js file ˃Or use the cdn + » Reference the js on your page »

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

32 » Your applications 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 (its a javascript object) var myViewModel = { personName: 'Bob', personAge: 123 };

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.

34 » 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

35 My name is and i am years old. var myViewModel = { personName: 'Bob', personAge: 123}; ko.applyBindings(myViewModel); ˃Examples +View bound to data model – +2 way binding – +Computed Property –


37 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: us/library/fp aspx us/library/fp aspx For additional information on SharePoint 2013 Cross Domain Library

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

Download ppt "Tory Douglas Principal Portals and Collaboration Blog: » Microsoft Certified."

Similar presentations

Ads by Google