Using Client
Object
Model



               Daniel Plocker
               CTO, Advantech
Agenda



         • Client Object Model
           overview
         • ECMA Script Client OM
         • Extending SP with
           HTML 5
         • Going Mobile
         • .Net Managed Client
Why
Client
OM?

         Client side integration between
          SharePoint and existing Office or LOB
          apps simplifies day-to-day activities.
         Richer, smoother and more intuitive
          user experience.
         Better multi-platform support.
The
Basics


          Client-side library for remotely calling
           SharePoint
           Mirrors (a subset) of objects on the server
           Usable in JavaScript, .net CLR, Silverlight CLR
          Requests are batched for over- the-wire
           performance
          Used by SharePoint UI for operations like
           batch deletion
Equivalent
Objects
3 things
to know


           1. ClientContext is the central object
                  clientContext = new
                  ClientContext(“http://mysite”);
           2. Before you read a property, you have to ask for it
                  clientContext.Load(list);
           3. All requests must be committed in a batch
                  clientContext.ExecuteQuery();
Accessing
Data with
Client OM




            client
            server
Client Object
Model
Limitations


                 Client object model cannot be used on server
                  to talk to same-server
                 You still need to handle synch/update
                  semantics (change log could help)
                 No elevation of privilege capabilities
                 Requests are throttled
                 .net CLR has sync method;
                  Silverlight CLR and Jscript are async
JavaScript
Client
object
model
JavaScript
Client
OM

              JavaScript Client OM is easily added to a
               SharePoint ASPX page - reference:
               _layouts/sp.js
               Add this using <SharePoint:ScriptLink>
              All libraries crunched for performance
               Use un-crunched *.debug.js files with debug
                mode
              Method signatures can be different
               compared to .NET and Silverlight
              Different data value types
JavaScript
Client
OM

              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)
JavaScript
in
SharePoint
2010
JavaScript
Client
OM
Fluent UI
Status Bar
and
Notification
Area
DEMO
Items not
covered by
CSOM

              User Profiles
              People
              Search
              Enterprise Metadata
              Excel REST web services
              Publishing
              Administration
HTML 5


          <HTML>
          <CANVAS>
          <VIDEO>
          <INPUT>
          <AUDIO>
          <COMMAND>
          <DATALIST>
          <TIME>
HTML 5 –
Getting it
Working

              <HTML> tag
              Internet Explorer 9 compatibility
              <meta http-equiv="X-UA-Compatible"
               content="IE=9"/>
              Potential issues and workarounds
