Local Touch – Global ReachJavascript-Based Solutionsin SharePoint 2010Derek GusoffSenior ConsultantSogeti USA             ...
About Me   Derek Gusoff   Senior Consultant with Sogeti USA since 2008   @dgusoff   http://derekgusoff.wordpress.com   der...
Agenda  •        Why JavaScript?  •        A story  •        A defense of JavaScript  •        jQuery (with demos!)  •    ...
Why JavaScript?   •        SharePoint provides a UI right out of the box   •        It doesn’t always meet all our needs  ...
A Story                             http://www.learningjquery.com/                                                        ...
The trouble with JavaScript  http://blogs.claritycon.com/blog/                                      www.us.sogeti.com   6L...
jQuery                             www.us.sogeti.com   7Local Touch – Global Reach
Three things jQuery does extremely well   •        Manipulate the DOM   •        Make AJAX calls   •        Handle Events ...
jQuery Selector syntax   Note: the $ function always returns an array            http://api.jquery.com/category/selectors/...
jQuery AJAX calls                             http://api.jquery.com/jQuery.ajax/                                          ...
jQuery Events   •        A simple, easy-to-use method for subscribing to events in the web page   •        The ready() eve...
jQuery                             Demo                                    www.us.sogeti.com   12Local Touch – Global Reach
SharePoint JavaScript APIs   •        ASMX web services         – SOAP-based         – Lots of functionality not available...
ASMX Web Services                             www.us.sogeti.com   14Local Touch – Global Reach
SPServices   •        Third-party jQuery-based library for SharePoint   •        Available at http://spservices.codeplex.c...
SPServices                             www.us.sogeti.com   16Local Touch – Global Reach
REST Interface   •        A RESTful way to access SharePoint List data   •        The REST interface has been completely r...
REST Interface                             www.us.sogeti.com   18Local Touch – Global Reach
Client Side Object Model (CSOM)   •        Provides a programming interface familiar to .NET developers   •        The pre...
Client Side Object Model (CSOM)                                     www.us.sogeti.com   20Local Touch – Global Reach
Client Side Object Model (CSOM)                             Demos                                     www.us.sogeti.com   ...
Debugging tools and techniques   •        Internet Explorer Developer Tools (F12)   •        Visual Studio   •        Fidd...
Provisioning JavaScript to SharePoint   “The evolution of a SharePoint Developer”   •        Content Editor Web Part   •  ...
Referencing JavaScript files in SharePoint pages   •        <script> tag in page   •        <script> tag in Master page   ...
OOB SharePoint JavaScript files   •        To view debug version of SharePoint’s JavaScript files:   •        Modify this ...
Reference Implementation: Filtered Lookups   Requirements   •       Need a way to filter lookups by user-entered criteria ...
Filtered Lookups – Design considerations   •        The list architecture for lookups does not need to change – only the u...
Filtered Lookups                             Demo                                    www.us.sogeti.com   28Local Touch – G...
The craziest thing I ever did with JavaScript                             http://blogs.claritycon.com/blog/               ...
Local Touch – Global Reach Thank you                             www.us.sogeti.com
Upcoming SlideShare
Loading in...5
×

Share point saturday presentation 9 29-2012-2

965

Published on

SharePoint Saturday presentation, Detroit, Sept 29, 2012

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

  • Be the first to like this

