Introduction to using

jQuery with Rene Modery

www.modery.net
SharePoint
 Rene Modery
www.modery.net
About Me rene@modery.net
Twitter: modery

• Working fulltime with SharePoint since

2007
• 2 Asia-Pacific wide rollouts, involved in
all kinds of things:
– Planning, Governance, Branding, Requirements
Rene Modery
Gathering, Solution Implementation, Training, Web Program Manager
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
www.modery.net
What is this session about? rene@modery.net
Twitter: modery

• What is jQuery
• Some jQuery Basics
• Selection, Modification, Events, AJAX
• How can jQuery be used within SharePoint
• Demos, Demos, Demos! DEMO
 Rene Modery

© Information
www.modery.net
rene@modery.net
Twitter: modery

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
• Waldek Mastykarz
• Alexander Bautz

Key Point:
The SharePoint and jQuery communities are awesome!
 Rene Modery
www.modery.net
What is jQuery? rene@modery.net
Twitter: modery

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

 Rene Modery
www.modery.net
What can it do? rene@modery.net
Twitter: modery

DEMO
 Rene Modery
www.modery.net
What do I need to know? rene@modery.net
Twitter: modery

• JavaScript
• HTML & CSS
• Some CAML
 Rene Modery
www.modery.net
Development Support Tools rene@modery.net
Twitter: modery

• Editors
– Notepad++
– SharePoint Designer
– Visual Studio
• Debuggers
– IE Developer Tools + Fiddler (proxy)
– Firebug + FireQuery + FireFinder
 Rene Modery
www.modery.net
jQuery Basics – Include rene@modery.net
Twitter: modery

• 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
 Rene Modery
www.modery.net
jQuery Basics – $() rene@modery.net
Twitter: modery

• 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
 Rene Modery
www.modery.net
jQuery Basics - Selection rene@modery.net
Twitter: modery

Multiple options to select elements, can also be

combined
Tag $(“tag”)

Element by ID $(“#elementID”)

Element(s) by class $(“.CSSclass”)

Element(s) with specific [attribute] /

attribute [attribute=value]
$(‘div [title=“My Div”]’)

$(“#myTable.greenBorder”)

DEMO
 Rene Modery
www.modery.net
jQuery Basics – Manipulation rene@modery.net
Twitter: modery

.html() / .html(value) Get/set HTML content

.text() / .text(value) Get/set text content
.attr(name) / Get/set attributes
.attr(name, value)
.click(action) Code to execute when
element is clicked
.change(action) Code to execute when
element changes

DEMO
 Rene Modery
www.modery.net
jQuery - AJAX rene@modery.net
Twitter: modery

Different ways to make AJAX calls with jQuery

.load() Load data from server and
insert into element
$.getJSON() Load JSON encoded data
$.getScript() Load JavaScript
$.get() Load data from server using
HTTP GET
$.post() Load data from server using
HTTP POST
$.ajax() Low-level interface, huge
range of options
jQuery & SharePoint –
Rene Modery
www.modery.net
rene@modery.net
Why & When? Twitter: modery

• 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
 Rene Modery
www.modery.net
Adding jQuery to SharePoint rene@modery.net
Twitter: modery

1. Add call to jquery.js into

Content Editor WebPart
(CEWP) or Master Page

2. Add your own code into a

CEWP or (better!) into a file
stored in a central location
Selecting SharePoint
Rene Modery
www.modery.net
rene@modery.net
Elements Twitter: modery

Use IE Developer Tools / Firebug to find IDs, classes,

etc

DEMO
Example: Content
Rene Modery
www.modery.net
rene@modery.net
Modification - KPIs Twitter: modery

Simple content modification: select element, replace it

DEMO
 Rene Modery
www.modery.net
Example: Slideshow rene@modery.net
Twitter: modery

Show pictures from Image Library with fade effect

Original code by Waldek Mastykarz http://blog.mastykarz.nl/images-slideshow-sharepoint-2007-jquery/ DEMO

 Rene Modery
www.modery.net
Example: Column Visibility rene@modery.net
Twitter: modery

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
Rene Modery
www.modery.net
rene@modery.net
Webservices Twitter: modery

1
1. Prepare SOAP
envelope
2. Call Webservice 2

3. Process results 3

Example from:
Professional SharePoint 2010 Branding and DEMO
User Interface Design
 Rene Modery
www.modery.net
SPServices rene@modery.net
Twitter: modery

“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) :

1. Web Services
Check SPServices documentation for detailed list

2. Form Enhancements
Enhance forms with cascading dropdowns, related info, unique value, …

3. Utilities
Get current site, get current user, get query string, …
 Rene Modery
www.modery.net
SPServices – Related Data rene@modery.net
Twitter: modery

Use $().SPServices.SPDisplayRelatedInfo if
you want to display related data for fields when filling a
form.

DEMO
SPServices – Cascading
Rene Modery
www.modery.net
rene@modery.net
Dropdowns Twitter: modery

Create a relationship between two or more dropdown

selections

DEMO
 Rene Modery
www.modery.net
Providing Filter Dropdowns rene@modery.net
Twitter: modery

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
 Rene Modery
www.modery.net
What did we cover today? rene@modery.net
Twitter: modery

This
much!

There’s so
much more to
learn and do!
 Rene Modery
www.modery.net
Where can I find out more? rene@modery.net
Twitter: modery

• 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-jq
uery
• 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