Using ClientObjectModel               Daniel Plocker               CTO, Advantech
Agenda         • Client Object Model           overview         • ECMA Script Client OM         • Extending SP with       ...
WhyClientOM?         Client side integration between          SharePoint and existing Office or LOB          apps simplif...
TheBasics          Client-side library for remotely calling           SharePoint           Mirrors (a subset) of objects...
EquivalentObjects
3 thingsto know           1. ClientContext is the central object                  clientContext = new                  Cli...
AccessingData withClient OM            client            server
Client ObjectModelLimitations                 Client object model cannot be used on server                  to talk to sa...
JavaScriptClientobjectmodel
JavaScriptClientOM              JavaScript Client OM is easily added to a               SharePoint ASPX page - reference:...
JavaScriptClientOM              C:Program FilesCommon FilesMicrosoft               SharedWeb Server               Extensi...
JavaScriptinSharePoint2010
JavaScriptClientOM
Fluent UIStatus BarandNotificationArea
DEMO
Items notcovered byCSOM              User Profiles              People              Search              Enterprise Met...
HTML 5          <HTML>          <CANVAS>          <VIDEO>          <INPUT>          <AUDIO>          <COMMAND>      ...
HTML 5 –Getting itWorking              <HTML> tag              Internet Explorer 9 compatibility              <meta htt...
DEMO
GoingMobilewithJQuery          jQuery is a cross-browser JavaScript         library designed to simplify the client-     ...
GoingMobilewithSharePoint              Built-in mobile view with &mobile=1              You can customize the mobile vie...
DEMO
NET Clientobjectmodel
.Net CLRClientOM            Provides easy access from remote             .NET clients to manipulate             SharePoin...
.Net CLRClientOM
DEMO
Questions?
Summery           Client OM            3 Flavors            Batch processing           .Net Managed Client           ...
ThankYou!
Upcoming SlideShare
Loading in...5
×

Client Object Model - SharePoint Extreme 2012

918

Published on

T

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
918
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • צל דקה 15
  • &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;
  • ScriptLink = master page, every page. Not available in sandbox…script. Src = load every timeDynamic load= בודק האם הסקריפט כבר טעון, טוב בווב-פארטBody.onload?
  • צל דקה 40
  • סיום – דקה 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());}
  • 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
  • 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
  • צ&quot;ל דקה 55יצירת masterpage חדש והוספת התגיתבדף, שינוי ה- master page:MasterPageFile=&quot;../../_catalogs/masterpage/v4html5.master&quot; 3. הוספת canvas
  • התחלה – דקה 70
  • התחלה – דקה 70
  • התחלה- דקה 75הכי חשוב ExecuteOrDelayUntilScriptLoaded(loadSharePointPictures, &apos;sp.js&apos;); יצירת דף מתוך המאסטר שתומך ב- HTML5.הוספת קישורים ל- JQM:תמונות נמצאות בספריית התמונות (images).מבנה הדף: page, list, conte
  • פתיחתsolution קיים עם אאוטלוקיצירת השליפה של הפריטים:חיבוריצירת siteאיתור כל הרשימותשליפת הרשימה יצירת אחרי הפיתוח של השליפה, להריץ ולהראות שהנתונים נשלפויצירת booking – איך שולפים משתמש
  • דקה 18
  • התחלה- דקה 75הכי חשוב ExecuteOrDelayUntilScriptLoaded(loadSharePointPictures, &apos;sp.js&apos;); יצירת דף מתוך המאסטר שתומך ב- HTML5.הוספת קישורים ל- JQM:תמונות נמצאות בספריית התמונות (images).מבנה הדף: page, list, conte
  • Client Object Model - SharePoint Extreme 2012

    1. 1. Using ClientObjectModel Daniel Plocker CTO, Advantech
    2. 2. Agenda • Client Object Model overview • ECMA Script Client OM • Extending SP with HTML 5 • Going Mobile • .Net Managed Client
    3. 3. WhyClientOM? 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. 4. TheBasics  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. 5. EquivalentObjects
    6. 6. 3 thingsto 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. 7. AccessingData withClient OM client server
    8. 8. Client ObjectModelLimitations  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. 9. JavaScriptClientobjectmodel
    10. 10. JavaScriptClientOM  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. 11. JavaScriptClientOM  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. 12. JavaScriptinSharePoint2010
    13. 13. JavaScriptClientOM
    14. 14. Fluent UIStatus BarandNotificationArea
    15. 15. DEMO
    16. 16. Items notcovered byCSOM  User Profiles  People  Search  Enterprise Metadata  Excel REST web services  Publishing  Administration
    17. 17. HTML 5  <HTML>  <CANVAS>  <VIDEO>  <INPUT>  <AUDIO>  <COMMAND>  <DATALIST>  <TIME>
    18. 18. HTML 5 –Getting itWorking  <HTML> tag  Internet Explorer 9 compatibility  <meta http-equiv="X-UA-Compatible" content="IE=9"/>  Potential issues and workarounds
    19. 19. DEMO
    20. 20. GoingMobilewithJQuery  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. 21. GoingMobilewithSharePoint  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. 22. DEMO
    23. 23. NET Clientobjectmodel
    24. 24. .Net CLRClientOM  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. 25. .Net CLRClientOM
    26. 26. DEMO
    27. 27. Questions?
    28. 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. 29. ThankYou!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×