The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo -...
description
Transcript of The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo -...
![Page 1: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/1.jpg)
Peter Serzo
SPTECHCON – San Francisco
March 2013
![Page 2: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/2.jpg)
Peter Serzo, MCP, MCSD .Net, MCTS
High Monkey Consulting
Blog: monkeyblog.highmonkey.com
www.highmonkey.com
Twitter: pserzo
Author
Love to read and Love a Good Story
![Page 3: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/3.jpg)
![Page 4: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/4.jpg)
What’s is today’s session about?
![Page 5: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/5.jpg)
Client side story - Genesis…
![Page 6: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/6.jpg)
What is the Client Object Model Story in SharePoint 2010?
.Net CLR Silverlight JavaScript
Synchronous Asynchronous
Asynchronous
![Page 7: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/7.jpg)
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".
![Page 8: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/8.jpg)
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
![Page 9: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/9.jpg)
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
![Page 10: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/10.jpg)
SharePoint Object Model Syntax
CONTEXT
SITE
WEB
LIST
SP
SP
SP
SP
![Page 11: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/11.jpg)
Use Case #1
Upload files from the network share into SharePoint
![Page 12: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/12.jpg)
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
![Page 13: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/13.jpg)
Solution: Use Managed code, a windows console application, and CSOM.
![Page 14: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/14.jpg)
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
![Page 15: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/15.jpg)
How
1
2
![Page 16: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/16.jpg)
![Page 17: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/17.jpg)
Code
![Page 18: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/18.jpg)
Web Services vs Client Object Model
![Page 19: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/19.jpg)
Use Case #2
Obtain information from a SharePoint list.
![Page 20: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/20.jpg)
JavaScript from here on out
![Page 21: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/21.jpg)
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)
![Page 22: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/22.jpg)
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.
![Page 23: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/23.jpg)
Additional Info
Need to declare the line ExecuteOrDelayUntilScriptLoaded(myfunc, "sp.js"); This insures your code runs after sp.js finishes loading.
![Page 24: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/24.jpg)
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)); }
![Page 25: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/25.jpg)
![Page 26: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/26.jpg)
Sprinkle some jQuery
document.getElementById('ArticleTitles').innerHTML = lstTitle;
<div id="ArticleT"><h2>Listing of all Articles</h2></div> <div id="ArticleTitles"></div>
![Page 27: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/27.jpg)
Add a FormDigest tag: <SharePoint:FormDigest runat=“server”/>
![Page 28: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/28.jpg)
Use Case #3
I need the List to pull the current user and put it into the name field.
![Page 29: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/29.jpg)
Use Case #3
jQuery with Client Object Model
![Page 30: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/30.jpg)
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); } }); }
![Page 31: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/31.jpg)
jQuery – The Missing Piece
.
![Page 32: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/32.jpg)
.
![Page 33: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/33.jpg)
Lightweight Javascript
![Page 34: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/34.jpg)
Excellent Documentation
http://docs.jquery.com
![Page 35: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/35.jpg)
Plugin Support
http://plugins.jquery.com
![Page 36: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/36.jpg)
![Page 37: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/37.jpg)
Use Case #4
Boss says: I need a brain, some heart, and courage!
![Page 38: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/38.jpg)
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.
![Page 39: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/39.jpg)
Use Case #4
1. Templates 2. jQuery 3. REST
![Page 40: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/40.jpg)
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
![Page 41: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/41.jpg)
REST
Think of it as lightweight web services
![Page 42: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/42.jpg)
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/
![Page 43: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/43.jpg)
Twitter has REST API Simple Example
http://search.twitter.com/search.atom?q=serzo&count=5
![Page 44: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/44.jpg)
![Page 45: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/45.jpg)
Things to be aware of…
![Page 46: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/46.jpg)
![Page 47: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/47.jpg)
Review of things to be aware of… RAM
Browser versions
Capabilities
Images
Rotators
Your consumers pipe
![Page 48: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/48.jpg)
Please be sure to fill out your session evaluation!
![Page 49: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/49.jpg)
Tabs
![Page 50: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/50.jpg)
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
![Page 51: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/51.jpg)
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.
![Page 52: The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon](https://reader033.fdocuments.net/reader033/viewer/2022042813/5493b18bac7959342e8b491f/html5/thumbnails/52.jpg)
homepage.js
Client Object Model code