Spsbe2012 sessie start to-jquery
30
Marijn Somers @marijnsomers Start to jQuery End-user possibilities to improve your SharePoint user experience #SPSBE #SPSBE08
-
Upload
marijn-somers -
Category
Self Improvement
-
view
1.431 -
download
1
Transcript of Spsbe2012 sessie start to-jquery
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
@marijnsomers
Marijn Somers
OTHER SOURCES• Hillbilly jQuery - SharePoint guide
• SPServices on Codeplex
We need your feedback!
Scan this QR code or visit http://svy.mk/sps2012be
Our sponsors:
