Marijn somers start-tojquery_spsbe08

456 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
456
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Marijn somers start-tojquery_spsbe08

  1. 1. #SPSBE Start to jQueryEnd-user possibilities to improveyour SharePoint user experience #SPSBE08 Marijn Somers @marijnsomers
  2. 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. 3. A big thanks to our sponsorsPlatinum SponsorsGold Premium Sponsors Venue SponsorGold Sponsors
  4. 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. 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. 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. 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. 8. YOU NEED GEARMandatory• Reference to jQuery library• ScriptOptional• HTML / JavaScript knowledge• IE Developer tools (F12) is your friend• SharePoint Designer• Dev application • Visual studio • Notepad ++
  9. 9. SO HOW DOES IT LOOK LIKE ? $(document).ready(function(){ alert(“Hello world”); });
  10. 10. DEMO• Car request form
  11. 11. Demo 1: Look & feel Hide fields Change attributes
  12. 12. Demo 2: Modify data Set-get values Querystring Events
  13. 13. PRESAVEACTION• OOTB SharePoint does validation• Column: the value must be between x and y• List: just 1 validation message
  14. 14. Demo 3 PreSaveAction
  15. 15. OTHER PLUGIN: JQUERY UI• jQuery library• Look & feel • Drag / drop • Accordion • Slider • Tabs • DatePicker
  16. 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. 17. Demo 4: Other plugin jQuery UI SPServices - Get current user
  18. 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. 19. Demo 5 Translate
  20. 20. ECMA• Client object model• List subsites, lists, items, ...• Get information about the user • Fields • security
  21. 21. WITH GREAT POWER... • It is still code !! • End-users could view it • Could slow down / bring down your environment
  22. 22. WHERE TO PUT THE JQUERY FILE ?• Part of your governance planLocal Global Online+ supportability + Simple link + Always latest version- No overview - If location changes - External traffic
  23. 23. WHERE TO PUT THE CODE ?• Content editor webpart• CEWP via link• Forms webpart• Masterpage• Page
  24. 24. THE SOLUTION
  25. 25. WHAT YOUR USERS WILL THINK OF YOU
  26. 26. WHAT YOUR MANAGER WILL SAY
  27. 27. EVEN GOD..
  28. 28. WHERE CAN I FIND YOUR SCRIPTS ?• http://www.balestra.be/start-to-jQuery
  29. 29. OTHER SOURCES• Hillbilly jQuery - SharePoint guide• SPServices on Codeplex• Google
  30. 30. We need your feedback! Scan this QR code or visit http://svy.mk/sps2012be Our sponsors:

×