SharePoint out-of-the-box does not always cover all the needs of your information-workers. If you want to improve the UX, you need a build or buy decision. In this session we are looking at how jquery/javascript can offer a simple and effective solution to improve the abilities of SharePoint. The big advantage of jquery is that you don’t need to develop features or other custom solutions. Therefore, your site doesn’t need to go through Test-Acceptance-stages and can save your organization a lot of costs and reduce time-to-market. All you need is a ‘Content Editor Webpart’! In this practical session we cover some easy tricks that can improve the way you work with SharePoint. This session is not only for developers, but targets specifically the end-users with little or none IT-knowledge.

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: