Introduction to using jQuery with SharePoint

8/7/2019 Introduction to using jQuery with SharePoint

1/26

Rene Moderywww.modery.net

Introduction to using

jQuery withSharePoint


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


3/26


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


4/26


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!


5/26


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!


6/26


What can it do?

DEMO


7/26


What do I need to know?

J avaScript

HTML & CSS

Some C A ML


8/26


Development Support Tools

Editors Notepad++ SharePoint Designer

Visual Studio Deb uggers

IE Developer Tools + Fiddler (proxy) Fire b ug + FireQuery + FireFinder


9/26


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


10/26


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


11/26


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


12/26


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


13/26


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


14/26


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


15/26


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


16/26


Selecting SharePointElementsUse IE Developer Tools / Fire b ug to find IDs, classes,etc

DEMO


17/26


Example: ContentModification - KPIsSimple content modification: select element, replace it

DEMO


18/26


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/


19/26


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/


20/26


21/26


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,


22/26


SPServices Related Data

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

DEMO


23/26


SPServices CascadingDropdownsCreate a relationship b etween two or more dropdownselections

DEMO


24/26


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


25/26


What did we cover today?

T hism u ch!

Theres som u ch more to

learn and do!


26/26

Documents

Introduction to using jQuery with SharePoint