8/12/2019 20488B_08

1/28

MicrosoftOfficial Course

Module 8

Client-Side SharePointDevelopment

8/12/2019 20488B_08

2/28

Module Overview

Using the Client-Side Object Model for Managed

Code Using the Client-Side Object Model for JavaScript

Using the REST API with JavaScript

8/12/2019 20488B_08

3/28

Lesson 1: Using the Client-Side Object Model forManaged Code

Overview of the Managed CSOM

Using Client Context, Loading Objects, ExecutingQueries

Reading SharePoint Data

Changing SharePoint Data Handling Server-Side Errors

8/12/2019 20488B_08

4/28

Overview of the Managed CSOM

When to use the Managed CSOM

Components of the Managed CSOM

Using the CSOM proxyApplication SharePoint

Managed CSOM

Service Proxy

Custom C# Code

Client.svc

Content DB

XML

JSON

8/12/2019 20488B_08

5/28

Using Client Context, Loading Objects, ExecutingQueries

public string getSiteCollectionUrl () {

string appWebUrl = Page.Request["SPAppWebUrl"];

using (ClientContext context = new ClientContext(appWebUrl));

{

Site siteCollection = context.Site;

context.Load(siteCollection, s=>s.Title,

s=>s.ServerRelativeUrl);

context.ExecuteQuery();

return siteCollection.Url;

}

}

8/12/2019 20488B_08

6/28

Reading SharePoint Data

Obtain a collection of lists in a site:

Obtain a list by its title:

Obtain items in a list by using a CAML query:

ListCollection allLists = currentWeb.Lists;

List suggestionsList = allLists.GetByTitle("Suggestions");

8/12/2019 20488B_08

7/28

Changing SharePoint Data

Creating lists: Create a ListCreationInformation object

Pass the object to Web.Lists.Add()

Creating items:

Create a ListItemCreationInformation object Pass the object to List.AddItem()

Updating items: Set fields on an item

Call Item.Update()

Deleting items: Call Item.DeleteObject()

8/12/2019 20488B_08

8/28

Handling Server-Side Errors

Use an exception handling scope for server-side

errors as in the JavaScript CSOM

Use using() { } code blocks to ensure correct

disposal of objects

Make sure there is only one call toExecuteQuery() after the exception handlingscope is disposed of

L b A U i h Cli Sid Obj M d l f

8/12/2019 20488B_08

9/28

Lab A: Using the Client-Side Object Model forManaged Code

Exercise 1: Create the Mileage Claim List

Exercise 2: Add Mileage Claim Creation Code

Exercise 3: Display Mileage Claims on the AppStart Page

Logon Information Virtual Machine: 20488B-LON-SP-08

Username: CONTOSO\Administrator Password: Pa$$w0rd

Estimated Time: 30 minutes

8/12/2019 20488B_08

10/28

Lab Scenario

The field sales team at Contoso regularly submits

expense claims for mileage. Because of thefluctuating price of fuel, variable tax rates, andother factors, some salespeople find it difficult tocalculate their expense claims accurately. To helpthe sales team, you will implement an app thatcalculates mileage expenses. To ensure that theapp always uses the latest formula and to remove

the processing burden from client browsers, youdecide to create an autohosted app. The app willprompt users for the required information,calculate the claimable expenses, and then submit

the claim on behalf of the salesperson.

8/12/2019 20488B_08

11/28

Lab Review

In Exercise 2, how did you ensure that all pages in

the remote web could locate the app web inSharePoint to read or write data?

L 2 U i th Cli t Sid Obj t M d l f

8/12/2019 20488B_08

12/28

Lesson 2: Using the Client-Side Object Model forJavaScript

Overview of the CSOM for JavaScript

Using the Client Context Object

Loading Objects and Running Queries

Demonstration: How to Use load and loadQuery

Reading SharePoint Data Changing SharePoint Data

Handling Server-Side Errors

8/12/2019 20488B_08

13/28

Overview of the CSOM for JavaScript

Components of the CSOM

Linking to script libraries

Using the CSOM proxyApp SharePoint

JavaScript CSOM

Service proxy

Custom JavaScript

Client.svc

Contentdatabase

XML

JSON

8/12/2019 20488B_08

14/28

8/12/2019 20488B_08

15/28

8/12/2019 20488B_08

16/28

Demonstration: How to Use load and loadQuery

In this demonstration, you will see how to:

Use the loadmethod from the JavaScript CSOM to loaditems

Loop through results by using an enumerator

Use the loadQuerymethod from the JavaScript CSOM toload items

Loop through results by using the forEachmethod

8/12/2019 20488B_08

17/28

Reading SharePoint Data

Reading all the lists in a site

Getting a list by title

Getting items in a list by using a CAML query

Getting an item by ID

8/12/2019 20488B_08

18/28

Changing SharePoint Data

Creating a new list in a site

Creating a new item in a list Using SP.ListItemCreationInformation

Updating an existing item in a list

Deleting an item from a list

8/12/2019 20488B_08

19/28

Handling Server-Side Errors

By default, a server-side error causes the whole

batch of operations to fail. To avoid this, you can use an exception handlingscope to define server-side try/catch/finally

blocksvar 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();

8/12/2019 20488B_08

20/28

Lesson 3: Using the REST API with JavaScript

Overview of the REST API

SharePoint REST API URLs Reading Data

Creating and Updating Data

8/12/2019 20488B_08

21/28

Overview of the REST API

RESTful services:

Use logical URLs to specify objects

Use HTTP verbs to specify operations

Use OData to exchange data

The SharePoint Client.svc service is a REST API

$.getJSON(

"http://intranet.contoso.com/_api/web",

function (data) {alert('The SharePoint site is called: ' + data.d.Title);

}

)

8/12/2019 20488B_08

22/28

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)

8/12/2019 20488B_08

23/28

Reading Data

Using the

_spPageContextInfo.webServerRelativeUrlproperty

The jQuery getJSON() function

The jQuery ajax() function

8/12/2019 20488B_08

24/28

Creating and Updating Data

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

Always pass a form digest

8/12/2019 20488B_08

25/28

8/12/2019 20488B_08

26/28

8/12/2019 20488B_08

27/28

Lab Review

In the code that retrieves and displays votes, how

did you ensure only votes for the currentsuggestion are retrieved from SharePoint?

In Exercise 2, you passed a form digest with RESTrequest. Why was this form digest unnecessary inthe REST request you formulated in Exercise 3?

d l i d k

8/12/2019 20488B_08

28/28

Module Review and Takeaways

Review Question(s)

Common Issues and Troubleshooting Tips