Technical Class:

1. Peter Serzo
SPTECHCON – San Francisco
March 2013

2.  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

4. What’s is today’s session about?

5. Client side story - Genesis…

6. What is the Client Object Model
Story in SharePoint 2010?
.Net CLR Silverlight JavaScript
Asynchronous
Synchronous Asynchronous

7. DLL's needed : Microsoft.SharePoint.Client.dll,
Microsoft.SharePoint.Client.Runtime.dll. Find these files in
For Managed Client the 14/ISAPI folder. Usually, the location would be at
"C:Program FilesCommon FilesMicrosoft SharedWeb
Server Extensions14ISAPI".
Microsoft.SharePoint.Client.Silverlight.dll and
Microsoft.SharePoint.Client.Silverlight.Runtime.dll. They find
Silverlight
at "C:Program FilesCommon FilesMicrosoft SharedWeb
Server Extensions14TEMPLATELAYOUTSClientBin".
SP.js file - The file fund at "C:Program FilesCommon
ECMAScript FilesMicrosoft SharedWeb Server
Extensions14TEMPLATELAYOUTS".

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

9. Accessing Data with Client OM
SharePoint Data
SharePoint API
Web Service Client.svc
JSON XML
Content
database
Client OM WPF/WinForm/Office
Client Silverlight
Application JavaScript

10. SharePoint Object Model Syntax
SP CONTEXT
SP SITE
SP WEB
SP LIST

11. Use Case #1
Upload files from the network share
into SharePoint

12. Family feud!
5 ways to upload a file into SharePoint…
1
1. Write Client side Code to upload them.
2
2. Write server-side code to upload them
3
3. Upload the files via windows explorer
4
4. Utilize web services
5
5. Buy a 3rd party component

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

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

15. How
1
2

17. Code

18. Web Services vs Client Object Model

19. Use Case #2
Obtain information from a
SharePoint list.

20. JavaScript from here on out

21. JavaScript is Lightweight…
 C:Program FilesCommon FilesMicrosoft
SharedWeb Server
Extensions14TEMPLATELAYOUTS
 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)

22. 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
LAYOUTS1033 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.

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

24. 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));
}

26. Sprinkle some jQuery
document.getElementById('ArticleTitles').innerHTML = lstTitle;
<div id="ArticleT"><h2>Listing of all Articles</h2></div>
<div id="ArticleTitles"></div>

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

28. Use Case #3
I need the List to pull the current user and
put it into the name field.

29. Use Case #3
jQuery with Client Object Model

30. */
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></Get
UserProfileByName></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);
}
} Old way to do this
});

31. jQuery – The Missing Piece
.

32. .

33. Lightweight Javascript

34. Excellent
Documentation
http://docs.jquery.com

35. Plugin Support
http://plugins.jquery.com

37. Use Case #4
Boss says:
I need a brain,
some heart, and
courage!

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

39. Use Case #4
1. Templates
2. jQuery
3. REST

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

41. REST
Think of it as lightweight web services

42. REST
../_vti_bin/listdata.svc/
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>

43. Twitter has REST API
Simple Example
http://search.twitter.com/search.atom?q=serzo&count=5

45. Things to be aware of…

47. Review of things to be aware of…
 RAM
 Browser versions
 Capabilities
 Images
 Rotators
 Your consumers pipe

48. Please be sure to fill out your session
evaluation!

49. Tabs

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

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

52. homepage.js
Client Object Model code