No Downloads
Views
Total Views
965
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Share point saturday presentation 9 29-2012-2

  1. 1. Local Touch – Global ReachJavascript-Based Solutionsin SharePoint 2010Derek GusoffSenior ConsultantSogeti USA www.us.sogeti.com
  2. 2. About Me Derek Gusoff Senior Consultant with Sogeti USA since 2008 @dgusoff http://derekgusoff.wordpress.com derek.gusoff@us.sogeti.com www.us.sogeti.com 2Local Touch – Global Reach
  3. 3. Agenda • Why JavaScript? • A story • A defense of JavaScript • jQuery (with demos!) • Accessing data in SharePoint – ASMX web services / SPServices – REST interface – Client Object Model (with demos!) • Debugging and Troubleshooting • The OOB JavaScript files • Case Study • Q&A • The craziest thing I’ve ever done in JavaScript www.us.sogeti.com 3Local Touch – Global Reach
  4. 4. Why JavaScript? • SharePoint provides a UI right out of the box • It doesn’t always meet all our needs • JavaScript can fill the gap between standard functionality and your organization’s unique business requirements. http://www.leadersintheknow.biz www.us.sogeti.com 4Local Touch – Global Reach
  5. 5. A Story http://www.learningjquery.com/ www.us.sogeti.com 5Local Touch – Global Reach
  6. 6. The trouble with JavaScript http://blogs.claritycon.com/blog/ www.us.sogeti.com 6Local Touch – Global Reach
  7. 7. jQuery www.us.sogeti.com 7Local Touch – Global Reach
  8. 8. Three things jQuery does extremely well • Manipulate the DOM • Make AJAX calls • Handle Events www.us.sogeti.com 8Local Touch – Global Reach
  9. 9. jQuery Selector syntax Note: the $ function always returns an array http://api.jquery.com/category/selectors/ www.us.sogeti.com 9Local Touch – Global Reach
  10. 10. jQuery AJAX calls http://api.jquery.com/jQuery.ajax/ www.us.sogeti.com 10Local Touch – Global Reach
  11. 11. jQuery Events • A simple, easy-to-use method for subscribing to events in the web page • The ready() event – executes when the page DOM is loaded • An example of a click handler • http://api.jquery.com/category/events/ www.us.sogeti.com 11Local Touch – Global Reach
  12. 12. jQuery Demo www.us.sogeti.com 12Local Touch – Global Reach
  13. 13. SharePoint JavaScript APIs • ASMX web services – SOAP-based – Lots of functionality not available anywhere else – Supposedly deprecated in SP2013 but still supported – Search – User Profilles – Versions – FBA – Social Data – Sites, Webs, Lists, Views, Content Types http://msdn.microsoft.com/en-us/library/ee705814.aspx www.us.sogeti.com 13Local Touch – Global Reach
  14. 14. ASMX Web Services www.us.sogeti.com 14Local Touch – Global Reach
  15. 15. SPServices • Third-party jQuery-based library for SharePoint • Available at http://spservices.codeplex.com/ • You can think of it as a wrapper for the ASMX web services but it’s more than that. www.us.sogeti.com 15Local Touch – Global Reach
  16. 16. SPServices www.us.sogeti.com 16Local Touch – Global Reach
  17. 17. REST Interface • A RESTful way to access SharePoint List data • The REST interface has been completely replaced in SP2013, so any 2010 development will need to be redone after upgrade to 2013. • URL-based syntax www.us.sogeti.com 17Local Touch – Global Reach
  18. 18. REST Interface www.us.sogeti.com 18Local Touch – Global Reach
  19. 19. Client Side Object Model (CSOM) • Provides a programming interface familiar to .NET developers • The preferred method for interacting with SharePoint in JavaScript in 2010 and 2013 • Uses a web service called Client.svc under the hood. • Asynchronous operation • Limitations – Unlike REST or ASMX, the CSOM is scoped to a site collection – Limited to operations within a site collection www.us.sogeti.com 19Local Touch – Global Reach
  20. 20. Client Side Object Model (CSOM) www.us.sogeti.com 20Local Touch – Global Reach
  21. 21. Client Side Object Model (CSOM) Demos www.us.sogeti.com 21Local Touch – Global Reach
  22. 22. Debugging tools and techniques • Internet Explorer Developer Tools (F12) • Visual Studio • Fiddler www.us.sogeti.com 22Local Touch – Global Reach
  23. 23. Provisioning JavaScript to SharePoint “The evolution of a SharePoint Developer” • Content Editor Web Part • SharePoint Designer • Visual Studio Solution package www.us.sogeti.com 23Local Touch – Global Reach
  24. 24. Referencing JavaScript files in SharePoint pages • <script> tag in page • <script> tag in Master page • <CustomAction Location=“ScriptLink” • Try to put commonly used functionality in common files referenced across the site • Try to put page-specific code in files referenced only in that page or pages www.us.sogeti.com 24Local Touch – Global Reach
  25. 25. OOB SharePoint JavaScript files • To view debug version of SharePoint’s JavaScript files: • Modify this element on the web app’s web.config: • <compilation batch="false" debug="true"> • Interesting files to check out; • Core.js • SP.js – The “SP.*js” files represent the client object model • Init.js • Form.js www.us.sogeti.com 25Local Touch – Global Reach
  26. 26. Reference Implementation: Filtered Lookups Requirements • Need a way to filter lookups by user-entered criteria • Also need a default search filter( only open projects, for example) • Need to support a variety of search operators(Equal, Not Equal, Contains) • NO Code allowed www.us.sogeti.com 26Local Touch – Global Reach
  27. 27. Filtered Lookups – Design considerations • The list architecture for lookups does not need to change – only the user interface • We only need to change the user interface(manipulate the DOM) • We need a way to generate (on the fly) a query, merge it with a default query, send it to SharePoint, and process the results • We can use jQuery to hide the default lookups and replace with our own • We can launch a form in a dialog to capture the user’s query • We can use the Client Object model to create our query, fetch the desired results and place them back into the form www.us.sogeti.com 27Local Touch – Global Reach
  28. 28. Filtered Lookups Demo www.us.sogeti.com 28Local Touch – Global Reach
  29. 29. The craziest thing I ever did with JavaScript http://blogs.claritycon.com/blog/ www.us.sogeti.com 29Local Touch – Global Reach
  30. 30. Local Touch – Global Reach Thank you www.us.sogeti.com
  1. A particular slide catching your eye?

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

×