Sharepoint client side development with rest jquery and intro to knockout
This presentation is the property of its rightful owner.
Sponsored Links
1 / 38

SharePoint Client Side Development with rest , jquery , and intro to knockout PowerPoint PPT Presentation


  • 57 Views
  • Uploaded on
  • Presentation posted in: General

SharePoint Client Side Development with rest , jquery , and intro to knockout. Tory Douglas Principal Consultant @Neudesic Portals and Collaboration Email: [email protected] Blog: www.torydouglas.com Microsoft Certified Professional (MCP)

Download Presentation

SharePoint Client Side Development with rest , jquery , and intro to knockout

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Sharepoint client side development with rest jquery and intro to knockout

SharePoint Client Side Development with rest, jquery, and intro to knockout


About me

Tory Douglas

Principal Consultant @Neudesic

Portals and Collaboration

Email: [email protected]

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

About Me


Summary

  • 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

Summary


Agenda

  • Client Side Development

    • Overview

    • Example

  • SharePoint Rest API

    • Overview

    • Examples

  • Jquery

    • Overview

    • Examples

  • Knockout

    • Overview

    • Examples

  • Putting it all together

Agenda


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

What are we building?


Client side development

Client Side Development


What does client side development mean to you

What does client side development mean to you?


What does client side development mean to me

What does client side development mean to me?


A few things

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.

a few things…


Examples

  • 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

Examples


Sharepoint rest api

SharePoint Rest API


What is rest

  • REST stands for Representational State Transfer.

  • Simple stateless client-server architecture using http protocol

  • RESTfulapplications 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?


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 !!

Why is ReST important?


Sharepoint rest service architecture

For more info on OData checkout

http://msdn.microsoft.com/en-us/data/hh237663

SharePoint Rest Service Architecture


Sharepoint 2010 vs 2013

  • 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)

SharePoint 2010 vs 2013


Sharepoint 2013 additional rest api s

  • 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

SharePoint 2013 Additional Rest API’s


Quick tip ie

  • 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


Sharepoint 2010 listdata svc

SharePoint 2010 ListData.svc


Sharepoint 2013 client svc

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

SharePoint 2013 Client.svc


Jquery

JQuery


What is jquery

  • 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 XMLHttpRequestobject

    • Cross browser support

  • Jqueryui is another library, focused around the user interface

    • provides interactions, effects, widgets, and themes

    • built on top of the jQuery

What is Jquery?


Wiring up 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:ContentContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server"> of a page tied to a master page

  • Add script tag directly to a visual web part

Wiring up jquery


Wiring up jquery1

<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

Wiring up Jquery


Jquery ajax call

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

Jqueryajax call


Jquery api docs

  • 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/

Jquery API Docs


Jquery examples

  • 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/

Jquery Examples


Knockout

Knockout


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?


Getting started

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

Getting Started


Mvvm and view models

  • 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

MVVM and View Models


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)

    varmyViewModel = {

    personName: 'Bob',

    personAge: 123

    };

The Model


The view model

  • 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


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


Putting it all together

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

varmyViewModel = { 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/

Putting it all together


Back to our examples

Back to our examples


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: http://msdn.microsoft.com/en-us/library/fp142384.aspx

For additional information on SharePoint 2013 Cross Domain Library

http://msdn.microsoft.com/en-us/library/fp179927.aspx

Assumptions/Additional info


Questions

Thank you for attending.

I hope you enjoyed it or at least learned a thing or two!!

Questions?


  • Login