Introduction to using jQuery with SharePoint


Published on

Presented at SharePoint User Group Singapore, 10 March 2011

Published in: Technology
1 Comment
  • Nice, polished, useful. Well done.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to using jQuery with SharePoint

  1. 1. Introduction to using jQuery with SharePoint<br />
  2. 2. About Me<br />Working fulltime with SharePoint since2007<br />2 Asia-Pacific wide rollouts, involved inall kinds of things:<br />Planning, Governance, Branding, Requirements Gathering, Solution Implementation, Training, Workflows, ...<br />Not Administrator, not Developer, but:Consultant, Trainer, Designer, Power User, „Developer Light“, Analyst, Architect, ...If it‘s SharePoint, I‘m doing it! (or at least involved...)<br />Rene Modery<br />Web Program Manager<br />
  3. 3. What is this session about?<br />What is jQuery<br />Some jQuery Basics<br />Selection, Modification, Events, AJAX<br />How can jQuery be used within SharePoint<br />Demos, Demos, Demos!<br />DEMO<br />
  4. 4. © Information<br />Most demo contents are inspired by or directly taken from other people of the great community (Original sources will be indicated!), incl.:<br />Marc D. Anderson<br />Jason MacKenzie<br />WaldekMastykarz<br />Alexander Bautz<br />Key Point:The SharePoint and jQuery communities are awesome!<br />
  5. 5. What is jQuery?<br />“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” (<br />Select elements, do things!<br />
  6. 6. What can it do?<br />DEMO<br />
  7. 7. What do I need to know?<br />JavaScript<br />HTML & CSS<br />Some CAML<br />
  8. 8. Development Support Tools<br />Editors<br />Notepad++<br />SharePoint Designer<br />Visual Studio<br />Debuggers<br />IE Developer Tools + Fiddler (proxy)<br />Firebug + FireQuery + FireFinder<br />
  9. 9. jQuery Basics – Include<br />Reference jquery.js within your page<br />Either a “local” version or on a CDN<br /><script src="jquery.js"></script>or<script src=""></script><br />Full version (for development and debugging!) & minified (production!) available<br />
  10. 10. jQuery Basics – $()<br />Place your code within jQuery(document).ready()<br />Code gets executed when DOM is ready<br />jQuery(document).ready(function() { alert("hallo");});<br />$(document).ready() or short form $() can also be used:<br />$(function() { alert("hallo");});<br />DEMO<br />
  11. 11. jQuery Basics - Selection<br />Multiple options to select elements, can also be combined<br />DEMO<br />
  12. 12. jQuery Basics – Manipulation<br />DEMO<br />
  13. 13. jQuery - AJAX<br />Different ways to make AJAX calls with jQuery<br />
  14. 14. jQuery & SharePoint –Why & When?<br />Why?<br />Easy to implement!<br />Quick results!<br />Many possibilities – UI, web services, extending DVWP, …<br />When?<br />No managed code allowed<br />No developer available<br />Managed code development more costly & resource intensive<br />
  15. 15. Adding jQuery to SharePoint<br />Add call to jquery.js into Content Editor WebPart (CEWP) or Master Page<br />Add your own code into a CEWP or (better!) into a file stored in a central location<br />
  16. 16. Selecting SharePoint Elements<br />Use IE Developer Tools / Firebug to find IDs, classes, etc<br />DEMO<br />
  17. 17. Example: Content Modification - KPIs<br />Simple content modification: select element, replace it<br />DEMO<br />
  18. 18. Example: Slideshow<br />Show pictures from Image Library with fade effect<br />DEMO<br />Original code by WaldekMastykarz<br />
  19. 19. Example: Column Visibility<br />Show/hide columns in a list/library dynamically<br />Original code from Alexander Bautz,<br />DEMO<br />
  20. 20. Calling SharePoint Webservices<br />Prepare SOAP envelope<br />Call Webservice<br />Process results<br />1<br />2<br />3<br />DEMO<br />Example from: Professional SharePoint 2010 Branding and User Interface Design <br />
  21. 21. SPServices<br />“This is a jQuery library which abstracts SharePoint's Web Services and makes them easier to use. It also includes functions which use the various Web Service operations to provide more useful (and cool) capabilities” ( :<br />Web ServicesCheck SPServices documentation for detailed list<br />Form EnhancementsEnhance forms with cascading dropdowns, related info, unique value, …<br />UtilitiesGet current site, get current user, get query string, …<br />
  22. 22. SPServices – Related Data<br />Use $().SPServices.SPDisplayRelatedInfoif you want to display related data for fields when filling a form. <br />DEMO<br />
  23. 23. SPServices – Cascading Dropdowns<br />Create a relationship between two or more dropdown selections<br />DEMO<br />
  24. 24. Providing Filter Dropdowns<br />Using SPServices to fetch query parameters as well as the current site (NOT the whole URL!)<br />Using jQuery to load and display SharePoint’s filters<br />DEMO<br />
  25. 25. What did we cover today?<br />This much!<br />There’s so much more to learn and do!<br />
  26. 26. Where can I find out more?<br />Official Site:<br />SPServices:<br />Great overview of articles, books, etc:<br />Marc D Anderson’s Blog at<br />Chris O’Brien’s Blog at<br />Examples:<br />