DEMO
Going
Mobile
with
JQuery
          jQuery is a cross-browser JavaScript
         library designed to simplify the client-
         side scripting of HTML
          $("div.test").add("p.quote").addClass("bl
         ue").slideDown("slow");
          $.each([1,2,3], function(){ … }
          jQuery Mobile is a touch-optimized
         web framework
Going
Mobile
with
SharePoint
              Built-in mobile view with &mobile=1
              You can customize the mobile view and
             master page.
              To take advantage of JQuery Mobile:
                 Create a simple master page, HTML5
                  valid
                 Add script links
                 To use with client OM, don’t forget
                  ExecuteOrDelayUntilScriptLoaded
DEMO
NET Client
object
model
.Net CLR
Client
OM

            Provides easy access from remote
             .NET clients to manipulate
             SharePoint data
            Can be utilized from managed code
             - also from office clients etc.
            Assemblies
             Microsoft.SharePoint.Client.dll (281kb)
             Microsoft.SharePoint.Client.Runtime.dll
              (145kb)
.Net CLR
Client
OM
DEMO
Questions?
Summery




           Client OM
            3 Flavors
            Batch processing
           .Net Managed Client
            Integration with LoB
           ECMAScript Client OM
            Simplify UI
            Basis for client-side programming
           HTML5 and Mobile
            Enable HTML5
            Use JQuery
Thank
You!

Client Object Model - SharePoint Extreme 2012

  • 1.
    Using Client Object Model Daniel Plocker CTO, Advantech
  • 2.
    Agenda • Client Object Model overview • ECMA Script Client OM • Extending SP with HTML 5 • Going Mobile • .Net Managed Client
  • 3.
    Why Client OM? Client side integration between SharePoint and existing Office or LOB apps simplifies day-to-day activities. Richer, smoother and more intuitive user experience. Better multi-platform support.
  • 4.
    The Basics  Client-side library for remotely calling SharePoint  Mirrors (a subset) of objects on the server  Usable in JavaScript, .net CLR, Silverlight CLR  Requests are batched for over- the-wire performance  Used by SharePoint UI for operations like batch deletion
  • 5.
  • 6.
    3 things to know 1. ClientContext is the central object clientContext = new ClientContext(“http://mysite”); 2. Before you read a property, you have to ask for it clientContext.Load(list); 3. All requests must be committed in a batch clientContext.ExecuteQuery();
  • 7.
  • 8.
    Client Object Model Limitations  Client object model cannot be used on server to talk to same-server  You still need to handle synch/update semantics (change log could help)  No elevation of privilege capabilities  Requests are throttled  .net CLR has sync method; Silverlight CLR and Jscript are async
  • 9.
  • 10.
    JavaScript Client OM  JavaScript Client OM is easily added to a SharePoint ASPX page - reference:  _layouts/sp.js  Add this using <SharePoint:ScriptLink>  All libraries crunched for performance  Use un-crunched *.debug.js files with debug mode  Method signatures can be different compared to .NET and Silverlight  Different data value types
  • 11.
    JavaScript Client OM  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)
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
    Items not covered by CSOM  User Profiles  People  Search  Enterprise Metadata  Excel REST web services  Publishing  Administration
  • 17.
    HTML 5  <HTML>  <CANVAS>  <VIDEO>  <INPUT>  <AUDIO>  <COMMAND>  <DATALIST>  <TIME>
  • 18.
    HTML 5 – Gettingit Working  <HTML> tag  Internet Explorer 9 compatibility  <meta http-equiv="X-UA-Compatible" content="IE=9"/>  Potential issues and workarounds
  • 19.
  • 20.
    Going Mobile with JQuery  jQuery is a cross-browser JavaScript library designed to simplify the client- side scripting of HTML  $("div.test").add("p.quote").addClass("bl ue").slideDown("slow");  $.each([1,2,3], function(){ … }  jQuery Mobile is a touch-optimized web framework
  • 21.
    Going Mobile with SharePoint  Built-in mobile view with &mobile=1  You can customize the mobile view and master page.  To take advantage of JQuery Mobile:  Create a simple master page, HTML5 valid  Add script links  To use with client OM, don’t forget ExecuteOrDelayUntilScriptLoaded
  • 22.
  • 23.
  • 24.
    .Net CLR Client OM  Provides easy access from remote .NET clients to manipulate SharePoint data  Can be utilized from managed code - also from office clients etc.  Assemblies  Microsoft.SharePoint.Client.dll (281kb)  Microsoft.SharePoint.Client.Runtime.dll (145kb)
  • 25.
  • 26.
  • 27.
  • 28.
    Summery  Client OM  3 Flavors  Batch processing  .Net Managed Client  Integration with LoB  ECMAScript Client OM  Simplify UI  Basis for client-side programming  HTML5 and Mobile  Enable HTML5  Use JQuery
  • 29.

Editor's Notes

  • #9 צל דקה 15
  • #11 &lt;script type=&quot;text/ecmascript&quot; src=&quot;/_layouts/SP.Core.js&quot; /&gt; &lt;script type=&quot;text/ecmascript&quot; src=&quot;/_layouts/SP.Debug.js&quot; /&gt; &lt;script type=&quot;text/ecmascript&quot; src=&quot;/_layouts/SP.Runtime.Debug.js&quot; /&gt;
  • #13 ScriptLink = master page, every page. Not available in sandbox…script. Src = load every timeDynamic load= בודק האם הסקריפט כבר טעון, טוב בווב-פארטBody.onload?
  • #15 צל דקה 40
  • #16 סיום – דקה 30פתיחת דף קיים עם dataview, שמציג ULהוספת קישור לקובץ JS החיצוניהוספת AHREF עם שם הפונקציה והפנייה ללינקהוספת href&lt;a href=&quot;javascript:add2f(&apos;{@RestaurantName}&apos;, this)&quot; style=&quot;margin-top:10px;&quot;&gt;3. הוספת הלינקים: &lt;script type=&quot;text/javascript&quot; src=&quot;../../SiteAssets/Before/Extreme.js&quot; /&gt; &lt;script type=&quot;text/ecmascript&quot; src=&quot;/_layouts/SP.Core.js&quot; /&gt; &lt;script type=&quot;text/ecmascript&quot; src=&quot;/_layouts/SP.Debug.js&quot; /&gt; &lt;script type=&quot;text/ecmascript&quot; src=&quot;/_layouts/SP.Runtime.Debug.js&quot; /&gt; 4. תוכן/// &lt;reference name=&quot;MicrosoftAjax.js&quot; /&gt;/// &lt;reference path=&quot;C:\\Program Files\\Common Files\\Microsoft Shared\\Web Server Extensions\\14\\TEMPLATE\\LAYOUTS\\SP.debug.js&quot; /&gt;var context = null;varclientContext = null; var web = null; varcurrentUser = null; var Restaurants = null;varoList = null;varrestNameToAdd = &quot;&quot;;varuserName = null;function add2f(restName, sourceName) { // Get the user namerestNameToAdd = restName; // 1. get current user context = SP.ClientContext.get_current(); web = context.get_web();currentUser = web.get_currentUser();currentUser.retrieve(); context.load(web);context.executeQueryAsync(Function.createDelegate(this, this.onSuccessUserMethod),Function.createDelegate(this, this.onFailureUserMethod)); }function onSuccessUserMethod(sender, args) { // get my sitevaruserObject = web.get_currentUser();userName = userObject.get_loginName().toString().replace(&quot;CONTOSO\\\\&quot;, &quot;&quot;);clientContext = new SP.ClientContext(&apos;/my/personal/&apos; + userName);varoWebsite = clientContext.get_web();varcollList = oWebsite.get_lists();this.oList = collList.getByTitle(&apos;Restaurants&apos;);clientContext.load(oList);varlistItemInfo = new SP.ListItemCreationInformation(); // add the item to the listvarlistItem = oList.addItem(listItemInfo); // Assign Values for fieldslistItem.set_item(&apos;Title&apos;, restNameToAdd);listItem.update();clientContext.executeQueryAsync(Function.createDelegate(this, this.onAddSucceeded), Function.createDelegate(this, this.onAddFailed)); /*clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));*/}function onFailureUserMethod(sender, args) { alert(&apos;onFailureUserMethod failed &apos; + args.get_message() + &apos;\\n&apos; + args.get_stackTrace()); }function onAddSucceeded() {var res = SP.UI.Notify.addNotification(&quot;Added resturant &quot; + restNameToAdd + &quot; to your favourites list&quot;, true); }function onAddFailed(sender, args) { alert(&quot;add failed. Message:&quot; + args.get_message());}
  • #18 New elements: article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr New types of form controls: dates and times, email, url, search, number, range, tel, color[53] New attributes: charset (on meta), async (on script) Global attributes (that can be applied for every element): id, tabindex, hidden, data-* (custom data attributes) Deprecated elements will be dropped altogether: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt
  • #19 New elements: article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr New types of form controls: dates and times, email, url, search, number, range, tel, color[53] New attributes: charset (on meta), async (on script) Global attributes (that can be applied for every element): id, tabindex, hidden, data-* (custom data attributes) Deprecated elements will be dropped altogether: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt
  • #20 צ&quot;ל דקה 55יצירת masterpage חדש והוספת התגיתבדף, שינוי ה- master page:MasterPageFile=&quot;../../_catalogs/masterpage/v4html5.master&quot; 3. הוספת canvas
  • #21 התחלה – דקה 70
  • #22 התחלה – דקה 70
  • #23 התחלה- דקה 75הכי חשוב ExecuteOrDelayUntilScriptLoaded(loadSharePointPictures, &apos;sp.js&apos;); יצירת דף מתוך המאסטר שתומך ב- HTML5.הוספת קישורים ל- JQM:תמונות נמצאות בספריית התמונות (images).מבנה הדף: page, list, conte
  • #24 פתיחתsolution קיים עם אאוטלוקיצירת השליפה של הפריטים:חיבוריצירת siteאיתור כל הרשימותשליפת הרשימה יצירת אחרי הפיתוח של השליפה, להריץ ולהראות שהנתונים נשלפויצירת booking – איך שולפים משתמש
  • #25 דקה 18
  • #27 התחלה- דקה 75הכי חשוב ExecuteOrDelayUntilScriptLoaded(loadSharePointPictures, &apos;sp.js&apos;); יצירת דף מתוך המאסטר שתומך ב- HTML5.הוספת קישורים ל- JQM:תמונות נמצאות בספריית התמונות (images).מבנה הדף: page, list, conte