Introduction to using jQuery with SharePoint

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

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

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

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!

What can it do?
DEMO

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

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

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

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

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

jQuery Basics – Manipulation
DEMO

jQuery - AJAX
Different ways to make AJAX calls with jQuery

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

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

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

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

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

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

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

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, …

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

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

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

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

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

Introduction to using jQuery with SharePoint

by Rene Modery

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 59

Statistics