Marijn somers start-tojquery_spsbe08

Marijn Somers

@marijnsomers

Start to jQuery

End-user possibilities to improve your SharePoint user experience

#SPSBE

#SPSBE08

About me

• + 5 years international experience

• Small to global organisations

• Functional / Business Analist

• End user

• Admin

• Trainer / coach

• Jack of all trades

• Microsoft Community Contributor award

• Balestra

• Antwerp Fencing Center

A big thanks to our sponsors

Venue Sponsor

Platinum Sponsors

Gold Premium Sponsors

Gold Sponsors

FOCUS• Level 100

• BALD

• Easy solutions

• Effective

• Reproducable

• GTFO!

• Measuring social learning – Bart Hendrickx

• Developing performing publishing sites – Karine Bosch

• Powershell – Adam Burcher

• Claims based authentication – Thomas Vochten

• Build Metro apps with Win8 – Edin Kapic

Agenda

• What is jQuery ?

• Real-world scenario: Car request

• Demo 1: look & feel

• Demo 2: modify data & events

• Demo 3: validations

• Demo 4: other plugins

• Demo 5: Context variable

• ECMA

WHAT IS JQUERY ?• Javascript

• Code that runs on your pc (not on server)

• Used for creating dynamic/interactive websites

• Write less, do more

• Cross-browser

• Open source

• First release: 2006

• 117 000 000 google results

JQUERY AND SHAREPOINT

• EASY

• Minimum development skills

• FAST

• “No” Test / Acceptance / Production stage

• Don’t have to deploy solutions in visual studio

• VERSION INDEPENDEND

YOU NEED GEARMandatory

• Reference to jQuery library

• Script

Optional

• HTML / JavaScript knowledge

• IE Developer tools (F12) is your friend

• SharePoint Designer

• Dev application

• Visual studio

• Notepad ++

SO HOW DOES IT LOOK LIKE ?

$(document).ready(function(){

alert(“Hello world”);

});

DEMO • Car request form

Demo 1: Look & feel

Hide fields

Change attributes

Demo 2: Modify data

Set-get values

Querystring

Events

PRESAVEACTION• OOTB SharePoint does validation

• Column: the value must be between x and y

• List: just 1 validation message

Demo 3

PreSaveAction

OTHER PLUGIN: JQUERY UI• jQuery library

• Look & feel

• Drag / drop

• Accordion

• Slider

• Tabs

• DatePicker

OTHER PLUGIN: SPSERVICES• jQuery library

• Abstracts SharePoint web services -> easier to use

• Cascaded dropdowns

• GetCurrentUser

• Filter dropdown

• Add item to lookup value

• Arrange choices

Demo 4: Other plugin

jQuery UI

SPServices - Get current user

CONTEXT VARIABLES• _spPageContextInfo

{webServerRelativeUrl : "/site",webLanguage : 1033,currentLanguage : 1033,webUIVersion : 4,pageListId : "{c1d7b89f-f07b-4e2e-b89c-76c315831d59}",pageItemId : 5,userId : 68,alertsEnabled : true,siteServerRelativeUrl : "/",allowSilverlightPrompt : "True"}

Demo 5

Translate

ECMA• Client object model

• List subsites, lists, items, ...

• Get information about the user

• Fields

• security

WITH GREAT POWER...• It is still code !!

• End-users could view it

• Could slow down / bring down your environment

WHERE TO PUT THE JQUERY FILE ?• Part of your governance plan

Local Global Online

+ supportability- No overview

+ Simple link- If location changes

+ Always latest version- External traffic

WHERE TO PUT THE CODE ?• Content editor webpart

• CEWP via link

• Forms webpart

• Masterpage

• Page

THE SOLUTION

WHAT YOUR USERS WILL THINK OF YOU

WHAT YOUR MANAGER WILL SAY

EVEN GOD..

WHERE CAN I FIND YOUR SCRIPTS ?• http://www.balestra.be/start-to-jQuery

www.balestra.be

Marijn.somers@balestra.be

@marijnsomers

Marijn Somers

OTHER SOURCES• Hillbilly jQuery - SharePoint guide

• SPServices on Codeplex

• Google

We need your feedback!

Scan this QR code or visit http://svy.mk/sps2012be

Our sponsors: