SlideShare a Scribd company logo
Peter Serzo
SPTECHCON – San Francisco
              March 2013
 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
What’s is today’s session about?
Client side story - Genesis…
What is the Client Object Model
Story in SharePoint 2010?
        .Net CLR    Silverlight   JavaScript



                   Asynchronous

   Synchronous                        Asynchronous
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".
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
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
SharePoint Object Model Syntax
                     SP CONTEXT
                     SP SITE

                     SP WEB
                     SP LIST
Use Case #1

Upload files from the network share
          into SharePoint
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
Solution:

Use Managed code, a windows
console application, and CSOM.
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
How
 1




      2
Code
Web Services vs Client Object Model
Use Case #2


Obtain information from a
SharePoint list.
JavaScript from here on out
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)
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.
Additional Info
 Need to declare the line

 ExecuteOrDelayUntilScriptLoaded(myfunc, "sp.js");

 This insures your code runs after sp.js finishes loading.
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));
                  }
Sprinkle some jQuery

document.getElementById('ArticleTitles').innerHTML = lstTitle;




                     <div id="ArticleT"><h2>Listing of all Articles</h2></div>
                     <div id="ArticleTitles"></div>
Add a FormDigest tag:
 <SharePoint:FormDigest
 runat=“server”/>
Use Case #3
I need the List to pull the current user and
put it into the name field.
Use Case #3


jQuery with Client Object Model
*/
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
               });
jQuery – The Missing Piece



     .
.
Lightweight Javascript
Excellent
Documentation




http://docs.jquery.com
Plugin Support




http://plugins.jquery.com
Use Case #4
     Boss says:

     I need a brain,
     some heart, and
     courage!
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.
Use Case #4
     1. Templates
     2. jQuery
     3. REST
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
REST


   Think of it as lightweight web services
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>
Twitter has REST API
Simple Example

http://search.twitter.com/search.atom?q=serzo&count=5
Things to be aware of…
Review of things to be aware of…
 RAM
 Browser versions
    Capabilities
 Images
 Rotators
 Your consumers pipe
Please be sure to fill out your session
                            evaluation!
Tabs
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
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.
homepage.js




              Client Object Model code

More Related Content

What's hot

SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePointSPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePoint
Mark Rackley
 
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have knownSPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have known
Mark Rackley
 
Office 2013 loves web developers slide
Office 2013 loves web developers   slideOffice 2013 loves web developers   slide
Office 2013 loves web developers slide
Fabio Franzini
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
Mark Rackley
 
Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint WorkshopIntroduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop
Mark Rackley
 
Getting Started with SharePoint Development
Getting Started with SharePoint DevelopmentGetting Started with SharePoint Development
Getting Started with SharePoint Development
Chakkaradeep Chandran
 
SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsSPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentials
Mark Rackley
 
Chris O'Brien - Comparing SharePoint add-ins (apps) with Office 365 apps
Chris O'Brien - Comparing SharePoint add-ins (apps) with Office 365 appsChris O'Brien - Comparing SharePoint add-ins (apps) with Office 365 apps
Chris O'Brien - Comparing SharePoint add-ins (apps) with Office 365 apps
Chris O'Brien
 
Ruby on Rails: Building Web Applications Is Fun Again!
Ruby on Rails: Building Web Applications Is Fun Again!Ruby on Rails: Building Web Applications Is Fun Again!
Ruby on Rails: Building Web Applications Is Fun Again!
judofyr
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointBringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePoint
Chad Schroeder
 
Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference
Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - referenceChris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference
Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference
Chris O'Brien
 
SharePoint Development 101
SharePoint Development 101SharePoint Development 101
SharePoint Development 101
Greg Hurlman
 
Chris OBrien - Weaving Enterprise Solutions into Office Products
Chris OBrien - Weaving Enterprise Solutions into Office ProductsChris OBrien - Weaving Enterprise Solutions into Office Products
Chris OBrien - Weaving Enterprise Solutions into Office Products
Chris O'Brien
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
Ivano Malavolta
 
Intro Open Social and Dashboards
Intro Open Social and DashboardsIntro Open Social and Dashboards
Intro Open Social and Dashboards
Atlassian
 
SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013 SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013
Mark Rackley
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuide
Mark Rackley
 
Chris O'Brien - Modern SharePoint development: techniques for moving code off...
Chris O'Brien - Modern SharePoint development: techniques for moving code off...Chris O'Brien - Modern SharePoint development: techniques for moving code off...
Chris O'Brien - Modern SharePoint development: techniques for moving code off...
Chris O'Brien
 
