Download as PDF, PPTX
![*/
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
});](https://image.slidesharecdn.com/serzoclientobjectmodel-130221084953-phpapp02/75/The-Magic-Revealed-Four-Real-World-Examples-of-Using-the-Client-Object-Model-by-Peter-Serzo-SPTechCon-30-2048.jpg)
Uploaded bySPTechCon
The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon
The document summarizes Peter Serzo's presentation on the client-side story and object model in SharePoint 2010. It discusses how the client object model allows accessing SharePoint data through managed code, Silverlight, JavaScript and web services. It provides examples of using the client object model to upload files, retrieve list data, and get user profile properties. It also covers using jQuery templates and REST to display and format list data on a page.
More Related Content
Similar to The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon
The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon
- 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’ssession about?
- 5. Client side story- Genesis…
- 6. What is theClient 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 weneed 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 withClient 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 ModelSyntax SP CONTEXT SP SITE SP WEB SP LIST
- 11. Use Case #1 Uploadfiles from the network share into SharePoint
- 12. Family feud! 5 waysto 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 areeverywhere 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.
- 18. Web Services vsClient Object Model
- 19. Use Case #2 Obtaininformation from a SharePoint list.
- 20. JavaScript from hereon 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 weuse 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 Needto 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 FormDigesttag: <SharePoint:FormDigest runat=“server”/>
- 28. Use Case #3 Ineed the List to pull the current user and put it into the name field.
- 29. Use Case #3 jQuerywith 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 – TheMissing Piece .
- 32.
- 33.
- 34.
- 35.
- 37. Use Case #4 Boss says: I need a brain, some heart, and courage!
- 38. Use Case #4 Shereally 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 RESTAPI Simple Example http://search.twitter.com/search.atom?q=serzo&count=5
- 45. Things to beaware of…
- 47. Review of thingsto be aware of… RAM Browser versions Capabilities Images Rotators Your consumers pipe
- 48. Please be sureto fill out your session evaluation!
- 49.
- 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 homepage 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