1. #SPSBE
Start to jQuery
End-user possibilities to improve
your SharePoint user experience
#SPSBE08
Marijn Somers
@marijnsomers

2. 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

3. A big thanks to our sponsors
Platinum Sponsors
Gold Premium Sponsors Venue Sponsor
Gold Sponsors

4. 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

5. 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

6. 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

7. JQUERY AND SHAREPOINT
• EASY
• Minimum development skills
• FAST
• “No” Test / Acceptance / Production
stage
• Don’t have to deploy solutions in
visual studio
• VERSION INDEPENDEND

8. YOU NEED GEAR
Mandatory
• Reference to jQuery library
• Script
Optional
• HTML / JavaScript knowledge
• IE Developer tools (F12) is your friend
• SharePoint Designer
• Dev application
• Visual studio
• Notepad ++

9. SO HOW DOES IT LOOK LIKE ?
$(document).ready(function(){
alert(“Hello world”);
});

10. DEMO
• Car request form

11. Demo 1: Look & feel
Hide fields
Change attributes

12. Demo 2: Modify data
Set-get values
Querystring
Events

13. PRESAVEACTION
• OOTB SharePoint does validation
• Column: the value must be between x and y
• List: just 1 validation message

14. Demo 3
PreSaveAction

15. OTHER PLUGIN: JQUERY UI
• jQuery library
• Look & feel
• Drag / drop
• Accordion
• Slider
• Tabs
• DatePicker

16. OTHER PLUGIN: SPSERVICES
• jQuery library
• Abstracts SharePoint web services -> easier to use
• Cascaded dropdowns
• GetCurrentUser
• Filter dropdown
• Add item to lookup value
• Arrange choices

17. Demo 4: Other plugin
jQuery UI
SPServices - Get current user

18. 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"
}

19. Demo 5
Translate

20. ECMA
• Client object model
• List subsites, lists, items, ...
• Get information about the user
• Fields
• security

21. WITH GREAT POWER...
• It is still code !!
• End-users could view it
• Could slow down / bring down your environment

22. WHERE TO PUT THE JQUERY FILE ?
• Part of your governance plan
Local Global Online
+ supportability + Simple link + Always latest version
- No overview - If location changes - External traffic

23. WHERE TO PUT THE CODE ?
• Content editor webpart
• CEWP via link
• Forms webpart
• Masterpage
• Page

24. THE SOLUTION

25. WHAT YOUR USERS WILL THINK OF YOU

26. WHAT YOUR MANAGER WILL SAY

27. EVEN GOD..

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

29. OTHER SOURCES
• Hillbilly jQuery - SharePoint guide
• SPServices on Codeplex
• Google

30. We need your feedback!
Scan this QR code or visit
http://svy.mk/sps2012be
Our sponsors: