SlideShare a Scribd company logo
Introduction to using jQuery with SharePoint
About MeWorking fulltime with SharePoint since20072 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 ModeryWeb Program Manager
What is this session about?What is jQuerySome jQuery BasicsSelection, Modification, Events, AJAXHow can jQuery be used within SharePointDemos, Demos, Demos!DEMO
© InformationMost demo contents are inspired by or directly taken from other people of the great community (Original sources will be indicated!), incl.:Marc D. AndersonJason MacKenzieWaldekMastykarzAlexander BautzKey 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?JavaScriptHTML & CSSSome CAML
Development Support ToolsEditorsNotepad++SharePoint DesignerVisual StudioDebuggersIE Developer Tools + Fiddler (proxy)Firebug + FireQuery + FireFinder
jQuery Basics – IncludeReference jquery.js within your pageEither 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 readyjQuery(document).ready(function() {   alert("hallo");});$(document).ready() or short form $() can also be used:$(function() {  alert("hallo");});DEMO
jQuery Basics - SelectionMultiple options to select elements, can also be combinedDEMO
jQuery Basics – ManipulationDEMO
jQuery - AJAXDifferent 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 allowedNo developer availableManaged code development more costly & resource intensive
Adding jQuery to SharePointAdd call to jquery.js into Content Editor WebPart (CEWP) or Master PageAdd your own code into a CEWP or (better!) into a file stored in a central location
Selecting SharePoint ElementsUse IE Developer Tools / Firebug to find IDs, classes, etcDEMO
Example: Content Modification - KPIsSimple content modification: select element, replace itDEMO
Example: SlideshowShow pictures from Image Library with fade effectDEMOOriginal code by WaldekMastykarzhttp://blog.mastykarz.nl/images-slideshow-sharepoint-2007-jquery/
Example: Column VisibilityShow/hide columns in a list/library dynamicallyOriginal code from Alexander Bautz, http://www.endusersharepoint.com/2010/04/23/sharepoint-toggle-column-visibility-in-list-view/DEMO
Calling SharePoint WebservicesPrepare SOAP envelopeCall WebserviceProcess results123DEMOExample 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 listForm EnhancementsEnhance forms with cascading dropdowns, related info, unique value, …UtilitiesGet current site, get current user, get query string, …
SPServices – Related DataUse $().SPServices.SPDisplayRelatedInfoif you want to display related data for fields when filling a form. DEMO
SPServices – Cascading DropdownsCreate a relationship between two or more dropdown selectionsDEMO
Providing Filter DropdownsUsing SPServices to fetch query parameters as well as the current site (NOT the whole URL!)Using jQuery to load and display SharePoint’s filtersDEMO
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.comSPServices: http://spservices.codeplex.comGreat overview of articles, books, etc: http://www.learningjquery.com/2010/07/great-ways-to-learn-jqueryMarc D Anderson’s Blog at http://sympmarc.comChris O’Brien’s Blog at http://www.sharepointnutsandbolts.com/2010/10/sp2010-ajax-part-1-boiling-jquery-down.htmlExamples: http://www.nothingbutsharepoint.com
Ad

Recommended

The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14
Mark Rackley
 
Transform SharePoint default list forms with HTML, CSS and JavaScript
Transform SharePoint default list forms with HTML, CSS and JavaScript
John Calvert
 
SEF2013 - A jQuery Primer for SharePoint
SEF2013 - A jQuery Primer for SharePoint
Marc D Anderson
 
SPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuery
Mark Rackley
 
TulsaTechFest - Maximize SharePoint UX with free jQuery libraries
TulsaTechFest - Maximize SharePoint UX with free jQuery libraries
Mark Rackley
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuide
Mark Rackley
 
SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentials
Mark Rackley
 
SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013
Mark Rackley
 
SPTechCon Dev Days - Third Party jQuery Libraries
SPTechCon Dev Days - Third Party jQuery Libraries
Mark Rackley
 
The SharePoint & jQuery Guide
The SharePoint & jQuery Guide
Mark Rackley
 
Transform SharePoint List Forms with HTML and CSS
Transform SharePoint List Forms with HTML and CSS
John Calvert
 
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
Mark Rackley
 
Content by query web part
Content by query web part
IslamKhattab
 
SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014
Mark Rackley
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
Mark Rackley
 
SEF2013 - Create a Business Solution, Step by Step, with No Managed Code
SEF2013 - Create a Business Solution, Step by Step, with No Managed Code
Marc D Anderson
 
O365 Saturday - Deepdive SharePoint Client Side Rendering
O365 Saturday - Deepdive SharePoint Client Side Rendering
Riwut Libinuko
 
SPTechCon Boston 2015 - Overcoming SharePoint Limitations
SPTechCon Boston 2015 - Overcoming SharePoint Limitations
Mark Rackley
 
SharePoint REST vs CSOM
SharePoint REST vs CSOM
Mark Rackley
 
(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide
Mark Rackley
 
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have known
Mark Rackley
 
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePoint
Mark Rackley
 
Using jQuery to Maximize Form Usability
Using jQuery to Maximize Form Usability
Mark Rackley
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery
Mark Rackley
 
Intro to SharePoint Web Services
Intro to SharePoint Web Services
Mark Rackley
 
Introduction to StratusForms #SayNoToInfoPath
Introduction to StratusForms #SayNoToInfoPath
Mark Rackley
 
SharePoint Performance
SharePoint Performance
Jeroen Schoenmakers
 
SharePoint and the User Interface with JavaScript
SharePoint and the User Interface with JavaScript
Regroove
 
SharePoint and jQuery Essentials
SharePoint and jQuery Essentials
Mark Rackley
 
Spsemea j query
Spsemea j query
Mark Rackley
 

More Related Content

What's hot (20)

SPTechCon Dev Days - Third Party jQuery Libraries
SPTechCon Dev Days - Third Party jQuery Libraries
Mark Rackley
 
The SharePoint & jQuery Guide
The SharePoint & jQuery Guide
Mark Rackley
 
Transform SharePoint List Forms with HTML and CSS
Transform SharePoint List Forms with HTML and CSS
John Calvert
 
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
Mark Rackley
 
Content by query web part
Content by query web part
IslamKhattab
 
SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014
Mark Rackley
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
Mark Rackley
 
SEF2013 - Create a Business Solution, Step by Step, with No Managed Code
SEF2013 - Create a Business Solution, Step by Step, with No Managed Code
Marc D Anderson
 
O365 Saturday - Deepdive SharePoint Client Side Rendering
O365 Saturday - Deepdive SharePoint Client Side Rendering
Riwut Libinuko
 
SPTechCon Boston 2015 - Overcoming SharePoint Limitations
SPTechCon Boston 2015 - Overcoming SharePoint Limitations
Mark Rackley
 
SharePoint REST vs CSOM
SharePoint REST vs CSOM
Mark Rackley
 
(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide
Mark Rackley
 
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have known
Mark Rackley
 
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePoint
Mark Rackley
 
Using jQuery to Maximize Form Usability
Using jQuery to Maximize Form Usability
Mark Rackley
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery
Mark Rackley
 
Intro to SharePoint Web Services
Intro to SharePoint Web Services
Mark Rackley
 
Introduction to StratusForms #SayNoToInfoPath
Introduction to StratusForms #SayNoToInfoPath
Mark Rackley
 
SharePoint Performance
SharePoint Performance
Jeroen Schoenmakers
 
SharePoint and the User Interface with JavaScript
SharePoint and the User Interface with JavaScript
Regroove
 
SPTechCon Dev Days - Third Party jQuery Libraries
SPTechCon Dev Days - Third Party jQuery Libraries
Mark Rackley
 
The SharePoint & jQuery Guide
The SharePoint & jQuery Guide
Mark Rackley
 
Transform SharePoint List Forms with HTML and CSS
Transform SharePoint List Forms with HTML and CSS
John Calvert
 
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
Mark Rackley
 
Content by query web part
Content by query web part
IslamKhattab
 
SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014
Mark Rackley
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
Mark Rackley
 
SEF2013 - Create a Business Solution, Step by Step, with No Managed Code
SEF2013 - Create a Business Solution, Step by Step, with No Managed Code
Marc D Anderson
 
O365 Saturday - Deepdive SharePoint Client Side Rendering
O365 Saturday - Deepdive SharePoint Client Side Rendering
Riwut Libinuko
 
SPTechCon Boston 2015 - Overcoming SharePoint Limitations
SPTechCon Boston 2015 - Overcoming SharePoint Limitations
Mark Rackley
 
SharePoint REST vs CSOM
SharePoint REST vs CSOM
Mark Rackley
 
(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide
Mark Rackley
 
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have known
Mark Rackley
 
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePoint
Mark Rackley
 
Using jQuery to Maximize Form Usability
Using jQuery to Maximize Form Usability
Mark Rackley
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery
Mark Rackley
 
Intro to SharePoint Web Services
Intro to SharePoint Web Services
Mark Rackley
 
Introduction to StratusForms #SayNoToInfoPath
Introduction to StratusForms #SayNoToInfoPath
Mark Rackley
 
SharePoint and the User Interface with JavaScript
SharePoint and the User Interface with JavaScript
Regroove
 

Similar to Introduction to using jQuery with SharePoint (20)

SharePoint and jQuery Essentials
SharePoint and jQuery Essentials
Mark Rackley
 
Spsemea j query
Spsemea j query
Mark Rackley
 
Spsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jquery
Marijn Somers
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
Mark Rackley
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
SPTechCon
 
Utilizing jQuery in SharePoint: Get More Done Faster
Utilizing jQuery in SharePoint: Get More Done Faster
Mark Rackley
 
SPSTC - SharePoint & jQuery Essentials
SPSTC - SharePoint & jQuery Essentials
Mark Rackley
 
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
Mark Rackley
 
SharePoint Saturday NYC - SharePoint and jQuery, what I wish I would have kno...
SharePoint Saturday NYC - SharePoint and jQuery, what I wish I would have kno...
Mark Rackley
 
jQuery programming with visual web part
jQuery programming with visual web part
Senthamil Selvan
 
Power to the People: Manipulating SharePoint with Client-Side JavaScript
Power to the People: Manipulating SharePoint with Client-Side JavaScript
PeterBrunone
 
jQuery Rescue Adventure
jQuery Rescue Adventure
Allegient
 
Introduction to JQuery
Introduction to JQuery
Muhammad Afzal Qureshi
 
2011 - SharePoint + jQuery
2011 - SharePoint + jQuery
Chris O'Connor
 
2011 - jQuery + SharePoint (TechEd)
2011 - jQuery + SharePoint (TechEd)
Chris O'Connor
 
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
SPTechCon
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Sean Burgess
 
Kick start with j query
Kick start with j query
Md. Ziaul Haq
 
Web technologies-course 11.pptx
Web technologies-course 11.pptx
Stefan Oprea
 
jQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and Performance
Jonas De Smet
 
SharePoint and jQuery Essentials
SharePoint and jQuery Essentials
Mark Rackley
 
Spsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jquery
Marijn Somers
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
Mark Rackley
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
SPTechCon
 
Utilizing jQuery in SharePoint: Get More Done Faster
Utilizing jQuery in SharePoint: Get More Done Faster
Mark Rackley
 
SPSTC - SharePoint & jQuery Essentials
SPSTC - SharePoint & jQuery Essentials
Mark Rackley
 
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
Mark Rackley
 
SharePoint Saturday NYC - SharePoint and jQuery, what I wish I would have kno...
SharePoint Saturday NYC - SharePoint and jQuery, what I wish I would have kno...
Mark Rackley
 
jQuery programming with visual web part
jQuery programming with visual web part
Senthamil Selvan
 
Power to the People: Manipulating SharePoint with Client-Side JavaScript
Power to the People: Manipulating SharePoint with Client-Side JavaScript
PeterBrunone
 
jQuery Rescue Adventure
jQuery Rescue Adventure
Allegient
 
2011 - SharePoint + jQuery
2011 - SharePoint + jQuery
Chris O'Connor
 
2011 - jQuery + SharePoint (TechEd)
2011 - jQuery + SharePoint (TechEd)
Chris O'Connor
 
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
SPTechCon
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Sean Burgess
 
Kick start with j query
Kick start with j query
Md. Ziaul Haq
 
Web technologies-course 11.pptx
Web technologies-course 11.pptx
Stefan Oprea
 
jQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and Performance
Jonas De Smet
 
Ad

More from Rene Modery (19)

TeamsFest - Integrating Microsoft Teams and PowerApps
TeamsFest - Integrating Microsoft Teams and PowerApps
Rene Modery
 
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 Experiences
Rene Modery
 
SharePoint Online vs On-premises vs Hybrid – 2016 edition
SharePoint Online vs On-premises vs Hybrid – 2016 edition
Rene Modery
 
Microsoft PowerApps
Microsoft PowerApps
Rene Modery
 
Introduction to Azure Machine Learning
Introduction to Azure Machine Learning
Rene Modery
 
SPBiz - Practical Advice for developing your SharePoint Roadmap
SPBiz - Practical Advice for developing your SharePoint Roadmap
Rene 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?
Rene Modery
 
ESPC14 - T13 - Implementing a Hybrid SharePoint 2013 and Office 365 environment
ESPC14 - T13 - Implementing a Hybrid SharePoint 2013 and Office 365 environment
Rene 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 ...
Rene Modery
 
Hybrid SharePoint 2013 and Office 365 environments for decision makers
Hybrid SharePoint 2013 and Office 365 environments for decision makers
Rene Modery
 
Automating Office 365 with PowerShell
Automating Office 365 with PowerShell
Rene Modery
 
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...
Rene Modery
 
Office 365 and SharePoint 2013 Hybrid Environments
Office 365 and SharePoint 2013 Hybrid Environments
Rene Modery
 
Intro: SharePoint 2013 Apps for IT Pros
Intro: SharePoint 2013 Apps for IT Pros
Rene Modery
 
Connecting Office 365 and Windows 8 HTML/JavaScript Apps
Connecting Office 365 and Windows 8 HTML/JavaScript Apps
Rene Modery
 
SEASPC - Rene Modery - Creating an Employee Engaging Intranet Homepage
SEASPC - Rene Modery - Creating an Employee Engaging Intranet Homepage
Rene Modery
 
Experiences with two AsiaPacific-wide SharePoint Deployments - SharePoint Con...
Experiences with two AsiaPacific-wide SharePoint Deployments - SharePoint Con...
Rene Modery
 
TeamsFest - Integrating Microsoft Teams and PowerApps
TeamsFest - Integrating Microsoft Teams and PowerApps
Rene Modery
 
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 Experiences
Rene Modery
 
SharePoint Online vs On-premises vs Hybrid – 2016 edition
SharePoint Online vs On-premises vs Hybrid – 2016 edition
Rene Modery
 
Microsoft PowerApps
Microsoft PowerApps
Rene Modery
 
Introduction to Azure Machine Learning
Introduction to Azure Machine Learning
Rene Modery
 
SPBiz - Practical Advice for developing your SharePoint Roadmap
SPBiz - Practical Advice for developing your SharePoint Roadmap
Rene 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?
Rene Modery
 
ESPC14 - T13 - Implementing a Hybrid SharePoint 2013 and Office 365 environment
ESPC14 - T13 - Implementing a Hybrid SharePoint 2013 and Office 365 environment
Rene 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 ...
Rene Modery
 
Hybrid SharePoint 2013 and Office 365 environments for decision makers
Hybrid SharePoint 2013 and Office 365 environments for decision makers
Rene Modery
 
Automating Office 365 with PowerShell
Automating Office 365 with PowerShell
Rene Modery
 
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...
Rene Modery
 
Office 365 and SharePoint 2013 Hybrid Environments
Office 365 and SharePoint 2013 Hybrid Environments
Rene Modery
 
Intro: SharePoint 2013 Apps for IT Pros
Intro: SharePoint 2013 Apps for IT Pros
Rene Modery
 
Connecting Office 365 and Windows 8 HTML/JavaScript Apps
Connecting Office 365 and Windows 8 HTML/JavaScript Apps
Rene Modery
 
SEASPC - Rene Modery - Creating an Employee Engaging Intranet Homepage
SEASPC - Rene Modery - Creating an Employee Engaging Intranet Homepage
Rene Modery
 
Experiences with two AsiaPacific-wide SharePoint Deployments - SharePoint Con...
Experiences with two AsiaPacific-wide SharePoint Deployments - SharePoint Con...
Rene Modery
 
Ad

Recently uploaded (20)

Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
Edge AI and Vision Alliance
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
Edge AI and Vision Alliance
 
Data Validation and System Interoperability
Data Validation and System Interoperability
Safe Software
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 
SAP Modernization Strategies for a Successful S/4HANA Journey.pdf
SAP Modernization Strategies for a Successful S/4HANA Journey.pdf
Precisely
 
AI VIDEO MAGAZINE - June 2025 - r/aivideo
AI VIDEO MAGAZINE - June 2025 - r/aivideo
1pcity Studios, Inc
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...
Edge AI and Vision Alliance
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
Edge AI and Vision Alliance
 
Data Validation and System Interoperability
Data Validation and System Interoperability
Safe Software
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 
SAP Modernization Strategies for a Successful S/4HANA Journey.pdf
SAP Modernization Strategies for a Successful S/4HANA Journey.pdf
Precisely
 
AI VIDEO MAGAZINE - June 2025 - r/aivideo
AI VIDEO MAGAZINE - June 2025 - r/aivideo
1pcity Studios, Inc
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 

Introduction to using jQuery with SharePoint

  • 1. Introduction to using jQuery with SharePoint
  • 2. About MeWorking fulltime with SharePoint since20072 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 ModeryWeb Program Manager
  • 3. What is this session about?What is jQuerySome jQuery BasicsSelection, Modification, Events, AJAXHow can jQuery be used within SharePointDemos, Demos, Demos!DEMO
  • 4. © InformationMost demo contents are inspired by or directly taken from other people of the great community (Original sources will be indicated!), incl.:Marc D. AndersonJason MacKenzieWaldekMastykarzAlexander BautzKey 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?JavaScriptHTML & CSSSome CAML
  • 8. Development Support ToolsEditorsNotepad++SharePoint DesignerVisual StudioDebuggersIE Developer Tools + Fiddler (proxy)Firebug + FireQuery + FireFinder
  • 9. jQuery Basics – IncludeReference jquery.js within your pageEither 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 readyjQuery(document).ready(function() { alert("hallo");});$(document).ready() or short form $() can also be used:$(function() { alert("hallo");});DEMO
  • 11. jQuery Basics - SelectionMultiple options to select elements, can also be combinedDEMO
  • 12. jQuery Basics – ManipulationDEMO
  • 13. jQuery - AJAXDifferent 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 allowedNo developer availableManaged code development more costly & resource intensive
  • 15. Adding jQuery to SharePointAdd call to jquery.js into Content Editor WebPart (CEWP) or Master PageAdd your own code into a CEWP or (better!) into a file stored in a central location
  • 16. Selecting SharePoint ElementsUse IE Developer Tools / Firebug to find IDs, classes, etcDEMO
  • 17. Example: Content Modification - KPIsSimple content modification: select element, replace itDEMO
  • 18. Example: SlideshowShow pictures from Image Library with fade effectDEMOOriginal code by WaldekMastykarzhttp://blog.mastykarz.nl/images-slideshow-sharepoint-2007-jquery/
  • 19. Example: Column VisibilityShow/hide columns in a list/library dynamicallyOriginal code from Alexander Bautz, http://www.endusersharepoint.com/2010/04/23/sharepoint-toggle-column-visibility-in-list-view/DEMO
  • 20. Calling SharePoint WebservicesPrepare SOAP envelopeCall WebserviceProcess results123DEMOExample 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 listForm EnhancementsEnhance forms with cascading dropdowns, related info, unique value, …UtilitiesGet current site, get current user, get query string, …
  • 22. SPServices – Related DataUse $().SPServices.SPDisplayRelatedInfoif you want to display related data for fields when filling a form. DEMO
  • 23. SPServices – Cascading DropdownsCreate a relationship between two or more dropdown selectionsDEMO
  • 24. Providing Filter DropdownsUsing SPServices to fetch query parameters as well as the current site (NOT the whole URL!)Using jQuery to load and display SharePoint’s filtersDEMO
  • 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.comSPServices: http://spservices.codeplex.comGreat overview of articles, books, etc: http://www.learningjquery.com/2010/07/great-ways-to-learn-jqueryMarc D Anderson’s Blog at http://sympmarc.comChris O’Brien’s Blog at http://www.sharepointnutsandbolts.com/2010/10/sp2010-ajax-part-1-boiling-jquery-down.htmlExamples: http://www.nothingbutsharepoint.com