Power to the People: Manipulating SharePoint with Client-Side JavaScript


Published on

First delivered at SharePoint Saturday Houston, this presentation provides a brief background of the use of JavaScript in SharePoint before forging ahead into the capabilities of jQuery and the Client-Side Object Model.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Power to the People: Manipulating SharePoint with Client-Side JavaScript

  1. 1. Welcome
  2. 2. Welcome to SharePoint Saturday Houston Thank you for being a part of the 3rdAnnual SharePoint Saturday for the greater Houston area!• Please turn off all electronic devices or set them to vibrate.• If you must take a phone call, please do so in the hall so as not to disturb others.• Thanks to our Title Sponsor: And our Platinum Sponsors: 2
  3. 3. Information• Speaker presentation slides will be available at SharePointSaturday.org/Houston within a week• Keep checking website for future events• The Houston SharePoint User Group at www.h-spug.org, will be having it’s May meeting Wednesday May 24th. Please be sure to join us!• Have a great day! 3
  4. 4. DON’T FORGET…to drop a business card up front! Prize drawing after the show.
  5. 5. Introductions Peter Brunone (that’s me) • peter.brunone@improvingenterprises.com • http://weblogs.asp.net/PeterBrunone In my life, I have: • Ridden a unicycle • Learned to play the tuba • Become an avid fan of both Doctor Who and Doctor McNinja • Not yet gotten on Twitter joined Twitter during this presentation
  6. 6. Power to the People Manipulating SharePoint with client-side JavaScript Peter Brunone, MCTSpeter.brunone@improvingenterprises.com http://weblogs.asp.net/peterbrunone
  7. 7. SERIOUSLYDon’t forget to put your card in for the drawing. You’ll wish you had.
  8. 8. Two sides to every (dev) storyTraditionally, this is how it’s been:Client-Side Manipulation Server-Side Manipulation• Style changes (though • List item CRUD clunky) • Security/Permissions• UI goodness (also clunky) • TRUE POWER!• You can push a lot of • (but mostly reserved for buttons… Visual Studio)
  9. 9. So why develop client-side?A few reasons:• No special permissions required• No required packaging• No solution deployment process = Quicker changes!
  10. 10. Let’s talk about…• The role of JavaScript from then to now• The rise of jQuery• Tool memos and cool demos
  11. 11. JavaScript in SharePoint(a brief history)In the beginning, there was… not much.• SP 1 – wait, there was a SharePoint v1?• WSS 2.0 (SharePoint 2003) – FrontPage – Web Services!• WSS 3.0 (MOSS 2007) – SP Designer – Web Services – a few more options – Hack the Content Editor WebPart (CEWP)
  12. 12. JavaScript in SharePointWeb Services – (insert mammoth block of code here)
  13. 13. JavaScript in SharePoint…and then along came jQuery! – http://jquery.com – A JavaScript library that abstracts out a ton of basic (and not-so-basic) functions – Largely affects the markup in the browser – …BUT has some great built-in AJAX help for calling server resources
  14. 14. JavaScript in SharePointDemonstration: Styling, etc. with jQuery
  15. 15. Web Services and jQuery$(document).ready(function() { var soapEnvelope = "<soapenv:Envelope xmlns:soapenv=http://schemas.xmlsoap.org/soap/envelope/> <soapenv:Body> <GetListCollection xmlns=http://schemas.microsoft.com/sharepoint/soap/> </GetListCollection> </soapenv:Body> </soapenv:Envelope>"; $.ajax({ url: "http://yoursite/_vti_bin/lists.asmx", type: "POST", dataType: "xml", data: soapEnv, complete: getListNames, contentType: "text/xml; charset="utf-8"" });}); function getListNames(xData, status) { $(xData.responseXML).find("List").each(function() { $("#data").append("<div>" + $(this).attr("Title") + "</div>"); }); } A lot less code, but still a bit of XML to track. (Do I want to have to know what a “SOAP Envelope” is?) (Special thanks to Jan Tielens for the code sample)
  16. 16. A still more excellent way The SPServices JavaScript library • http://spservices.codeplex.com/ • Thank you, Marc Anderson (@sympmarc)! • Packaged web service operations for SP • Runs on top of jQuery
  17. 17. What’s new in 2010?All hail the Client-Side Object Model!• Managed code (VB, C#, anything that compiles for the .NET CLR)• Silverlight• JavaScript (ECMAScript)
  18. 18. Managed CodePros:• Very powerful.• Easy point of entry for .NET developersCons:• Need .NET framework (proper version) on all target machines• Oh, and Visual Studio. You must compile.
  19. 19. SilverlightPros:• It’s cool.• Broader target base -- no .NET install requiredCons:• Still not completely accepted• Users must install a plug-in• Another dev platform to learn (school is boring)
  20. 20. JavaScriptPros:• Almost universally accepted – mature tech• Platform independent (OOTB browser support)Cons:• Not all SP CSOM functionality is available• Object types differ (JS is a loosely-typed language) – Some obscure methods replace
  21. 21. Using JS with the CSOMAll objects are derived from the SharePoint Object ModelWhat you need:• SP.js• The SharePoint default master page (trust me)• FormDigest element – it’s for your own safety, ma’am.
  22. 22. Using JS with the CSOMDemonstration: Adding and retrieving list items
  23. 23. The sum of our training
  24. 24. Nothing to see here (last demo)
  25. 25. Questions?
  26. 26. Power to the People Manipulating SharePoint with client-side JavaScript Peter Brunone, MCTSpeter.brunone@improvingenterprises.com http://weblogs.asp.net/peterbrunone
  27. 27. Thanks to all our Sponsors 28