Introduction to using
jQuery with Rene Modery
[Link]
SharePoint
Rene Modery
[Link]
About Me rene@[Link]
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
[Link]
What is this session about? rene@[Link]
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
[Link]
rene@[Link]
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
[Link]
What is jQuery? rene@[Link]
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.” ([Link])
Select elements, do things!
Rene Modery
[Link]
What can it do? rene@[Link]
Twitter: modery
DEMO
Rene Modery
[Link]
What do I need to know? rene@[Link]
Twitter: modery
• JavaScript
• HTML & CSS
• Some CAML
Rene Modery
[Link]
Development Support Tools rene@[Link]
Twitter: modery
• Editors
– Notepad++
– SharePoint Designer
– Visual Studio
• Debuggers
– IE Developer Tools + Fiddler (proxy)
– Firebug + FireQuery + FireFinder
Rene Modery
[Link]
jQuery Basics – Include rene@[Link]
Twitter: modery
• Reference [Link] within your page
– Either a “local” version or on a CDN
<script src="[Link]"></script>
or
<script src="
[Link]
/1.5/[Link]
"></script>
• Full version (for development and debugging!) &
minified (production!) available
Rene Modery
[Link]
jQuery Basics – $() rene@[Link]
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
[Link]
jQuery Basics - Selection rene@[Link]
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”]’)
$(“#[Link]”)
DEMO
Rene Modery
[Link]
jQuery Basics – Manipulation rene@[Link]
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
[Link]
jQuery - AJAX rene@[Link]
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
[Link]
rene@[Link]
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
[Link]
Adding jQuery to SharePoint rene@[Link]
Twitter: modery
1. Add call to [Link] 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
[Link]
rene@[Link]
Elements Twitter: modery
Use IE Developer Tools / Firebug to find IDs, classes,
etc
DEMO
Example: Content
Rene Modery
[Link]
rene@[Link]
Modification - KPIs Twitter: modery
Simple content modification: select element, replace it
DEMO
Rene Modery
[Link]
Example: Slideshow rene@[Link]
Twitter: modery
Show pictures from Image Library with fade effect
Original code by Waldek Mastykarz [Link] DEMO
Rene Modery
[Link]
Example: Column Visibility rene@[Link]
Twitter: modery
Show/hide columns in a list/library dynamically
Original code from Alexander Bautz, http
://[Link]/2010/04/23/sharepoint-toggle-column-visibility-in-list-view/
DEMO
Calling SharePoint
Rene Modery
[Link]
rene@[Link]
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
[Link]
SPServices rene@[Link]
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” ([Link]) :
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
[Link]
SPServices – Related Data rene@[Link]
Twitter: modery
Use $().[Link] if
you want to display related data for fields when filling a
form.
DEMO
SPServices – Cascading
Rene Modery
[Link]
rene@[Link]
Dropdowns Twitter: modery
Create a relationship between two or more dropdown
selections
DEMO
Rene Modery
[Link]
Providing Filter Dropdowns rene@[Link]
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
[Link]
What did we cover today? rene@[Link]
Twitter: modery
This
much!
There’s so
much more to
learn and do!
Rene Modery
[Link]
Where can I find out more? rene@[Link]
Twitter: modery
• Official Site: [Link]
• SPServices: [Link]
• Great overview of articles, books, etc:
[Link]
uery
• Marc D Anderson’s Blog at [Link]
• Chris O’Brien’s Blog at
[Link]
-[Link]
• Examples: [Link]
