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

3,084 views

Published on

Technical Class:

  • Be the first to comment

  • Be the first to like this

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

  1. 1. Peter SerzoSPTECHCON – San Francisco March 2013
  2. 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
  3. 3. What’s is today’s session about?
  4. 4. Client side story - Genesis…
  5. 5. What is the Client Object ModelStory in SharePoint 2010? .Net CLR Silverlight JavaScript Asynchronous Synchronous Asynchronous
  6. 6. DLLs needed : Microsoft.SharePoint.Client.dll, Microsoft.SharePoint.Client.Runtime.dll. Find these files inFor 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 findSilverlight at "C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TEMPLATELAYOUTSClientBin". SP.js file - The file fund at "C:Program FilesCommonECMAScript FilesMicrosoft SharedWeb Server Extensions14TEMPLATELAYOUTS".
  7. 7. 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
  8. 8. 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
  9. 9. SharePoint Object Model Syntax SP CONTEXT SP SITE SP WEB SP LIST
  10. 10. Use Case #1Upload files from the network share into SharePoint
  11. 11. 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
  12. 12. Solution:Use Managed code, a windowsconsole application, and CSOM.
  13. 13. 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
  14. 14. How 1 2
  15. 15. Code
  16. 16. Web Services vs Client Object Model
  17. 17. Use Case #2Obtain information from aSharePoint list.
  18. 18. JavaScript from here on out
  19. 19. 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)
  20. 20. How do we use JavaScript ClientObject 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.
  21. 21. Additional Info Need to declare the line ExecuteOrDelayUntilScriptLoaded(myfunc, "sp.js"); This insures your code runs after sp.js finishes loading.
  22. 22. Hello World – JavaScriptfunction 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)); }
  23. 23. Sprinkle some jQuerydocument.getElementById(ArticleTitles).innerHTML = lstTitle; <div id="ArticleT"><h2>Listing of all Articles</h2></div> <div id="ArticleTitles"></div>
  24. 24. Add a FormDigest tag: <SharePoint:FormDigest runat=“server”/>
  25. 25. Use Case #3I need the List to pull the current user andput it into the name field.
  26. 26. Use Case #3jQuery with Client Object Model
  27. 27. */function soapCall(fieldTitles, propertyNames, callback){ return $.ajax({ type: "POST", url:"/_vti_bin/userprofileservice.asmx", data: <?xml version="1.0" encoding="utf-8"?><soap:Envelopexmlns: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><GetUserProfileByNamexmlns="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); }} Old way to do this });
  28. 28. jQuery – The Missing Piece .
  29. 29. .
  30. 30. Lightweight Javascript
  31. 31. ExcellentDocumentationhttp://docs.jquery.com
  32. 32. Plugin Supporthttp://plugins.jquery.com
  33. 33. Use Case #4 Boss says: I need a brain, some heart, and courage!
  34. 34. Use Case #4She really means bring back a listof the articles and format them.In addition, if I click on an item,show comments.
  35. 35. Use Case #4 1. Templates 2. jQuery 3. REST
  36. 36. 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 browserhttp://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx
  37. 37. REST Think of it as lightweight web services
  38. 38. REST ../_vti_bin/listdata.svc/ Old Way - SOAP<?xml version="1.0"?> <soap:Envelopexmlns: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>
  39. 39. Twitter has REST APISimple Examplehttp://search.twitter.com/search.atom?q=serzo&count=5
  40. 40. Things to be aware of…
  41. 41. Review of things to be aware of… RAM Browser versions  Capabilities Images Rotators Your consumers pipe
  42. 42. Please be sure to fill out your session evaluation!
  43. 43. Tabs
  44. 44. 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
  45. 45. 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.
  46. 46. homepage.js Client Object Model code

×