Industrial training seminar ppt on asp.net
Industrial training seminar ppt on asp.netIndustrial training seminar ppt on asp.net
Industrial training seminar ppt on asp.net
Pankaj Kushwaha
 
Chris O'Brien - Introduction to the SharePoint Framework for developers
Chris O'Brien - Introduction to the SharePoint Framework for developersChris O'Brien - Introduction to the SharePoint Framework for developers
Chris O'Brien - Introduction to the SharePoint Framework for developers
Chris O'Brien
 

What's hot (20)

SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePointSPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePoint
 
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have knownSPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have known
 
Office 2013 loves web developers slide
Office 2013 loves web developers   slideOffice 2013 loves web developers   slide
Office 2013 loves web developers slide
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
 
Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint WorkshopIntroduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop
 
Getting Started with SharePoint Development
Getting Started with SharePoint DevelopmentGetting Started with SharePoint Development
Getting Started with SharePoint Development
 
SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsSPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentials
 
Chris O'Brien - Comparing SharePoint add-ins (apps) with Office 365 apps
Chris O'Brien - Comparing SharePoint add-ins (apps) with Office 365 appsChris O'Brien - Comparing SharePoint add-ins (apps) with Office 365 apps
Chris O'Brien - Comparing SharePoint add-ins (apps) with Office 365 apps
 
Ruby on Rails: Building Web Applications Is Fun Again!
Ruby on Rails: Building Web Applications Is Fun Again!Ruby on Rails: Building Web Applications Is Fun Again!
Ruby on Rails: Building Web Applications Is Fun Again!
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointBringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePoint
 
Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference
Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - referenceChris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference
Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference
 
SharePoint Development 101
SharePoint Development 101SharePoint Development 101
SharePoint Development 101
 
Chris OBrien - Weaving Enterprise Solutions into Office Products
Chris OBrien - Weaving Enterprise Solutions into Office ProductsChris OBrien - Weaving Enterprise Solutions into Office Products
Chris OBrien - Weaving Enterprise Solutions into Office Products
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
 
Intro Open Social and Dashboards
Intro Open Social and DashboardsIntro Open Social and Dashboards
Intro Open Social and Dashboards
 
SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013 SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuide
 
Chris O'Brien - Modern SharePoint development: techniques for moving code off...
Chris O'Brien - Modern SharePoint development: techniques for moving code off...Chris O'Brien - Modern SharePoint development: techniques for moving code off...
Chris O'Brien - Modern SharePoint development: techniques for moving code off...
 
Industrial training seminar ppt on asp.net
Industrial training seminar ppt on asp.netIndustrial training seminar ppt on asp.net
Industrial training seminar ppt on asp.net
 
Chris O'Brien - Introduction to the SharePoint Framework for developers
Chris O'Brien - Introduction to the SharePoint Framework for developersChris O'Brien - Introduction to the SharePoint Framework for developers
Chris O'Brien - Introduction to the SharePoint Framework for developers
 

Viewers also liked

Solving business problems: No-code approach with SharePoint designer workflow...
Solving business problems: No-code approach with SharePoint designer workflow...Solving business problems: No-code approach with SharePoint designer workflow...
Solving business problems: No-code approach with SharePoint designer workflow...
Bhakthi Liyanage
 
SP2010 Developer Tools
SP2010 Developer ToolsSP2010 Developer Tools
SP2010 Developer Tools
Mohamed Yehia Abdul Kader
 
Wrapping your head around the SharePoint Beast (For the rest of us)
Wrapping your head around the SharePoint Beast (For the rest of us)Wrapping your head around the SharePoint Beast (For the rest of us)
Wrapping your head around the SharePoint Beast (For the rest of us)
Mark Rackley
 
Custom SharePoint 2010 solutions without server access
Custom SharePoint 2010 solutions without server accessCustom SharePoint 2010 solutions without server access
Custom SharePoint 2010 solutions without server access
Phil Wicklund
 
What IS SharePoint Development?
What IS SharePoint Development?What IS SharePoint Development?
What IS SharePoint Development?
Mark Rackley
 
Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015
Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015
Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015
Rich Cullen
 

Viewers also liked (6)

Solving business problems: No-code approach with SharePoint designer workflow...
Solving business problems: No-code approach with SharePoint designer workflow...Solving business problems: No-code approach with SharePoint designer workflow...
Solving business problems: No-code approach with SharePoint designer workflow...
 
