Introduction to using jQuery with SharePoint
•
4 likes•8,225 views
Presented at SharePoint User Group Singapore, 10 March 2011
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Introduction to using jQuery with SharePoint
Similar to Introduction to using jQuery with SharePoint (20)
More from Rene Modery
More from Rene Modery (19)
Recently uploaded
Recently uploaded (20)
Introduction to using jQuery with SharePoint
- 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