8/7/2019 Introduction to using jQuery with SharePoint
1/26
Rene Moderywww.modery.net
Introduction to using
jQuery withSharePoint
8/7/2019 Introduction to using jQuery with SharePoint
2/26
Rene [email protected]: modery
Ab out Me
Working fulltime with SharePoint since2007
2A sia-Pacific wide rollouts, involved in
all kinds of things: Planning, Governance, Branding, Requirements
Gathering, Solution Implementation, Training,Workflows, ...
Not A dministrator, not Developer, b ut:Consultant, Trainer, Designer, Power User,Developer Light, A nalyst, A rchitect, ...
If its SharePoint, Im doing it!(or at least involved...)
Rene ModeryWe b Program Manager
8/7/2019 Introduction to using jQuery with SharePoint
3/26
Rene [email protected]: modery
What is this session a b out?
What is jQuery
Some jQuery Basics
Selection, Modification, Events, AJAX
How can jQuery b e used within SharePoint Demos, Demos, Demos! DEMO
8/7/2019 Introduction to using jQuery with SharePoint
4/26
Rene [email protected]: modery
Information
Most demo contents are inspired b y or directly takenfrom other people of the great community (Original sources will b eindicated!) , incl.:
Marc D. A ndersonJ ason MacKenzie
Waldek Mastykarz
A lexander Bautz
Key Point:The SharePoint and jQuery communities are awesome!
8/7/2019 Introduction to using jQuery with SharePoint
5/26
Rene [email protected]: modery
What is jQuery?
jQuery is a fast and concise J avaScript Li b rary thatsimplifies HTML document traversing, event handling,animating, and A jax interactions for rapid we b
development. jQu ery is designed to change the waythat yo u write JavaScript. (jqu ery.com )
Select elements, do things!
8/7/2019 Introduction to using jQuery with SharePoint
6/26
Rene [email protected]: modery
What can it do?
DEMO
8/7/2019 Introduction to using jQuery with SharePoint
7/26
Rene [email protected]: modery
What do I need to know?
J avaScript
HTML & CSS
Some C A ML
8/7/2019 Introduction to using jQuery with SharePoint
8/26
Rene [email protected]: modery
Development Support Tools
Editors Notepad++ SharePoint Designer
Visual Studio Deb uggers
IE Developer Tools + Fiddler (proxy) Fire b ug + FireQuery + FireFinder
8/7/2019 Introduction to using jQuery with SharePoint
9/26
Rene [email protected]: modery
jQuery Basics Include
Reference jquery.js within your page Either a local version or on a CDN
or
Full version (for development and de b ugging!) &minified (production!) availa b le
8/7/2019 Introduction to using jQuery with SharePoint
10/26
Rene [email protected]: modery
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 b eused:
$(function() {alert("hallo");
});
DEMO
8/7/2019 Introduction to using jQuery with SharePoint
11/26
Rene [email protected]: modery
jQuery Basics - Selection
Multiple options to select elements, can also b ecom b ined
Tag $(tag)
Element b y ID $(#elementID)
Element(s) b y class $(.CSSclass)
Element(s) with specific
attrib
ute
[attribute] /[attribute=value]$(div [title=My Div])
$(#myTable.greenBorder)
DEMO
8/7/2019 Introduction to using jQuery with SharePoint
12/26
Rene [email protected]: modery
jQuery Basics Manipulation
.html() / .html( value ) Get/set HTML content
.text() / .text( value ) Get/set text content
.attr( name ) /
.attr( name, value )Ge t/ e t ttrib tes
.click( action ) Code to execute whenelement is clicked
.change( action ) Code to execute whenelement changes
DEMO
8/7/2019 Introduction to using jQuery with SharePoint
13/26
Rene [email protected]: modery
jQuery - AJAX
Different ways to make AJAX calls with jQuery
.load() Load data from server andinsert into element
$.getJSON() Load J SON encoded data$.getScript() Load J avaScript$.get() Load data from server using
HTTP GET$.post() Load data from server usingHTTP POST
$.ajax() Low-level interface, hugerange of options
8/7/2019 Introduction to using jQuery with SharePoint
14/26
Rene [email protected]: modery
jQuery & SharePoint Why & When?
Why? Easy to implement!
Quick results! Many possi b ilities UI, we b services, extendingDVWP,
When? No managed code allowed No developer availa b le Managed code development more costly &
resource intensive
8/7/2019 Introduction to using jQuery with SharePoint
15/26
Rene [email protected]: modery
A dding jQuery to SharePoint
1. A dd call to jquery.js intoContent Editor We b Part(CEWP) or Master Page
2. A dd your own code into a
CEWP or (b
etter!) into a filestored in a central location
8/7/2019 Introduction to using jQuery with SharePoint
16/26
Rene [email protected]: modery
Selecting SharePointElementsUse IE Developer Tools / Fire b ug to find IDs, classes,etc
DEMO
8/7/2019 Introduction to using jQuery with SharePoint
17/26
Rene [email protected]: modery
Example: ContentModification - KPIsSimple content modification: select element, replace it
DEMO
8/7/2019 Introduction to using jQuery with SharePoint
18/26
Rene [email protected]: modery
Example: Slideshow
Show pictures from Image Li b rary with fade effect
DEMOOriginal code b y Waldek Mastykarz http:// b log.mastykarz.nl/images-slideshow-sharepoint-2007-jquery/
8/7/2019 Introduction to using jQuery with SharePoint
19/26
Rene [email protected]: modery
Example: Column Visi b ility
Show/hide columns in a list/li b rary dynamically
DEMO
Original code from A lexander Bautz, http://www.endusersharepoint.com/2010/04/23/sharepoint-toggle-column-visib ility-in-list-view/
8/7/2019 Introduction to using jQuery with SharePoint
20/26
8/7/2019 Introduction to using jQuery with SharePoint
21/26
Rene [email protected]: modery
SPServices
This is a jQuery li b rary which abstracts SharePoint's WebServices and makes them easier to use. It also includesfunctions which use the various We b Service operations toprovide more u sef u l (and cool) capabilities (spservices.codeple x .com ) :
1 . Web ServicesCheck SPServices documentation for detailed list
2 .Form E nhancementsEnhance forms with cascading dropdowns, related info, unique value,
3 .UtilitiesGet current site, get current user, get query string,
8/7/2019 Introduction to using jQuery with SharePoint
22/26
Rene [email protected]: modery
SPServices Related Data
Use $().SPServices.SPDisplayRelatedInfo if you want to display related data for fields when filling aform.
DEMO
8/7/2019 Introduction to using jQuery with SharePoint
23/26
Rene [email protected]: modery
SPServices CascadingDropdownsCreate a relationship b etween two or more dropdownselections
DEMO
8/7/2019 Introduction to using jQuery with SharePoint
24/26
Rene [email protected]: modery
Providing Filter Dropdowns
Using SPServices to fetch query parameters as wellas the current site (NOT the whole URL!)
Using jQuery to load and display SharePoints filters
DEMO
8/7/2019 Introduction to using jQuery with SharePoint
25/26
Rene [email protected]: modery
What did we cover today?
T hism u ch!
Theres som u ch more to
learn and do!
8/7/2019 Introduction to using jQuery with SharePoint
26/26