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
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!
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
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
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