The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo -...

Peter Serzo

SPTECHCON – San Francisco

March 2013

Peter Serzo, MCP, MCSD .Net, MCTS

High Monkey Consulting

Blog: monkeyblog.highmonkey.com

www.highmonkey.com

PSerzo@highmonkey.com

Twitter: pserzo

Author

Love to read and Love a Good Story

What’s is today’s session about?

Client side story - Genesis…

What is the Client Object Model Story in SharePoint 2010?

.Net CLR Silverlight JavaScript

Synchronous Asynchronous

Asynchronous

For Managed Client

DLL's needed : Microsoft.SharePoint.Client.dll,

Microsoft.SharePoint.Client.Runtime.dll. Find these files in

the 14/ISAPI folder. Usually, the location would be at

"C:\Program Files\Common Files\Microsoft Shared\Web

Server Extensions\14\ISAPI".

Silverlight

Microsoft.SharePoint.Client.Silverlight.dll and

Microsoft.SharePoint.Client.Silverlight.Runtime.dll. They find

at "C:\Program Files\Common Files\Microsoft Shared\Web

Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin".

ECMAScript

SP.js file - The file fund at "C:\Program Files\Common

Files\Microsoft Shared\Web Server

Extensions\14\TEMPLATE\LAYOUTS".

Why do we need a Client Object Model?

1. Can’t write Server side code

2. Web services are “limited” and a painful experience

3. Wrapping objects in SOAP

Content

database

Accessing Data with Client OM

SharePoint Data

SharePoint API

Web Service Client.svc

Client

Application

Client OM

JSON XML

WPF/WinForm/Office

Silverlight

JavaScript

SharePoint Object Model Syntax

CONTEXT

SITE

WEB

LIST

SP

SP

SP

SP

Use Case #1

Upload files from the network share into SharePoint

Family feud! 5 ways to upload a file into SharePoint…

1. Write Client side Code to upload them.

2. Write server-side code to upload them

3. Upload the files via windows explorer

4. Utilize web services

5. Buy a 3rd party component

1 2 3 4 5

Solution: Use Managed code, a windows console application, and CSOM.

What

Documents are everywhere and in different formats: PDF, txt, doc, docx…

We want to tag metadata

We want to put files into folders in document libraries

How

1

2

Code

Web Services vs Client Object Model

Use Case #2

Obtain information from a SharePoint list.

JavaScript from here on out

JavaScript is Lightweight…

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS

SP.js (SP.debug.js)

380KB (559KB)

SP.Core.js (SP.Core.debug.js)

13KB (20KB)

SP.Runtime.js (SP.Runtime.debug.js)

68KB (108KB)

How do we use JavaScript Client Object Model in our site?

1. Add a reference to a SharePoint ASPX page for the JS client object model:

<SharePoint:ScriptLink Name=”sp.js” runat=”server” OnDemand=”true” Localizable=“false”>

If the script link is localizable (default = true), then SP will look for it under the LAYOUTS\1033 folder (the ’1033′ is determined by the language of your OS). If it is not localizable(false), then SP will look for it under the LAYOUTS folder, which is where it is installed by default.

Additional Info

Need to declare the line ExecuteOrDelayUntilScriptLoaded(myfunc, "sp.js"); This insures your code runs after sp.js finishes loading.

Hello World – JavaScript function getArticleData() { clientContext = new SP.ClientContext.get_current(); web = clientContext.get_web(); var list = web.get_lists().getByTitle("Pages"); var camlQuery = new SP.CamlQuery(); var q = '<View><RowLimit>5</RowLimit></View>'; camlQuery.set_viewXml(q); this.listItems = list.getItems(camlQuery); clientContext.load(listItems, 'Include(DisplayName,Id)'); clientContext.executeQueryAsync(Function.createDelegate(this, this.onListItemsLoadSuccess), Function.createDelegate(this, this.onQueryFailed)); }

Sprinkle some jQuery

document.getElementById('ArticleTitles').innerHTML = lstTitle;

<div id="ArticleT"><h2>Listing of all Articles</h2></div> <div id="ArticleTitles"></div>

Add a FormDigest tag: <SharePoint:FormDigest runat=“server”/>

Use Case #3

I need the List to pull the current user and put it into the name field.

Use Case #3

jQuery with Client Object Model

Old way to do this

*/ function soapCall(fieldTitles, propertyNames, callback){ return $.ajax({ type: "POST", url:"/_vti_bin/userprofileservice.asmx", data: '<?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"><soap:Body><GetUserProfileByName xmlns="http://microsoft.com/webservices/SharePointPortalServer/UserProfileService"><AccountName></AccountName></GetUserProfileByName></soap:Body></soap:Envelope>', contentType: "text/xml; charset=utf-8", dataType: "xml", cache: false, success: function(xml){ var propertyNodes = $("PropertyData", xml); if (!propertyNodes || propertyNodes.length == 0) return; for (var i=0, field; field = fieldTitles[i];i++){ field = $('input[title*="'+field+'"]'); /* skip this field if it does not exist or it already has a value */ if (!field || field.length == 0 || field.val().length>0) continue; /* Iterate each PropertyData node for the Name of the property we want. Once found, the value of the property is in /Values/ValueData/Value */ for (var j=0, property;property=propertyNodes[j];j++){ if ($('Name', property).text() == propertyNames[i]) { field.val($('Values>ValueData>Value', property).text()); } } } /* run callback */ if (callback) callback(xml); } }); }

jQuery – The Missing Piece

.

.

Lightweight Javascript

Excellent Documentation

http://docs.jquery.com

Plugin Support

http://plugins.jquery.com

Use Case #4

Boss says: I need a brain, some heart, and courage!

Use Case #4

She really means bring back a list of the articles and format them. In addition, if I click on an item, show comments.

Use Case #4

1. Templates 2. jQuery 3. REST

jQuery Template This is Microsoft contributing to the jQuery plug ins!

Jquery.tmpl.js

It is a way to display and manipulate data in the browser

http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx

REST

Think of it as lightweight web services

REST

Old Way - SOAP

<?xml version="1.0"?> <soap:Envelope

xmlns:soap="http://www.w3.org/2001/12/soap-envelope"

soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">

<soap:body pb="http://www.acme.com/phonebook">

<pb:GetUserDetails> <pb:UserID>12345</pb:UserID>

</pb:GetUserDetails> </soap:Body> </soap:Envelope>

../_vti_bin/listdata.svc/

Twitter has REST API Simple Example

http://search.twitter.com/search.atom?q=serzo&count=5

Things to be aware of…

Review of things to be aware of… RAM

Browser versions

Capabilities

Images

Rotators

Your consumers pipe

Please be sure to fill out your session evaluation!

Tabs

Components CQWP – Featured Topic

CEWP – HTML link for rest of tabs

Page Layouts/tikn_homelayout.aspx

/sitespages/homepagetabs.htm

/Pages/Home.aspx

/javascript/jquery/homepage.js

/javascript/jquery/jquery-1.7.2.min.js

How the home page works

There are three zones, Zone 1 and Zone 2 are the left column, Zone 3 is the right column.

Zone 1 shows on page load as does Zone 3, Zone 2 is hidden.. When What is TIKN through How to use this site is chosen, Zone 2 is shown and Zone 1 is hidden.

The zones are shown and hidden via jQuery and div tags.

The CQWP is put into Zone 1. The CEWP is put into Zone 2 and contains a reference to the hompagetabs.html file.

The homepagetabs.html file contains the html to render the control. CSS renders how it functions.

Finally, homepage.js (called from within HomePageTabs.htm) contains the jQuery/Client Object model code to add functionality.

homepage.js

Client Object Model code