Presented at SharePoint User Group Singapore, 10 March 2011

1. Introduction to using jQuery with SharePoint

2. About Me Working fulltime with SharePoint since2007 2 Asia-Pacific wide rollouts, involved inall kinds of things: Planning, Governance, Branding, Requirements Gathering, Solution Implementation, Training, Workflows, ... 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...) Rene Modery Web Program Manager

3. What is this session about? What is jQuery Some jQuery Basics Selection, Modification, Events, AJAX How can jQuery be used within SharePoint Demos, Demos, Demos! DEMO

4. © Information Most demo contents are inspired by or directly taken from other people of the great community (Original sources will be indicated!), incl.: Marc D. Anderson Jason MacKenzie WaldekMastykarz Alexander Bautz Key Point:The SharePoint and jQuery communities are awesome!

5. What is jQuery? “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.” (jquery.com) Select elements, do things!

6. What can it do? DEMO

7. What do I need to know? JavaScript HTML & CSS Some CAML

8. Development Support Tools Editors Notepad++ SharePoint Designer Visual Studio Debuggers IE Developer Tools + Fiddler (proxy) Firebug + FireQuery + FireFinder

9. jQuery Basics – Include Reference jquery.js within your page Either a “local” version or on a CDN <script src="jquery.js"></script>or<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> Full version (for development and debugging!) & minified (production!) available

10. jQuery Basics – $() Place your code within jQuery(document).ready() Code gets executed when DOM is ready jQuery(document).ready(function() { alert("hallo");}); $(document).ready() or short form $() can also be used: $(function() { alert("hallo");}); DEMO

11. jQuery Basics - Selection Multiple options to select elements, can also be combined DEMO

12. jQuery Basics – Manipulation DEMO

13. jQuery - AJAX Different ways to make AJAX calls with jQuery

14. jQuery & SharePoint –Why & When? Why? Easy to implement! Quick results! Many possibilities – UI, web services, extending DVWP, … When? No managed code allowed No developer available Managed code development more costly & resource intensive

15. Adding jQuery to SharePoint Add call to jquery.js into Content Editor WebPart (CEWP) or Master Page Add your own code into a CEWP or (better!) into a file stored in a central location

16. Selecting SharePoint Elements Use IE Developer Tools / Firebug to find IDs, classes, etc DEMO

17. Example: Content Modification - KPIs Simple content modification: select element, replace it DEMO

18. Example: Slideshow Show pictures from Image Library with fade effect DEMO Original code by WaldekMastykarzhttp://blog.mastykarz.nl/images-slideshow-sharepoint-2007-jquery/

19. Example: Column Visibility Show/hide columns in a list/library dynamically Original code from Alexander Bautz, http://www.endusersharepoint.com/2010/04/23/sharepoint-toggle-column-visibility-in-list-view/ DEMO

20. Calling SharePoint Webservices Prepare SOAP envelope Call Webservice Process results 1 2 3 DEMO Example from: Professional SharePoint 2010 Branding and User Interface Design

21. SPServices “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” (spservices.codeplex.com) : Web ServicesCheck SPServices documentation for detailed list Form EnhancementsEnhance forms with cascading dropdowns, related info, unique value, … UtilitiesGet current site, get current user, get query string, …

22. SPServices – Related Data Use $().SPServices.SPDisplayRelatedInfoif you want to display related data for fields when filling a form. DEMO

23. SPServices – Cascading Dropdowns Create a relationship between two or more dropdown selections DEMO

24. Providing Filter Dropdowns Using SPServices to fetch query parameters as well as the current site (NOT the whole URL!) Using jQuery to load and display SharePoint’s filters DEMO

25. What did we cover today? This much! There’s so much more to learn and do!

26. Where can I find out more? Official Site: http://www.jquery.com SPServices: http://spservices.codeplex.com Great overview of articles, books, etc: http://www.learningjquery.com/2010/07/great-ways-to-learn-jquery Marc D Anderson’s Blog at http://sympmarc.com Chris O’Brien’s Blog at http://www.sharepointnutsandbolts.com/2010/10/sp2010-ajax-part-1-boiling-jquery-down.html Examples: http://www.nothingbutsharepoint.com