SP2010 Developer Tools
SP2010 Developer ToolsSP2010 Developer Tools
SP2010 Developer Tools
 
Wrapping your head around the SharePoint Beast (For the rest of us)
Wrapping your head around the SharePoint Beast (For the rest of us)Wrapping your head around the SharePoint Beast (For the rest of us)
Wrapping your head around the SharePoint Beast (For the rest of us)
 
Custom SharePoint 2010 solutions without server access
Custom SharePoint 2010 solutions without server accessCustom SharePoint 2010 solutions without server access
Custom SharePoint 2010 solutions without server access
 
What IS SharePoint Development?
What IS SharePoint Development?What IS SharePoint Development?
What IS SharePoint Development?
 
Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015
Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015
Top 10 real life WebSocket use cases & experiences - Devoxx UK 2015
 

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

68837.ppt
68837.ppt68837.ppt
68837.ppt
BruceLee275640
 
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
Kiril Iliev
 
Introduction to node.js
Introduction to node.jsIntroduction to node.js
Introduction to node.js
Adrien Guéret
 
AD102 - Break out of the Box
AD102 - Break out of the BoxAD102 - Break out of the Box
AD102 - Break out of the Box
Karl-Henry Martinsson
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
Alive Kuo
 
03 form-data
03 form-data03 form-data
03 form-data
snopteck
 
Taking Web Apps Offline
Taking Web Apps OfflineTaking Web Apps Offline
Taking Web Apps Offline
Pedro Morais
 
Softshake - Offline applications
Softshake - Offline applicationsSoftshake - Offline applications
Softshake - Offline applications
jeromevdl
 
Developing your first application using FIWARE
Developing your first application using FIWAREDeveloping your first application using FIWARE
Developing your first application using FIWARE
FIWARE
 
Step By Step Guide For Buidling Simple Struts App
Step By Step Guide For Buidling Simple Struts AppStep By Step Guide For Buidling Simple Struts App
Step By Step Guide For Buidling Simple Struts App
Syed Shahul
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
Justin Cataldo
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentialsSharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
Mark Rackley
 
Build powerfull and smart web applications with Symfony2
Build powerfull and smart web applications with Symfony2Build powerfull and smart web applications with Symfony2
Build powerfull and smart web applications with Symfony2
Hugo Hamon
 
Javascript Templating
Javascript TemplatingJavascript Templating
Javascript Templating
bcruhl
 
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends ForeverjQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
stephskardal
 
BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksBlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorks
mwbrooks
 
12 core technologies you should learn, love, and hate to be a 'real' technocrat
12 core technologies you should learn, love, and hate to be a 'real' technocrat12 core technologies you should learn, love, and hate to be a 'real' technocrat
12 core technologies you should learn, love, and hate to be a 'real' technocrat
Jonathan Linowes
 
Terrastore - A document database for developers
Terrastore - A document database for developersTerrastore - A document database for developers
Terrastore - A document database for developers
Sergio Bossa
 
Scout xss csrf_security_presentation_chicago
Scout xss csrf_security_presentation_chicagoScout xss csrf_security_presentation_chicago
Scout xss csrf_security_presentation_chicago
knaddison
 
Art of Javascript
Art of JavascriptArt of Javascript
Art of Javascript
Tarek Yehia
 

Similar to The Magic Revealed: Four Real-World Examples of Using the Client Object Model by Peter Serzo - SPTechCon (20)

68837.ppt
68837.ppt68837.ppt
68837.ppt
 
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
 
Introduction to node.js
Introduction to node.jsIntroduction to node.js
Introduction to node.js
 
AD102 - Break out of the Box
AD102 - Break out of the BoxAD102 - Break out of the Box
AD102 - Break out of the Box
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 
03 form-data
03 form-data03 form-data
03 form-data
 
Taking Web Apps Offline
Taking Web Apps OfflineTaking Web Apps Offline
Taking Web Apps Offline
 
Softshake - Offline applications
Softshake - Offline applicationsSoftshake - Offline applications
Softshake - Offline applications
 
Developing your first application using FIWARE
Developing your first application using FIWAREDeveloping your first application using FIWARE
Developing your first application using FIWARE
 
Step By Step Guide For Buidling Simple Struts App
Step By Step Guide For Buidling Simple Struts AppStep By Step Guide For Buidling Simple Struts App
Step By Step Guide For Buidling Simple Struts App
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentialsSharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
 
