marijn somers start-tojquery_spsbe08
DESCRIPTION
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.TRANSCRIPT
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: