SlideShare ist ein Scribd-Unternehmen logo
1 von 26
Introduction to using jQuery with SharePoint
About Me Working fulltime with SharePoint since2007 2 Asia-Pacific wide rollouts, involved inall kinds of things: Planning, Governance, Branding, Requirements Gathering, Solution Implementation, Training, Workflows, ... Not Administrator, not Developer, but:Consultant, Trainer, Designer, Power User, „Developer Light“, Analyst, Architect, ...If it‘s SharePoint, I‘m doing it!      (or at least involved...) Rene Modery Web Program Manager
What is this session about? What is jQuery Some jQuery Basics Selection, Modification, Events, AJAX How can jQuery be used within SharePoint Demos, Demos, Demos! DEMO
© Information Most demo contents are inspired by or directly taken from other people of the great community (Original sources will be indicated!), incl.: Marc D. Anderson Jason MacKenzie WaldekMastykarz Alexander Bautz Key Point:The SharePoint and jQuery communities are awesome!
What is jQuery? “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” (jquery.com) Select elements, do things!
What can it do? DEMO
What do I need to know? JavaScript HTML & CSS Some CAML
Development Support Tools Editors Notepad++ SharePoint Designer Visual Studio Debuggers IE Developer Tools + Fiddler (proxy) Firebug + FireQuery + FireFinder
jQuery Basics – Include Reference jquery.js within your page Either a “local” version or on a CDN <script src="jquery.js"></script>or<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> Full version (for development and debugging!) & minified (production!) available
jQuery Basics – $() Place your code within jQuery(document).ready() Code gets executed when DOM is ready jQuery(document).ready(function() {   alert("hallo");}); $(document).ready() or short form $() can also be used: $(function() {  alert("hallo");}); DEMO
jQuery Basics - Selection Multiple options to select elements, can also be combined DEMO
jQuery Basics – Manipulation DEMO
jQuery - AJAX Different ways to make AJAX calls with jQuery
jQuery & SharePoint –Why & When? Why? Easy to implement! Quick results! Many possibilities – UI, web services, extending DVWP, … When? No managed code allowed No developer available Managed code development more costly & resource intensive
Adding jQuery to SharePoint Add call to jquery.js into Content Editor WebPart (CEWP) or Master Page Add your own code into a CEWP or (better!) into a file stored in a central location
Selecting SharePoint Elements Use IE Developer Tools / Firebug to find IDs, classes, etc DEMO
Example: Content Modification - KPIs Simple content modification: select element, replace it DEMO
Example: Slideshow Show pictures from Image Library with fade effect DEMO Original code by WaldekMastykarzhttp://blog.mastykarz.nl/images-slideshow-sharepoint-2007-jquery/
Example: Column Visibility Show/hide columns in a list/library dynamically Original code from Alexander Bautz, http://www.endusersharepoint.com/2010/04/23/sharepoint-toggle-column-visibility-in-list-view/ DEMO
Calling SharePoint Webservices Prepare SOAP envelope Call Webservice Process results 1 2 3 DEMO Example from: Professional SharePoint 2010 Branding and User Interface Design
SPServices “This is a jQuery library which abstracts SharePoint's Web Services and makes them easier to use. It also includes functions which use the various Web Service operations to provide more useful (and cool) capabilities” (spservices.codeplex.com) : Web ServicesCheck SPServices documentation for detailed list Form EnhancementsEnhance forms with cascading dropdowns, related info, unique value, … UtilitiesGet current site, get current user, get query string, …
SPServices – Related Data Use $().SPServices.SPDisplayRelatedInfoif you want to display related data for fields when filling a form.  DEMO
SPServices – Cascading Dropdowns Create a relationship between two or more dropdown selections DEMO
Providing Filter Dropdowns Using SPServices to fetch query parameters as well as the current site (NOT the whole URL!) Using jQuery to load and display SharePoint’s filters DEMO
What did we cover today? This much! There’s so much more to learn and do!
Where can I find out more? Official Site: http://www.jquery.com SPServices: http://spservices.codeplex.com Great overview of articles, books, etc: http://www.learningjquery.com/2010/07/great-ways-to-learn-jquery Marc D Anderson’s Blog at http://sympmarc.com Chris O’Brien’s Blog at http://www.sharepointnutsandbolts.com/2010/10/sp2010-ajax-part-1-boiling-jquery-down.html Examples: http://www.nothingbutsharepoint.com