Build powerfull and smart web applications with Symfony2
Build powerfull and smart web applications with Symfony2Build powerfull and smart web applications with Symfony2
Build powerfull and smart web applications with Symfony2
 
Javascript Templating
Javascript TemplatingJavascript Templating
Javascript Templating
 
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends ForeverjQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
 
BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksBlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorks
 
12 core technologies you should learn, love, and hate to be a 'real' technocrat
12 core technologies you should learn, love, and hate to be a 'real' technocrat12 core technologies you should learn, love, and hate to be a 'real' technocrat
12 core technologies you should learn, love, and hate to be a 'real' technocrat
 
Terrastore - A document database for developers
Terrastore - A document database for developersTerrastore - A document database for developers
Terrastore - A document database for developers
 
Scout xss csrf_security_presentation_chicago
Scout xss csrf_security_presentation_chicagoScout xss csrf_security_presentation_chicago
Scout xss csrf_security_presentation_chicago
 
Art of Javascript
Art of JavascriptArt of Javascript
Art of Javascript
 

More from SPTechCon

Deep Dive into the Content Query Web Part by Christina Wheeler - SPTechCon
Deep Dive into the Content Query Web Part by Christina Wheeler - SPTechConDeep Dive into the Content Query Web Part by Christina Wheeler - SPTechCon
Deep Dive into the Content Query Web Part by Christina Wheeler - SPTechCon
SPTechCon
 
NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...
NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...
NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...
SPTechCon
 
“Managing Up” in Difficult Situations by Bill English - SPTechCon
“Managing Up” in Difficult Situations by Bill English - SPTechCon“Managing Up” in Difficult Situations by Bill English - SPTechCon
“Managing Up” in Difficult Situations by Bill English - SPTechCon
SPTechCon
 
Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...
Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...
Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...
SPTechCon
 
Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...
Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...
Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...
SPTechCon
 
Microsoft Keynote by Richard Riley - SPTechCon
Microsoft Keynote by Richard Riley - SPTechConMicrosoft Keynote by Richard Riley - SPTechCon
Microsoft Keynote by Richard Riley - SPTechCon
SPTechCon
 
Ten Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechCon
Ten Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechConTen Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechCon
Ten Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechCon
SPTechCon
 
Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...
Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...
Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...
SPTechCon
 
Law & Order: Content Governance Strategies by Chrisitan Buckley - SPTechCon
Law & Order: Content Governance Strategies by Chrisitan Buckley - SPTechConLaw & Order: Content Governance Strategies by Chrisitan Buckley - SPTechCon
Law & Order: Content Governance Strategies by Chrisitan Buckley - SPTechCon
SPTechCon
 
What IS SharePoint Development? by Mark Rackley - SPTechCon
 What IS SharePoint Development? by Mark Rackley - SPTechCon What IS SharePoint Development? by Mark Rackley - SPTechCon
What IS SharePoint Development? by Mark Rackley - SPTechCon
SPTechCon
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConThe SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
SPTechCon
 
Understanding and Implementing Governance for SharePoint 2010 by Bill English...
Understanding and Implementing Governance for SharePoint 2010 by Bill English...Understanding and Implementing Governance for SharePoint 2010 by Bill English...
Understanding and Implementing Governance for SharePoint 2010 by Bill English...
SPTechCon
 
Integrate External Data with the Business Connectivity Services by Tom Resing...
Integrate External Data with the Business Connectivity Services by Tom Resing...Integrate External Data with the Business Connectivity Services by Tom Resing...
Integrate External Data with the Business Connectivity Services by Tom Resing...
SPTechCon
 
Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...
Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...
Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...
SPTechCon
 
Tutorial: Best Practices for Building a Records-Management Deployment in Shar...
Tutorial: Best Practices for Building a Records-Management Deployment in Shar...Tutorial: Best Practices for Building a Records-Management Deployment in Shar...
Tutorial: Best Practices for Building a Records-Management Deployment in Shar...
SPTechCon
 
Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...
Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...
Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...
SPTechCon
 
Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...
Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...
Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...
SPTechCon
 
Sponsored Session: Better Document Management Using SharePoint by Roland Simo...
Sponsored Session: Better Document Management Using SharePoint by Roland Simo...Sponsored Session: Better Document Management Using SharePoint by Roland Simo...
Sponsored Session: Better Document Management Using SharePoint by Roland Simo...
SPTechCon
 
Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...
Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...
Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...
SPTechCon
 
Creating a Great User Experience in SharePoint by Marc Anderson - SPTechCon
Creating a Great User Experience in SharePoint by Marc Anderson - SPTechConCreating a Great User Experience in SharePoint by Marc Anderson - SPTechCon
Creating a Great User Experience in SharePoint by Marc Anderson - SPTechCon
SPTechCon
 

