Click to edit Master

subtitle style

03 | Client Side SharePoint Development

Chris Johnson | SharePoint Guru

Christopher Harrison | Microsoft Certified Trainer
Module Overview

Client-Side Object Model for JavaScript

• REST API with JavaScript
Lesson 1: Client-Side Object Model for JavaScript

Overview of the CSOM for JavaScript

Using the Client Context Object
Loading Objects and Running Queries
Changing SharePoint Data
• Handling Server-Side Errors
Overview of the CSOM for JavaScript
• Components of the CSOM
• Linking to Script Libraries
• Using the CSOM Proxy
App SharePoint

Custom JavaScript
Content DB

JavaScript CSOM JSON

Client.svc
Service Proxy
XML
Using the Client Context Object
getSiteCollection = function () {
context = new SP.ClientContext.get_current();
siteCollection = context.get_site();
context.load(siteCollection);
context.executeQueryAsync(onSuccess, onFailure);
},
onSuccess = function () {
alert("URL: " + siteCollection.get_url());
},
onFailure = function(sender, args) {
alert("Could not obtain the site collection URL");
}
Loading Objects and Running Queries

• Loading Objects
– Context.Load()
– Context.LoadQuery()
• Execution
– ExecuteQueryAsync()
• Success
• Failure
Changing SharePoint Data

• Creating a new list in a site

• Creating a new item in a list
• Updating an existing item in a list
• Deleting an item from a list
DEMO
Client Side Object Model via JavaScript
Handling Server-Side Errors
• By default, a server-side error causes the whole batch of
operations to fail.
• Use an Error Handling Scope to define server-side try/catch/finally

var e = new SP.ExceptionHandlingScope(context);

var s = e.startScope();
var t = e.startTry();
//This is the try block
t.dispose();
var c = e.startCatch();
//This is the catch block
c.dispose();
Lesson 2: Using the REST API with JavaScript
Overview of the REST API
SharePoint REST API URLs
Reading Data
• Creating and Updating Data
Overview of the REST API

• RESTful Services:
– Use Logical URLs to specify objects
– Use HTTP verbs to specify operations
– Use OData to exchange data

• Client.svc service is a REST API

$.getJSON(
"http://intranet.contoso.com/_api/web",
function (data) {
alert('site is called: ' + data.d.Title);
}
)
SharePoint REST API URLs

• Address of the REST API

• URLs for Common SharePoint Objects
• Using OData Operators

http://intranet.contoso.com
/_api/web/lists/getbytitle("MyList")/items
?$select=ID,Title
&$order=Title
&$filter=startswith(Title,”A”)
Reading Data

• Using the _spPageContextInfo.webServerRelativeUrl property

• The jQuery getJSON() function
• The jQuery ajax() function
Creating and Updating Data
• Always pass a form digest
• Creating New Items
– Formulate a URL to the parent list in the REST API
– Use the POST verb

• Updating Existing Items

– Formulate a URL to the item itself
– Use the PATCH, MERGE, or PUT verbs

• Deleting Items
– Formulate a URL to the item itself
– Use the DELETE verb
DEMO
REST API and JavaScript
©2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the
U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft
must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after
the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.