Download to read offline
Power to the People: Manipulating SharePoint with Client-Side JavaScript
- 1.
- 2. Welcome to SharePointSaturday Houston Thank you for being a part of the 3rd Annual 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. Information • Speaker presentationslides 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
- 5. DON’T FORGET …to dropa business card up front! Prize drawing after the show.
- 6. 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
- 7. Power to thePeople Manipulating SharePoint with client-side JavaScript Peter Brunone, MCTS peter.brunone@improvingenterprises.com http://weblogs.asp.net/peterbrunone
- 8. SERIOUSLY Don’t forget toput your card in for the drawing. You’ll wish you had.
- 9. Two sides toevery (dev) story Traditionally, 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)
- 10. So why developclient-side? A few reasons: • No special permissions required • No required packaging • No solution deployment process = Quicker changes!
- 11. Let’s talk about… •The role of JavaScript from then to now • The rise of jQuery • Tool memos and cool demos
- 12. JavaScript in SharePoint (abrief 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)
- 13. JavaScript in SharePoint WebServices – (insert mammoth block of code here)
- 14. JavaScript in SharePoint …andthen 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
- 15. JavaScript in SharePoint Demonstration:Styling, etc. with jQuery
- 16. Web Services andjQuery $(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)
- 17. A still moreexcellent 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
- 18. What’s new in2010? All hail the Client-Side Object Model! • Managed code (VB, C#, anything that compiles for the .NET CLR) • Silverlight • JavaScript (ECMAScript)
- 19. Managed Code Pros: • Verypowerful. • Easy point of entry for .NET developers Cons: • Need .NET framework (proper version) on all target machines • Oh, and Visual Studio. You must compile.
- 20. Silverlight Pros: • It’s cool. •Broader target base -- no .NET install required Cons: • Still not completely accepted • Users must install a plug-in • Another dev platform to learn (school is boring)
- 21. JavaScript Pros: • Almost universallyaccepted – 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
- 22. Using JS withthe CSOM All objects are derived from the SharePoint Object Model What you need: • SP.js • The SharePoint default master page (trust me) • FormDigest element – it’s for your own safety, ma’am.
- 23. Using JS withthe CSOM Demonstration: Adding and retrieving list items
- 24. The sum ofour training
- 25. Nothing to seehere (last demo)
- 26.
- 27. Power to thePeople Manipulating SharePoint with client-side JavaScript Peter Brunone, MCTS peter.brunone@improvingenterprises.com http://weblogs.asp.net/peterbrunone
- 28. Thanks to allour Sponsors 28