More from SPTechCon (20)

Deep Dive into the Content Query Web Part by Christina Wheeler - SPTechCon
Deep Dive into the Content Query Web Part by Christina Wheeler - SPTechConDeep Dive into the Content Query Web Part by Christina Wheeler - SPTechCon
Deep Dive into the Content Query Web Part by Christina Wheeler - SPTechCon
 
NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...
NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...
NOW I Get It... What SharePoint Is, and Why My Business Needs It by Mark Rack...
 
“Managing Up” in Difficult Situations by Bill English - SPTechCon
“Managing Up” in Difficult Situations by Bill English - SPTechCon“Managing Up” in Difficult Situations by Bill English - SPTechCon
“Managing Up” in Difficult Situations by Bill English - SPTechCon
 
Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...
Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...
Part I: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTec...
 
Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...
Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...
Part II: SharePoint 2013 Administration by Todd Klindt and Shane Young - SPTe...
 
Microsoft Keynote by Richard Riley - SPTechCon
Microsoft Keynote by Richard Riley - SPTechConMicrosoft Keynote by Richard Riley - SPTechCon
Microsoft Keynote by Richard Riley - SPTechCon
 
Ten Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechCon
Ten Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechConTen Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechCon
Ten Best SharePoint Features You’ve Never Used by Christian Buckley - SPTechCon
 
Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...
Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...
Looking Under the Hood: How Your Metadata Strategy Impacts Everything You Do ...
 
Law & Order: Content Governance Strategies by Chrisitan Buckley - SPTechCon
Law & Order: Content Governance Strategies by Chrisitan Buckley - SPTechConLaw & Order: Content Governance Strategies by Chrisitan Buckley - SPTechCon
Law & Order: Content Governance Strategies by Chrisitan Buckley - SPTechCon
 
What IS SharePoint Development? by Mark Rackley - SPTechCon
 What IS SharePoint Development? by Mark Rackley - SPTechCon What IS SharePoint Development? by Mark Rackley - SPTechCon
What IS SharePoint Development? by Mark Rackley - SPTechCon
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConThe SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
 
Understanding and Implementing Governance for SharePoint 2010 by Bill English...
Understanding and Implementing Governance for SharePoint 2010 by Bill English...Understanding and Implementing Governance for SharePoint 2010 by Bill English...
Understanding and Implementing Governance for SharePoint 2010 by Bill English...
 
Integrate External Data with the Business Connectivity Services by Tom Resing...
Integrate External Data with the Business Connectivity Services by Tom Resing...Integrate External Data with the Business Connectivity Services by Tom Resing...
Integrate External Data with the Business Connectivity Services by Tom Resing...
 
Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...
Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...
Converting an E-mail Culture into a SharePoint Culture by Robert Bogue - SPTe...
 
Tutorial: Best Practices for Building a Records-Management Deployment in Shar...
Tutorial: Best Practices for Building a Records-Management Deployment in Shar...Tutorial: Best Practices for Building a Records-Management Deployment in Shar...
Tutorial: Best Practices for Building a Records-Management Deployment in Shar...
 
Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...
Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...
Tutorial: Building Business Solutions: InfoPath & Workflows by Jennifer Mason...
 
Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...
Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...
Creating Simple Dashboards Using Out-of-the-Box Web Parts by Jennifer Mason- ...
 
Sponsored Session: Better Document Management Using SharePoint by Roland Simo...
Sponsored Session: Better Document Management Using SharePoint by Roland Simo...Sponsored Session: Better Document Management Using SharePoint by Roland Simo...
Sponsored Session: Better Document Management Using SharePoint by Roland Simo...
 
Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...
Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...
Sponsored Session: The Missing Link: Content-Aware Integration to SharePoint ...
 
Creating a Great User Experience in SharePoint by Marc Anderson - SPTechCon
Creating a Great User Experience in SharePoint by Marc Anderson - SPTechConCreating a Great User Experience in SharePoint by Marc Anderson - SPTechCon
Creating a Great User Experience in SharePoint by Marc Anderson - 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
  • 3.
  • 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
  • 16.
  • 17. Code
  • 18. Web Services vs Client Object Model
  • 19. Use Case #2 Obtain information from a SharePoint list.
  • 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)); }
  • 25.
  • 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. .
  • 36.
  • 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
  • 44.
  • 45. Things to be aware of…
  • 46.
  • 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