Weitere ähnliche Inhalte

Was ist angesagt?

SPTechCon Dev Days - Third Party jQuery Libraries
SPTechCon Dev Days - Third Party jQuery LibrariesSPTechCon Dev Days - Third Party jQuery Libraries
SPTechCon Dev Days - Third Party jQuery LibrariesMark Rackley
 
The SharePoint & jQuery Guide
The SharePoint & jQuery GuideThe SharePoint & jQuery Guide
The SharePoint & jQuery GuideMark Rackley
 
Transform SharePoint List Forms with HTML and CSS
Transform SharePoint List Forms with HTML and CSSTransform SharePoint List Forms with HTML and CSS
Transform SharePoint List Forms with HTML and CSSJohn Calvert
 
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePointSPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePointMark Rackley
 
Content by query web part
Content by query web partContent by query web part
Content by query web partIslamKhattab
 
SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014Mark Rackley
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint BeastMark Rackley
 
SEF2013 - Create a Business Solution, Step by Step, with No Managed Code
SEF2013 - Create a Business Solution, Step by Step, with No Managed CodeSEF2013 - Create a Business Solution, Step by Step, with No Managed Code
SEF2013 - Create a Business Solution, Step by Step, with No Managed CodeMarc D Anderson
 
O365 Saturday - Deepdive SharePoint Client Side Rendering
O365 Saturday - Deepdive SharePoint Client Side RenderingO365 Saturday - Deepdive SharePoint Client Side Rendering
O365 Saturday - Deepdive SharePoint Client Side RenderingRiwut Libinuko
 
SPTechCon Boston 2015 - Overcoming SharePoint Limitations
SPTechCon Boston 2015 - Overcoming SharePoint LimitationsSPTechCon Boston 2015 - Overcoming SharePoint Limitations
SPTechCon Boston 2015 - Overcoming SharePoint LimitationsMark Rackley
 
SharePoint REST vs CSOM
SharePoint REST vs CSOMSharePoint REST vs CSOM
SharePoint REST vs CSOMMark Rackley
 
