Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Spsbe2012 sessie start to-jquery

1,769 views

Published on

Published in: Self Improvement, Technology
  • Be the first to comment

  • Be the first to like this

Spsbe2012 sessie start to-jquery

  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:

×