Introduction to using

jQuery with Rene Modery

www.modery.net
SharePoint
 Rene Modery
www.modery.net
About Me [email protected]
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? [email protected]
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
[email protected]
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? [email protected]
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? [email protected]
Twitter: modery

DEMO
 Rene Modery
www.modery.net
What do I need to know? [email protected]
Twitter: modery

• JavaScript
• HTML & CSS
• Some CAML
 Rene Modery
www.modery.net
Development Support Tools [email protected]
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 [email protected]
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 – $() [email protected]
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 [email protected]
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 [email protected]
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 [email protected]
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
[email protected]
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 [email protected]
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
[email protected]
Elements Twitter: modery

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

etc

DEMO
Example: Content
Rene Modery
www.modery.net
[email protected]
Modification - KPIs Twitter: modery

Simple content modification: select element, replace it

DEMO
 Rene Modery
www.modery.net
Example: Slideshow [email protected]
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 [email protected]
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
[email protected]
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 [email protected]
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 [email protected]
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
[email protected]
Dropdowns Twitter: modery

Create a relationship between two or more dropdown

selections

DEMO
 Rene Modery
www.modery.net
Providing Filter Dropdowns [email protected]
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? [email protected]
Twitter: modery

This
much!

There’s so
much more to
learn and do!
 Rene Modery
www.modery.net
Where can I find out more? [email protected]
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