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