(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery GuideMark Rackley
 
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have knownSPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have knownMark Rackley
 
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePointSPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePointMark Rackley
 
Using jQuery to Maximize Form Usability
Using jQuery to Maximize Form UsabilityUsing jQuery to Maximize Form Usability
Using jQuery to Maximize Form UsabilityMark Rackley
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuerySharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQueryMark Rackley
 
Intro to SharePoint Web Services
Intro to SharePoint Web ServicesIntro to SharePoint Web Services
Intro to SharePoint Web ServicesMark Rackley
 
Introduction to StratusForms #SayNoToInfoPath
Introduction to StratusForms #SayNoToInfoPathIntroduction to StratusForms #SayNoToInfoPath
Introduction to StratusForms #SayNoToInfoPathMark Rackley
 
SharePoint and the User Interface with JavaScript
SharePoint and the User Interface with JavaScriptSharePoint and the User Interface with JavaScript
SharePoint and the User Interface with JavaScriptRegroove
 

Was ist angesagt? (20)

SPTechCon Dev Days - Third Party jQuery Libraries
SPTechCon Dev Days - Third Party jQuery LibrariesSPTechCon Dev Days - Third Party jQuery Libraries
SPTechCon Dev Days - Third Party jQuery Libraries
 
The SharePoint & jQuery Guide
The SharePoint & jQuery GuideThe SharePoint & jQuery Guide
The SharePoint & jQuery Guide
 
Transform SharePoint List Forms with HTML and CSS
Transform SharePoint List Forms with HTML and CSSTransform SharePoint List Forms with HTML and CSS
Transform SharePoint List Forms with HTML and CSS
 
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePointSPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
 
Content by query web part
Content by query web partContent by query web part
Content by query web part
 
SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
 
SEF2013 - Create a Business Solution, Step by Step, with No Managed Code
SEF2013 - Create a Business Solution, Step by Step, with No Managed CodeSEF2013 - Create a Business Solution, Step by Step, with No Managed Code
SEF2013 - Create a Business Solution, Step by Step, with No Managed Code
 
O365 Saturday - Deepdive SharePoint Client Side Rendering
O365 Saturday - Deepdive SharePoint Client Side RenderingO365 Saturday - Deepdive SharePoint Client Side Rendering
O365 Saturday - Deepdive SharePoint Client Side Rendering
 
SPTechCon Boston 2015 - Overcoming SharePoint Limitations
SPTechCon Boston 2015 - Overcoming SharePoint LimitationsSPTechCon Boston 2015 - Overcoming SharePoint Limitations
SPTechCon Boston 2015 - Overcoming SharePoint Limitations
 
SharePoint REST vs CSOM
SharePoint REST vs CSOMSharePoint REST vs CSOM
SharePoint REST vs CSOM
 
(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide
 
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have knownSPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have known
 
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePointSPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePoint
 
Using jQuery to Maximize Form Usability
Using jQuery to Maximize Form UsabilityUsing jQuery to Maximize Form Usability
Using jQuery to Maximize Form Usability
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuerySharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery
 
Intro to SharePoint Web Services
Intro to SharePoint Web ServicesIntro to SharePoint Web Services
Intro to SharePoint Web Services
 
Introduction to StratusForms #SayNoToInfoPath
Introduction to StratusForms #SayNoToInfoPathIntroduction to StratusForms #SayNoToInfoPath
Introduction to StratusForms #SayNoToInfoPath
 
SharePoint Performance
SharePoint PerformanceSharePoint Performance
SharePoint Performance
 
SharePoint and the User Interface with JavaScript
SharePoint and the User Interface with JavaScriptSharePoint and the User Interface with JavaScript
SharePoint and the User Interface with JavaScript
 

Ähnlich wie Introduction to using jQuery with SharePoint

SharePoint 2010 Application Development Overview
SharePoint 2010 Application Development OverviewSharePoint 2010 Application Development Overview
SharePoint 2010 Application Development OverviewRob Windsor
 
Advanced Web Development
Advanced Web DevelopmentAdvanced Web Development
Advanced Web DevelopmentRobert J. Stein
 
Session on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh GundechaSession on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh GundechaAgile Testing Alliance
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConThe SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConSPTechCon
 
jQuery Tips Tricks Trivia
jQuery Tips Tricks TriviajQuery Tips Tricks Trivia
jQuery Tips Tricks TriviaCognizant
 
Approaches to mobile site development
Approaches to mobile site developmentApproaches to mobile site development
Approaches to mobile site developmentErik Mitchell
 
Dog food conference creating modular webparts with require js in sharepoint
Dog food conference   creating modular webparts with require js in sharepointDog food conference   creating modular webparts with require js in sharepoint
Dog food conference creating modular webparts with require js in sharepointfahey252
 
Ajax toolkit framework
Ajax toolkit frameworkAjax toolkit framework
Ajax toolkit frameworkSunil Kumar
 
Miguel Alberto Flores Torres AM (1)
Miguel Alberto Flores Torres AM (1)Miguel Alberto Flores Torres AM (1)
Miguel Alberto Flores Torres AM (1)Miguel Alberto
 
web development 7.pptx
web development 7.pptxweb development 7.pptx
web development 7.pptxharshit762481
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQueryAnil Kumar
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...Mark Leusink
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...Mark Roden
 
No Feature Solutions with SharePoint
No Feature Solutions with SharePointNo Feature Solutions with SharePoint
No Feature Solutions with SharePointmikehuguet
 
State of modern web technologies: an introduction
State of modern web technologies: an introductionState of modern web technologies: an introduction
State of modern web technologies: an introductionMichael Ahearn
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...Fabio Franzini
 
Red Hat JBoss BRMS and BPMS Workbench and Rich Client Technology
Red Hat JBoss BRMS and BPMS Workbench and Rich Client TechnologyRed Hat JBoss BRMS and BPMS Workbench and Rich Client Technology
Red Hat JBoss BRMS and BPMS Workbench and Rich Client TechnologyMark Proctor
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSmurtazahaveliwala
 
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Anupam Ranku
 

Ähnlich wie Introduction to using jQuery with SharePoint (20)

SharePoint 2010 Application Development Overview
SharePoint 2010 Application Development OverviewSharePoint 2010 Application Development Overview
SharePoint 2010 Application Development Overview
 
Advanced Web Development
Advanced Web DevelopmentAdvanced Web Development
Advanced Web Development
 
Session on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh GundechaSession on Selenium Powertools by Unmesh Gundecha
Session on Selenium Powertools by Unmesh Gundecha
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConThe SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
 
jQuery Tips Tricks Trivia
jQuery Tips Tricks TriviajQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
 
Approaches to mobile site development
Approaches to mobile site developmentApproaches to mobile site development
Approaches to mobile site development
 
Dog food conference creating modular webparts with require js in sharepoint
Dog food conference   creating modular webparts with require js in sharepointDog food conference   creating modular webparts with require js in sharepoint
Dog food conference creating modular webparts with require js in sharepoint
 
Ajax toolkit framework
Ajax toolkit frameworkAjax toolkit framework
Ajax toolkit framework
 
Miguel Alberto Flores Torres AM (1)
Miguel Alberto Flores Torres AM (1)Miguel Alberto Flores Torres AM (1)
Miguel Alberto Flores Torres AM (1)
 
web development 7.pptx
web development 7.pptxweb development 7.pptx
web development 7.pptx
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
 
No Feature Solutions with SharePoint
No Feature Solutions with SharePointNo Feature Solutions with SharePoint
No Feature Solutions with SharePoint
 
Intro to Application Express
Intro to Application ExpressIntro to Application Express
Intro to Application Express
 
State of modern web technologies: an introduction
State of modern web technologies: an introductionState of modern web technologies: an introduction
State of modern web technologies: an introduction
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
Red Hat JBoss BRMS and BPMS Workbench and Rich Client Technology
Red Hat JBoss BRMS and BPMS Workbench and Rich Client TechnologyRed Hat JBoss BRMS and BPMS Workbench and Rich Client Technology
Red Hat JBoss BRMS and BPMS Workbench and Rich Client Technology
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
 
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
 

Mehr von Rene Modery

TeamsFest - Integrating Microsoft Teams and PowerApps
TeamsFest - Integrating Microsoft Teams and PowerAppsTeamsFest - Integrating Microsoft Teams and PowerApps
TeamsFest - Integrating Microsoft Teams and PowerAppsRene Modery
 
Global Azure Bootcamp (Singapore) - Effectively using Azure DevOps in Microso...
Global Azure Bootcamp (Singapore) - Effectively using Azure DevOps in Microso...Global Azure Bootcamp (Singapore) - Effectively using Azure DevOps in Microso...
Global Azure Bootcamp (Singapore) - Effectively using Azure DevOps in Microso...Rene Modery
 
aOS Kuala Lumpur - Migrating to SharePoint Online - Real-life Experiences
aOS Kuala Lumpur - Migrating to SharePoint Online - Real-life ExperiencesaOS Kuala Lumpur - Migrating to SharePoint Online - Real-life Experiences
aOS Kuala Lumpur - Migrating to SharePoint Online - Real-life ExperiencesRene Modery
 
SharePoint Online vs On-premises vs Hybrid – 2016 edition
SharePoint Online vs On-premises vs Hybrid – 2016 editionSharePoint Online vs On-premises vs Hybrid – 2016 edition
SharePoint Online vs On-premises vs Hybrid – 2016 editionRene Modery
 
Microsoft PowerApps
Microsoft PowerAppsMicrosoft PowerApps
Microsoft PowerAppsRene Modery
 
Introduction to Azure Machine Learning
Introduction to Azure Machine LearningIntroduction to Azure Machine Learning
Introduction to Azure Machine LearningRene Modery
 
SPBiz - Practical Advice for developing your SharePoint Roadmap
SPBiz - Practical Advice for developing your SharePoint RoadmapSPBiz - Practical Advice for developing your SharePoint Roadmap
SPBiz - Practical Advice for developing your SharePoint RoadmapRene Modery
 
Office 365 - always the latest and greatest or too fast for you?
Office 365 - always the latest and greatest or too fast for you?Office 365 - always the latest and greatest or too fast for you?
Office 365 - always the latest and greatest or too fast for you?Rene Modery
 
ESPC14 - T13 - Implementing a Hybrid SharePoint 2013 and Office 365 environment
ESPC14 - T13 - Implementing a Hybrid SharePoint 2013 and Office 365 environmentESPC14 - T13 - Implementing a Hybrid SharePoint 2013 and Office 365 environment
ESPC14 - T13 - Implementing a Hybrid SharePoint 2013 and Office 365 environmentRene Modery
 
ESPC14 - T23 - SharePoint Online vs On-Premises vs Hosted - Making the Right ...
ESPC14 - T23 - SharePoint Online vs On-Premises vs Hosted - Making the Right ...ESPC14 - T23 - SharePoint Online vs On-Premises vs Hosted - Making the Right ...
ESPC14 - T23 - SharePoint Online vs On-Premises vs Hosted - Making the Right ...Rene Modery
 
Hybrid SharePoint 2013 and Office 365 environments for decision makers
Hybrid SharePoint 2013 and Office 365 environments for decision makersHybrid SharePoint 2013 and Office 365 environments for decision makers
Hybrid SharePoint 2013 and Office 365 environments for decision makersRene Modery
 
Automating Office 365 with PowerShell
Automating Office 365 with PowerShellAutomating Office 365 with PowerShell
Automating Office 365 with PowerShellRene Modery
 
AIIM Webinar - SharePoint 2013 - clouding the issues?
AIIM Webinar - SharePoint 2013 - clouding the issues?AIIM Webinar - SharePoint 2013 - clouding the issues?
AIIM Webinar - SharePoint 2013 - clouding the issues?Rene Modery
 
ShareConf 2013 - Implementierung von Hybridumgebungen mit SharePoint 2013 und...
ShareConf 2013 - Implementierung von Hybridumgebungen mit SharePoint 2013 und...ShareConf 2013 - Implementierung von Hybridumgebungen mit SharePoint 2013 und...
ShareConf 2013 - Implementierung von Hybridumgebungen mit SharePoint 2013 und...Rene Modery
 
Office 365 and SharePoint 2013 Hybrid Environments
Office 365 and SharePoint 2013 Hybrid EnvironmentsOffice 365 and SharePoint 2013 Hybrid Environments
Office 365 and SharePoint 2013 Hybrid EnvironmentsRene Modery
 
Intro: SharePoint 2013 Apps for IT Pros
Intro: SharePoint 2013 Apps for IT ProsIntro: SharePoint 2013 Apps for IT Pros
Intro: SharePoint 2013 Apps for IT ProsRene Modery
 
Connecting Office 365 and Windows 8 HTML/JavaScript Apps
Connecting Office 365 and Windows 8 HTML/JavaScript AppsConnecting Office 365 and Windows 8 HTML/JavaScript Apps
Connecting Office 365 and Windows 8 HTML/JavaScript AppsRene Modery
 
SEASPC - Rene Modery - Creating an Employee Engaging Intranet Homepage
SEASPC - Rene Modery - Creating an Employee Engaging Intranet HomepageSEASPC - Rene Modery - Creating an Employee Engaging Intranet Homepage
SEASPC - Rene Modery - Creating an Employee Engaging Intranet HomepageRene Modery
 
Experiences with two AsiaPacific-wide SharePoint Deployments - SharePoint Con...
Experiences with two AsiaPacific-wide SharePoint Deployments - SharePoint Con...Experiences with two AsiaPacific-wide SharePoint Deployments - SharePoint Con...
Experiences with two AsiaPacific-wide SharePoint Deployments - SharePoint Con...Rene Modery
 

Mehr von Rene Modery (19)

TeamsFest - Integrating Microsoft Teams and PowerApps
TeamsFest - Integrating Microsoft Teams and PowerAppsTeamsFest - Integrating Microsoft Teams and PowerApps
TeamsFest - Integrating Microsoft Teams and PowerApps
 
Global Azure Bootcamp (Singapore) - Effectively using Azure DevOps in Microso...
Global Azure Bootcamp (Singapore) - Effectively using Azure DevOps in Microso...Global Azure Bootcamp (Singapore) - Effectively using Azure DevOps in Microso...
Global Azure Bootcamp (Singapore) - Effectively using Azure DevOps in Microso...
 
aOS Kuala Lumpur - Migrating to SharePoint Online - Real-life Experiences
aOS Kuala Lumpur - Migrating to SharePoint Online - Real-life ExperiencesaOS Kuala Lumpur - Migrating to SharePoint Online - Real-life Experiences
aOS Kuala Lumpur - Migrating to SharePoint Online - Real-life Experiences
 
SharePoint Online vs On-premises vs Hybrid – 2016 edition
SharePoint Online vs On-premises vs Hybrid – 2016 editionSharePoint Online vs On-premises vs Hybrid – 2016 edition
SharePoint Online vs On-premises vs Hybrid – 2016 edition
 
Microsoft PowerApps
Microsoft PowerAppsMicrosoft PowerApps
Microsoft PowerApps
 
Introduction to Azure Machine Learning
Introduction to Azure Machine LearningIntroduction to Azure Machine Learning
Introduction to Azure Machine Learning
 
SPBiz - Practical Advice for developing your SharePoint Roadmap
SPBiz - Practical Advice for developing your SharePoint RoadmapSPBiz - Practical Advice for developing your SharePoint Roadmap
SPBiz - Practical Advice for developing your SharePoint Roadmap
 
Office 365 - always the latest and greatest or too fast for you?
Office 365 - always the latest and greatest or too fast for you?Office 365 - always the latest and greatest or too fast for you?
Office 365 - always the latest and greatest or too fast for you?
 
ESPC14 - T13 - Implementing a Hybrid SharePoint 2013 and Office 365 environment
ESPC14 - T13 - Implementing a Hybrid SharePoint 2013 and Office 365 environmentESPC14 - T13 - Implementing a Hybrid SharePoint 2013 and Office 365 environment
ESPC14 - T13 - Implementing a Hybrid SharePoint 2013 and Office 365 environment
 
ESPC14 - T23 - SharePoint Online vs On-Premises vs Hosted - Making the Right ...
ESPC14 - T23 - SharePoint Online vs On-Premises vs Hosted - Making the Right ...ESPC14 - T23 - SharePoint Online vs On-Premises vs Hosted - Making the Right ...
ESPC14 - T23 - SharePoint Online vs On-Premises vs Hosted - Making the Right ...
 
Hybrid SharePoint 2013 and Office 365 environments for decision makers
Hybrid SharePoint 2013 and Office 365 environments for decision makersHybrid SharePoint 2013 and Office 365 environments for decision makers
Hybrid SharePoint 2013 and Office 365 environments for decision makers
 
Automating Office 365 with PowerShell
Automating Office 365 with PowerShellAutomating Office 365 with PowerShell
Automating Office 365 with PowerShell
 
AIIM Webinar - SharePoint 2013 - clouding the issues?
AIIM Webinar - SharePoint 2013 - clouding the issues?AIIM Webinar - SharePoint 2013 - clouding the issues?
AIIM Webinar - SharePoint 2013 - clouding the issues?
 
ShareConf 2013 - Implementierung von Hybridumgebungen mit SharePoint 2013 und...
ShareConf 2013 - Implementierung von Hybridumgebungen mit SharePoint 2013 und...ShareConf 2013 - Implementierung von Hybridumgebungen mit SharePoint 2013 und...
ShareConf 2013 - Implementierung von Hybridumgebungen mit SharePoint 2013 und...
 
Office 365 and SharePoint 2013 Hybrid Environments
Office 365 and SharePoint 2013 Hybrid EnvironmentsOffice 365 and SharePoint 2013 Hybrid Environments
Office 365 and SharePoint 2013 Hybrid Environments
 
Intro: SharePoint 2013 Apps for IT Pros
Intro: SharePoint 2013 Apps for IT ProsIntro: SharePoint 2013 Apps for IT Pros
Intro: SharePoint 2013 Apps for IT Pros
 
Connecting Office 365 and Windows 8 HTML/JavaScript Apps
Connecting Office 365 and Windows 8 HTML/JavaScript AppsConnecting Office 365 and Windows 8 HTML/JavaScript Apps
Connecting Office 365 and Windows 8 HTML/JavaScript Apps
 
SEASPC - Rene Modery - Creating an Employee Engaging Intranet Homepage
SEASPC - Rene Modery - Creating an Employee Engaging Intranet HomepageSEASPC - Rene Modery - Creating an Employee Engaging Intranet Homepage
SEASPC - Rene Modery - Creating an Employee Engaging Intranet Homepage
 
Experiences with two AsiaPacific-wide SharePoint Deployments - SharePoint Con...
Experiences with two AsiaPacific-wide SharePoint Deployments - SharePoint Con...Experiences with two AsiaPacific-wide SharePoint Deployments - SharePoint Con...
Experiences with two AsiaPacific-wide SharePoint Deployments - SharePoint Con...
 

Kürzlich hochgeladen

Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxKunal Gupta
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactivestartupro
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationBuild Intuit
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2DianaGray10
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureAntonio de Llamas
 
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024BookNet Canada
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceOpsTree solutions
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...BookNet Canada
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
Software Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerSoftware Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerAnchore
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 

Kürzlich hochgeladen (20)

Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptx
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactive
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientation
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for Rotogravure
 
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer Experience
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
Software Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerSoftware Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey Hightower
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 

Introduction to using jQuery with SharePoint

  • 1. Introduction to using jQuery with SharePoint
  • 2. About Me Working fulltime with SharePoint since2007 2 Asia-Pacific wide rollouts, involved inall kinds of things: Planning, Governance, Branding, Requirements Gathering, Solution Implementation, Training, Workflows, ... Not Administrator, not Developer, but:Consultant, Trainer, Designer, Power User, „Developer Light“, Analyst, Architect, ...If it‘s SharePoint, I‘m doing it! (or at least involved...) Rene Modery Web Program Manager
  • 3. What is this session about? What is jQuery Some jQuery Basics Selection, Modification, Events, AJAX How can jQuery be used within SharePoint Demos, Demos, Demos! DEMO
  • 4. © Information Most demo contents are inspired by or directly taken from other people of the great community (Original sources will be indicated!), incl.: Marc D. Anderson Jason MacKenzie WaldekMastykarz Alexander Bautz Key Point:The SharePoint and jQuery communities are awesome!
  • 5. What is jQuery? “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” (jquery.com) Select elements, do things!
  • 6. What can it do? DEMO
  • 7. What do I need to know? JavaScript HTML & CSS Some CAML
  • 8. Development Support Tools Editors Notepad++ SharePoint Designer Visual Studio Debuggers IE Developer Tools + Fiddler (proxy) Firebug + FireQuery + FireFinder
  • 9. jQuery Basics – Include Reference jquery.js within your page Either a “local” version or on a CDN <script src="jquery.js"></script>or<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> Full version (for development and debugging!) & minified (production!) available
  • 10. jQuery Basics – $() Place your code within jQuery(document).ready() Code gets executed when DOM is ready jQuery(document).ready(function() { alert("hallo");}); $(document).ready() or short form $() can also be used: $(function() { alert("hallo");}); DEMO
  • 11. jQuery Basics - Selection Multiple options to select elements, can also be combined DEMO
  • 12. jQuery Basics – Manipulation DEMO
  • 13. jQuery - AJAX Different ways to make AJAX calls with jQuery
  • 14. jQuery & SharePoint –Why & When? Why? Easy to implement! Quick results! Many possibilities – UI, web services, extending DVWP, … When? No managed code allowed No developer available Managed code development more costly & resource intensive
  • 15. Adding jQuery to SharePoint Add call to jquery.js into Content Editor WebPart (CEWP) or Master Page Add your own code into a CEWP or (better!) into a file stored in a central location
  • 16. Selecting SharePoint Elements Use IE Developer Tools / Firebug to find IDs, classes, etc DEMO
  • 17. Example: Content Modification - KPIs Simple content modification: select element, replace it DEMO
  • 18. Example: Slideshow Show pictures from Image Library with fade effect DEMO Original code by WaldekMastykarzhttp://blog.mastykarz.nl/images-slideshow-sharepoint-2007-jquery/
  • 19. Example: Column Visibility Show/hide columns in a list/library dynamically Original code from Alexander Bautz, http://www.endusersharepoint.com/2010/04/23/sharepoint-toggle-column-visibility-in-list-view/ DEMO
  • 20. Calling SharePoint Webservices Prepare SOAP envelope Call Webservice Process results 1 2 3 DEMO Example from: Professional SharePoint 2010 Branding and User Interface Design
  • 21. SPServices “This is a jQuery library which abstracts SharePoint's Web Services and makes them easier to use. It also includes functions which use the various Web Service operations to provide more useful (and cool) capabilities” (spservices.codeplex.com) : Web ServicesCheck SPServices documentation for detailed list Form EnhancementsEnhance forms with cascading dropdowns, related info, unique value, … UtilitiesGet current site, get current user, get query string, …
  • 22. SPServices – Related Data Use $().SPServices.SPDisplayRelatedInfoif you want to display related data for fields when filling a form. DEMO
  • 23. SPServices – Cascading Dropdowns Create a relationship between two or more dropdown selections DEMO
  • 24. Providing Filter Dropdowns Using SPServices to fetch query parameters as well as the current site (NOT the whole URL!) Using jQuery to load and display SharePoint’s filters DEMO
  • 25. What did we cover today? This much! There’s so much more to learn and do!
  • 26. Where can I find out more? Official Site: http://www.jquery.com SPServices: http://spservices.codeplex.com Great overview of articles, books, etc: http://www.learningjquery.com/2010/07/great-ways-to-learn-jquery Marc D Anderson’s Blog at http://sympmarc.com Chris O’Brien’s Blog at http://www.sharepointnutsandbolts.com/2010/10/sp2010-ajax-part-1-boiling-jquery-down.html Examples: http://www.nothingbutsharepoint.com