SlideShare a Scribd company logo
SharePoint Power Hour Mark Rackley
mrackley@paitgroup.com
A Power User’s Intro to jQuery Awesomeness in SharePoint
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Mark Rackley / Partner & CTO
• 20+ years software
architecture and
development experience
• Office 365 MVP, SharePoint
Junkie since 2007
• Event Organizer
(SharePointalooza.org)
• Blogger, Writer, Speaker
• Bacon aficionado
@mrackley
www.SharePointHillbilly.com
www.PaitGroup.com
www.SharePointaLooza.org
www.StratusForms.com
#SayNoToInfoPath
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Agenda
• What are we talking about?
• Why should you care?
• How to do it
• Best practices and things you should avoid doing
• Demos, examples, and where to find them
© 2016 PAIT Group http://www.paitgroup.com @mrackley
What are we talking about?
• Enhancing pages in SharePoint using JavaScript and jQuery
(developer stuff)
• It’s easy to do (all you need is a Content Editor/Script Editor
Web Part and a Document Library)
• The possibilities are pretty endless
• Dashboards
• Custom Forms
• Animations
• More organized and visually appealing SharePoint content
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Why Should You Care?
• SharePoint gets you MOST of the way there
• It makes SharePoint more visually appealing
• It makes SharePoint easier to use
• It’s simple (if you are careful)
• It’s only going to get more important
© 2016 PAIT Group http://www.paitgroup.com @mrackley
How (a Power User) Should do it
• Upload file(s) to a document library
• Users must have read access to library
• Create or edit an existing page
• Insert a Content Editor Web Part
• Link Content Editor Web Part to file you uploaded in
document library
• Ta and da…
DEMO: Add your first jQuery
script
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Best Practices for the Power User
• Understand the basics
• Functionality is generally made up of multiple files
• Some are stored in your document library
• Some are stored somewhere else
• Some may already to referenced
• Don’t reference a script more than once
• Don’t throw multiple scripts on a page and except them to work
• Don’t combine scripts and expect them to work
• Don’t mess with the script without understanding what you are
changing
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Anatomy of a Script
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Anatomy of a Script
• Script References
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Anatomy of a Script
• Style Sheet References
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Anatomy of a Script
• Additional Styles
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Anatomy of a Script
• HTML
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Anatomy of a Script
• JavaScript
Examples and Demos
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Tabbed Web Parts
• http://www.paitgroup.com/sharepoint-tabbed-web-
partshillbillytabs-3-0/
Place web parts on a page into tabs.
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Digital Signatures in SharePoint
• http://www.paitgroup.com/easy-digital-signatures-in-
sharepoint/
• Easy digital signatures for your lists and libraries
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Office 365 Video Portal
• http://www.paitgroup.com/integrate-your-office-365-video-
portal-with-sharepoint-online/
• Integrate your Office 365 Video Portal into your SharePoint
Online
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Tabify SharePoint Forms
• http://www.markrackley.net/2015/12/03/tabify-your-
sharepoint-forms/
Modify your SharePoint form so that the fields are displayed in
tabs
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Personalization & Custom Tiles
• http://www.paitgroup.com/personalize-your-sharepoint-
home-page-with-masonry/
Add responsive tiles to a page that can be used as links to
other pages or sites. Personalize tiles so that users only see
links that are relevant
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Cascading Drop Down Lists
• http://www.markrackley.net/2014/05/20/cascading-drop-
down-lists-in-sharepoint-office-365-using-rest/
Filter a drop down list based upon the value of another drop
down list.
© 2016 PAIT Group http://www.paitgroup.com @mrackley
Customize SharePoint Forms
• http://www.markrackley.net/2013/08/29/easy-custom-
layouts-for-default-sharepoint-forms/
Use HTML to transform a default form in SharePoint so that it
looks highly stylized
© 2016 PAIT Group http://www.paitgroup.com @mrackley
What’s next???
• Learn HTML, CSS, JavaScript
• http://www.pluralsight.com
• Create a page in SharePoint and play around
Thank you.
© 2015 PAIT Group June 29, 2015
Ad

More Related Content

What's hot (20)

SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014
Mark Rackley
 
SPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuerySPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuery
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 SharePointSPTechCon 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
 
The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14
Mark Rackley
 
Using jQuery to Maximize Form Usability
Using jQuery to Maximize Form UsabilityUsing jQuery to Maximize Form Usability
Using jQuery to Maximize Form Usability
Mark Rackley
 
A Power User's intro to jQuery awesomeness in SharePoint
A Power User's intro to jQuery awesomeness in SharePointA Power User's intro to jQuery awesomeness in SharePoint
A Power User's intro to jQuery awesomeness in SharePoint
Mark Rackley
 
Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint WorkshopIntroduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop
Mark Rackley
 
Utilizing jQuery in SharePoint: Get More Done Faster
Utilizing jQuery in SharePoint: Get More Done FasterUtilizing jQuery in SharePoint: Get More Done Faster
Utilizing jQuery in SharePoint: Get More Done Faster
Mark Rackley
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuide
Mark Rackley
 
SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013 SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013
Mark Rackley
 
What is SharePoint Development??
What is SharePoint Development??What is SharePoint Development??
What is SharePoint Development??
Mark Rackley
 
NOW I Get it!! What SharePoint IS and why I need it
NOW I Get it!! What SharePoint IS and why I need itNOW I Get it!! What SharePoint IS and why I need it
NOW I Get it!! What SharePoint IS and why I need it
Mark Rackley
 
The SharePoint & jQuery Guide
The SharePoint & jQuery GuideThe SharePoint & jQuery Guide
The SharePoint & jQuery Guide
Mark 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 known
Mark Rackley
 
SharePoint REST vs CSOM
SharePoint REST vs CSOMSharePoint REST vs CSOM
SharePoint REST vs CSOM
Mark Rackley
 
Introduction to using jQuery with SharePoint
Introduction to using jQuery with SharePointIntroduction to using jQuery with SharePoint
Introduction to using jQuery with SharePoint
Rene Modery
 
SPSSTHLM - Using JSLink and Display Templates for ITPros
SPSSTHLM - Using JSLink and Display Templates for ITProsSPSSTHLM - Using JSLink and Display Templates for ITPros
SPSSTHLM - Using JSLink and Display Templates for ITPros
Paul Hunt
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointBringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePoint
Chad Schroeder
 
SharePoint 2013 APIs
SharePoint 2013 APIsSharePoint 2013 APIs
SharePoint 2013 APIs
John Calvert
 
Citizen Developers Intro to jQuery Customizations in SharePoint
Citizen Developers Intro to jQuery Customizations in SharePointCitizen Developers Intro to jQuery Customizations in SharePoint
Citizen Developers Intro to jQuery Customizations in SharePoint
Mark Rackley
 
SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014
Mark Rackley
 
SPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuerySPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuery
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 SharePointSPTechCon 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
 
The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14
Mark Rackley
 
Using jQuery to Maximize Form Usability
Using jQuery to Maximize Form UsabilityUsing jQuery to Maximize Form Usability
Using jQuery to Maximize Form Usability
Mark Rackley
 
A Power User's intro to jQuery awesomeness in SharePoint
A Power User's intro to jQuery awesomeness in SharePointA Power User's intro to jQuery awesomeness in SharePoint
A Power User's intro to jQuery awesomeness in SharePoint
Mark Rackley
 
Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint WorkshopIntroduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop
Mark Rackley
 
Utilizing jQuery in SharePoint: Get More Done Faster
Utilizing jQuery in SharePoint: Get More Done FasterUtilizing jQuery in SharePoint: Get More Done Faster
Utilizing jQuery in SharePoint: Get More Done Faster
Mark Rackley
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuide
Mark Rackley
 
SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013 SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013
Mark Rackley
 
What is SharePoint Development??
What is SharePoint Development??What is SharePoint Development??
What is SharePoint Development??
Mark Rackley
 
NOW I Get it!! What SharePoint IS and why I need it
NOW I Get it!! What SharePoint IS and why I need itNOW I Get it!! What SharePoint IS and why I need it
NOW I Get it!! What SharePoint IS and why I need it
Mark Rackley
 
The SharePoint & jQuery Guide
The SharePoint & jQuery GuideThe SharePoint & jQuery Guide
The SharePoint & jQuery Guide
Mark 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 known
Mark Rackley
 
SharePoint REST vs CSOM
SharePoint REST vs CSOMSharePoint REST vs CSOM
SharePoint REST vs CSOM
Mark Rackley
 
Introduction to using jQuery with SharePoint
Introduction to using jQuery with SharePointIntroduction to using jQuery with SharePoint
Introduction to using jQuery with SharePoint
Rene Modery
 
SPSSTHLM - Using JSLink and Display Templates for ITPros
SPSSTHLM - Using JSLink and Display Templates for ITProsSPSSTHLM - Using JSLink and Display Templates for ITPros
SPSSTHLM - Using JSLink and Display Templates for ITPros
Paul Hunt
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointBringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePoint
Chad Schroeder
 
SharePoint 2013 APIs
SharePoint 2013 APIsSharePoint 2013 APIs
SharePoint 2013 APIs
John Calvert
 
Citizen Developers Intro to jQuery Customizations in SharePoint
Citizen Developers Intro to jQuery Customizations in SharePointCitizen Developers Intro to jQuery Customizations in SharePoint
Citizen Developers Intro to jQuery Customizations in SharePoint
Mark Rackley
 

Viewers also liked (8)

So You Want to Be a SharePoint Developer - SPS Utah 2015
So You Want to Be a SharePoint Developer - SPS Utah 2015So You Want to Be a SharePoint Developer - SPS Utah 2015
So You Want to Be a SharePoint Developer - SPS Utah 2015
Ryan Schouten
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
Victor Adriel Oliveira
 
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
Guy Royse
 
Jquery introduction
Jquery introductionJquery introduction
Jquery introduction
musrath mohammad
 
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
Kazuyoshi Tsuchiya
 
jQuery Learning
jQuery LearningjQuery Learning
jQuery Learning
Uzair Ali
 
The jQuery Divide
The jQuery DivideThe jQuery Divide
The jQuery Divide
Rebecca Murphey
 
jQuery Introduction
jQuery IntroductionjQuery Introduction
jQuery Introduction
Arwid Bancewicz
 
So You Want to Be a SharePoint Developer - SPS Utah 2015
So You Want to Be a SharePoint Developer - SPS Utah 2015So You Want to Be a SharePoint Developer - SPS Utah 2015
So You Want to Be a SharePoint Developer - SPS Utah 2015
Ryan Schouten
 
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
Guy Royse
 
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
Kazuyoshi Tsuchiya
 
jQuery Learning
jQuery LearningjQuery Learning
jQuery Learning
Uzair Ali
 
Ad

Similar to A Power User's Intro to jQuery Awesomeness in SharePoint (20)

A Power User's Introduction to jQuery Awesomeness in SharePoint
A Power User's Introduction to jQuery Awesomeness in SharePointA Power User's Introduction to jQuery Awesomeness in SharePoint
A Power User's Introduction to jQuery Awesomeness in SharePoint
Mark Rackley
 
CIAOPS Need to Know Office 365 Webinar - February 2018
CIAOPS Need to Know Office 365 Webinar - February 2018CIAOPS Need to Know Office 365 Webinar - February 2018
CIAOPS Need to Know Office 365 Webinar - February 2018
Robert Crane
 
SharePoint 2013 Web Content Management for Developers TSPUG
SharePoint 2013 Web Content Management for Developers TSPUGSharePoint 2013 Web Content Management for Developers TSPUG
SharePoint 2013 Web Content Management for Developers TSPUG
Ed Musters
 
SharePoint 2013 Web Content Management for Developers HSPUG
SharePoint 2013 Web Content Management for Developers HSPUGSharePoint 2013 Web Content Management for Developers HSPUG
SharePoint 2013 Web Content Management for Developers HSPUG
Ed Musters
 
Search Driven Solutions
Search Driven SolutionsSearch Driven Solutions
Search Driven Solutions
April Dunnam
 
Getting started developing for share point
Getting started developing for share pointGetting started developing for share point
Getting started developing for share point
Roel Bethlehem
 
Writing futuristic workflows in office 365 SharePoint 2013 2016 on premise
Writing futuristic workflows in office 365 SharePoint 2013 2016 on premiseWriting futuristic workflows in office 365 SharePoint 2013 2016 on premise
Writing futuristic workflows in office 365 SharePoint 2013 2016 on premise
Prashant G Bhoyar (Microsoft MVP)
 
Power apps and flow user group
Power apps and flow user groupPower apps and flow user group
Power apps and flow user group
Craig Jahnke
 
Penny coventry auto-bp-spsbe31
Penny coventry auto-bp-spsbe31Penny coventry auto-bp-spsbe31
Penny coventry auto-bp-spsbe31
BIWUG
 
O365Con19 - Start Developing Teams Tabs and SharePoint Webparts with SPFX - O...
O365Con19 - Start Developing Teams Tabs and SharePoint Webparts with SPFX - O...O365Con19 - Start Developing Teams Tabs and SharePoint Webparts with SPFX - O...
O365Con19 - Start Developing Teams Tabs and SharePoint Webparts with SPFX - O...
NCCOMMS
 
Start developing Microsoft Teams tabs and SharePoint webparts with SharePoint...
Start developing Microsoft Teams tabs and SharePoint webparts with SharePoint...Start developing Microsoft Teams tabs and SharePoint webparts with SharePoint...
Start developing Microsoft Teams tabs and SharePoint webparts with SharePoint...
Olli Jääskeläinen
 
Branding office 365 with front end tooling
Branding office 365 with front end toolingBranding office 365 with front end tooling
Branding office 365 with front end tooling
Thomas Daly
 
Cloud Saturday Chicago 2016 - Modern Intranet Development Best Practices on S...
Cloud Saturday Chicago 2016 - Modern Intranet Development Best Practices on S...Cloud Saturday Chicago 2016 - Modern Intranet Development Best Practices on S...
Cloud Saturday Chicago 2016 - Modern Intranet Development Best Practices on S...
Nik Patel
 
Lifecycle Management with SharePoint Apps and Solutions
Lifecycle Management with SharePoint Apps and SolutionsLifecycle Management with SharePoint Apps and Solutions
Lifecycle Management with SharePoint Apps and Solutions
SPC Adriatics
 
aOS Moscow - E7 - Top 10 tips for modern intranet - Katja Jokisalo
aOS Moscow - E7 - Top 10 tips for modern intranet - Katja JokisaloaOS Moscow - E7 - Top 10 tips for modern intranet - Katja Jokisalo
aOS Moscow - E7 - Top 10 tips for modern intranet - Katja Jokisalo
aOS Community
 
SharePoint Upgrade or Migration, or is it both? - SPS London 2016
SharePoint Upgrade or Migration, or is it both? - SPS London 2016SharePoint Upgrade or Migration, or is it both? - SPS London 2016
SharePoint Upgrade or Migration, or is it both? - SPS London 2016
Chirag Patel
 
Coexist or Integrate? How Add-ins Deliver an Integrated Environment to Manage...
Coexist or Integrate? How Add-ins Deliver an Integrated Environment to Manage...Coexist or Integrate? How Add-ins Deliver an Integrated Environment to Manage...
Coexist or Integrate? How Add-ins Deliver an Integrated Environment to Manage...
Concept Searching, Inc
 
Matthias Einig from Rencore - Transforming SharePoint farm solutions to the A...
Matthias Einig from Rencore - Transforming SharePoint farm solutions to the A...Matthias Einig from Rencore - Transforming SharePoint farm solutions to the A...
Matthias Einig from Rencore - Transforming SharePoint farm solutions to the A...
Rencore
 
Transforming your full-trust solutions to the Add-in model / SharePoint Frame...
Transforming your full-trust solutions to the Add-in model / SharePoint Frame...Transforming your full-trust solutions to the Add-in model / SharePoint Frame...
Transforming your full-trust solutions to the Add-in model / SharePoint Frame...
SUGES (SharePoint Users Group España)
 
Product Catalog and IT Service Management
Product Catalog and IT Service ManagementProduct Catalog and IT Service Management
Product Catalog and IT Service Management
Drew Madelung
 
A Power User's Introduction to jQuery Awesomeness in SharePoint
A Power User's Introduction to jQuery Awesomeness in SharePointA Power User's Introduction to jQuery Awesomeness in SharePoint
A Power User's Introduction to jQuery Awesomeness in SharePoint
Mark Rackley
 
CIAOPS Need to Know Office 365 Webinar - February 2018
CIAOPS Need to Know Office 365 Webinar - February 2018CIAOPS Need to Know Office 365 Webinar - February 2018
CIAOPS Need to Know Office 365 Webinar - February 2018
Robert Crane
 
SharePoint 2013 Web Content Management for Developers TSPUG
SharePoint 2013 Web Content Management for Developers TSPUGSharePoint 2013 Web Content Management for Developers TSPUG
SharePoint 2013 Web Content Management for Developers TSPUG
Ed Musters
 
SharePoint 2013 Web Content Management for Developers HSPUG
SharePoint 2013 Web Content Management for Developers HSPUGSharePoint 2013 Web Content Management for Developers HSPUG
SharePoint 2013 Web Content Management for Developers HSPUG
Ed Musters
 
Search Driven Solutions
Search Driven SolutionsSearch Driven Solutions
Search Driven Solutions
April Dunnam
 
Getting started developing for share point
Getting started developing for share pointGetting started developing for share point
Getting started developing for share point
Roel Bethlehem
 
Writing futuristic workflows in office 365 SharePoint 2013 2016 on premise
Writing futuristic workflows in office 365 SharePoint 2013 2016 on premiseWriting futuristic workflows in office 365 SharePoint 2013 2016 on premise
Writing futuristic workflows in office 365 SharePoint 2013 2016 on premise
Prashant G Bhoyar (Microsoft MVP)
 
Power apps and flow user group
Power apps and flow user groupPower apps and flow user group
Power apps and flow user group
Craig Jahnke
 
Penny coventry auto-bp-spsbe31
Penny coventry auto-bp-spsbe31Penny coventry auto-bp-spsbe31
Penny coventry auto-bp-spsbe31
BIWUG
 
O365Con19 - Start Developing Teams Tabs and SharePoint Webparts with SPFX - O...
O365Con19 - Start Developing Teams Tabs and SharePoint Webparts with SPFX - O...O365Con19 - Start Developing Teams Tabs and SharePoint Webparts with SPFX - O...
O365Con19 - Start Developing Teams Tabs and SharePoint Webparts with SPFX - O...
NCCOMMS
 
Start developing Microsoft Teams tabs and SharePoint webparts with SharePoint...
Start developing Microsoft Teams tabs and SharePoint webparts with SharePoint...Start developing Microsoft Teams tabs and SharePoint webparts with SharePoint...
Start developing Microsoft Teams tabs and SharePoint webparts with SharePoint...
Olli Jääskeläinen
 
Branding office 365 with front end tooling
Branding office 365 with front end toolingBranding office 365 with front end tooling
Branding office 365 with front end tooling
Thomas Daly
 
Cloud Saturday Chicago 2016 - Modern Intranet Development Best Practices on S...
Cloud Saturday Chicago 2016 - Modern Intranet Development Best Practices on S...Cloud Saturday Chicago 2016 - Modern Intranet Development Best Practices on S...
Cloud Saturday Chicago 2016 - Modern Intranet Development Best Practices on S...
Nik Patel
 
Lifecycle Management with SharePoint Apps and Solutions
Lifecycle Management with SharePoint Apps and SolutionsLifecycle Management with SharePoint Apps and Solutions
Lifecycle Management with SharePoint Apps and Solutions
SPC Adriatics
 
aOS Moscow - E7 - Top 10 tips for modern intranet - Katja Jokisalo
aOS Moscow - E7 - Top 10 tips for modern intranet - Katja JokisaloaOS Moscow - E7 - Top 10 tips for modern intranet - Katja Jokisalo
aOS Moscow - E7 - Top 10 tips for modern intranet - Katja Jokisalo
aOS Community
 
SharePoint Upgrade or Migration, or is it both? - SPS London 2016
SharePoint Upgrade or Migration, or is it both? - SPS London 2016SharePoint Upgrade or Migration, or is it both? - SPS London 2016
SharePoint Upgrade or Migration, or is it both? - SPS London 2016
Chirag Patel
 
Coexist or Integrate? How Add-ins Deliver an Integrated Environment to Manage...
Coexist or Integrate? How Add-ins Deliver an Integrated Environment to Manage...Coexist or Integrate? How Add-ins Deliver an Integrated Environment to Manage...
Coexist or Integrate? How Add-ins Deliver an Integrated Environment to Manage...
Concept Searching, Inc
 
Matthias Einig from Rencore - Transforming SharePoint farm solutions to the A...
Matthias Einig from Rencore - Transforming SharePoint farm solutions to the A...Matthias Einig from Rencore - Transforming SharePoint farm solutions to the A...
Matthias Einig from Rencore - Transforming SharePoint farm solutions to the A...
Rencore
 
Transforming your full-trust solutions to the Add-in model / SharePoint Frame...
Transforming your full-trust solutions to the Add-in model / SharePoint Frame...Transforming your full-trust solutions to the Add-in model / SharePoint Frame...
Transforming your full-trust solutions to the Add-in model / SharePoint Frame...
SUGES (SharePoint Users Group España)
 
Product Catalog and IT Service Management
Product Catalog and IT Service ManagementProduct Catalog and IT Service Management
Product Catalog and IT Service Management
Drew Madelung
 
Ad

More from Mark Rackley (7)

Column Formatter in SharePoint Online
Column Formatter in SharePoint OnlineColumn Formatter in SharePoint Online
Column Formatter in SharePoint Online
Mark Rackley
 
SharePoint Conference North America - Converting your JavaScript to SPFX
SharePoint Conference North America - Converting your JavaScript to SPFXSharePoint Conference North America - Converting your JavaScript to SPFX
SharePoint Conference North America - Converting your JavaScript to SPFX
Mark Rackley
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
Mark Rackley
 
Wrapping your head around the SharePoint Beast (For the rest of us)
Wrapping your head around the SharePoint Beast (For the rest of us)Wrapping your head around the SharePoint Beast (For the rest of us)
Wrapping your head around the SharePoint Beast (For the rest of us)
Mark Rackley
 
What IS SharePoint Development?
What IS SharePoint Development?What IS SharePoint Development?
What IS SharePoint Development?
Mark Rackley
 
SPSTC - SharePoint & jQuery Essentials
SPSTC - SharePoint & jQuery EssentialsSPSTC - SharePoint & jQuery Essentials
SPSTC - SharePoint & jQuery Essentials
Mark Rackley
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentialsSharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
Mark Rackley
 
Column Formatter in SharePoint Online
Column Formatter in SharePoint OnlineColumn Formatter in SharePoint Online
Column Formatter in SharePoint Online
Mark Rackley
 
SharePoint Conference North America - Converting your JavaScript to SPFX
SharePoint Conference North America - Converting your JavaScript to SPFXSharePoint Conference North America - Converting your JavaScript to SPFX
SharePoint Conference North America - Converting your JavaScript to SPFX
Mark Rackley
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
Mark Rackley
 
Wrapping your head around the SharePoint Beast (For the rest of us)
Wrapping your head around the SharePoint Beast (For the rest of us)Wrapping your head around the SharePoint Beast (For the rest of us)
Wrapping your head around the SharePoint Beast (For the rest of us)
Mark Rackley
 
What IS SharePoint Development?
What IS SharePoint Development?What IS SharePoint Development?
What IS SharePoint Development?
Mark Rackley
 
SPSTC - SharePoint & jQuery Essentials
SPSTC - SharePoint & jQuery EssentialsSPSTC - SharePoint & jQuery Essentials
SPSTC - SharePoint & jQuery Essentials
Mark Rackley
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentialsSharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
Mark Rackley
 

Recently uploaded (20)

Vaibhav Gupta BAML: AI work flows without Hallucinations
Vaibhav Gupta BAML: AI work flows without HallucinationsVaibhav Gupta BAML: AI work flows without Hallucinations
Vaibhav Gupta BAML: AI work flows without Hallucinations
john409870
 
Foundations of Cybersecurity - Google Certificate
Foundations of Cybersecurity - Google CertificateFoundations of Cybersecurity - Google Certificate
Foundations of Cybersecurity - Google Certificate
VICTOR MAESTRE RAMIREZ
 
Canadian book publishing: Insights from the latest salary survey - Tech Forum...
Canadian book publishing: Insights from the latest salary survey - Tech Forum...Canadian book publishing: Insights from the latest salary survey - Tech Forum...
Canadian book publishing: Insights from the latest salary survey - Tech Forum...
BookNet Canada
 
MINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PRMINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PR
MIND CTI
 
GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...
GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...
GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...
James Anderson
 
Hybridize Functions: A Tool for Automatically Refactoring Imperative Deep Lea...
Hybridize Functions: A Tool for Automatically Refactoring Imperative Deep Lea...Hybridize Functions: A Tool for Automatically Refactoring Imperative Deep Lea...
Hybridize Functions: A Tool for Automatically Refactoring Imperative Deep Lea...
Raffi Khatchadourian
 
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
BookNet Canada
 
TrsLabs - Leverage the Power of UPI Payments
TrsLabs - Leverage the Power of UPI PaymentsTrsLabs - Leverage the Power of UPI Payments
TrsLabs - Leverage the Power of UPI Payments
Trs Labs
 
GyrusAI - Broadcasting & Streaming Applications Driven by AI and ML
GyrusAI - Broadcasting & Streaming Applications Driven by AI and MLGyrusAI - Broadcasting & Streaming Applications Driven by AI and ML
GyrusAI - Broadcasting & Streaming Applications Driven by AI and ML
Gyrus AI
 
TrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business ConsultingTrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business Consulting
Trs Labs
 
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make .pptx
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make   .pptxWebinar - Top 5 Backup Mistakes MSPs and Businesses Make   .pptx
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make .pptx
MSP360
 
Reimagine How You and Your Team Work with Microsoft 365 Copilot.pptx
Reimagine How You and Your Team Work with Microsoft 365 Copilot.pptxReimagine How You and Your Team Work with Microsoft 365 Copilot.pptx
Reimagine How You and Your Team Work with Microsoft 365 Copilot.pptx
John Moore
 
Connect and Protect: Networks and Network Security
Connect and Protect: Networks and Network SecurityConnect and Protect: Networks and Network Security
Connect and Protect: Networks and Network Security
VICTOR MAESTRE RAMIREZ
 
UiPath Agentic Automation: Community Developer Opportunities
UiPath Agentic Automation: Community Developer OpportunitiesUiPath Agentic Automation: Community Developer Opportunities
UiPath Agentic Automation: Community Developer Opportunities
DianaGray10
 
The Microsoft Excel Parts Presentation.pdf
The Microsoft Excel Parts Presentation.pdfThe Microsoft Excel Parts Presentation.pdf
The Microsoft Excel Parts Presentation.pdf
YvonneRoseEranista
 
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
Zilliz Cloud Monthly Technical Review: May 2025
Zilliz Cloud Monthly Technical Review: May 2025Zilliz Cloud Monthly Technical Review: May 2025
Zilliz Cloud Monthly Technical Review: May 2025
Zilliz
 
Financial Services Technology Summit 2025
Financial Services Technology Summit 2025Financial Services Technology Summit 2025
Financial Services Technology Summit 2025
Ray Bugg
 
The Changing Compliance Landscape in 2025.pdf
The Changing Compliance Landscape in 2025.pdfThe Changing Compliance Landscape in 2025.pdf
The Changing Compliance Landscape in 2025.pdf
Precisely
 
Transcript: Canadian book publishing: Insights from the latest salary survey ...
Transcript: Canadian book publishing: Insights from the latest salary survey ...Transcript: Canadian book publishing: Insights from the latest salary survey ...
Transcript: Canadian book publishing: Insights from the latest salary survey ...
BookNet Canada
 
Vaibhav Gupta BAML: AI work flows without Hallucinations
Vaibhav Gupta BAML: AI work flows without HallucinationsVaibhav Gupta BAML: AI work flows without Hallucinations
Vaibhav Gupta BAML: AI work flows without Hallucinations
john409870
 
Foundations of Cybersecurity - Google Certificate
Foundations of Cybersecurity - Google CertificateFoundations of Cybersecurity - Google Certificate
Foundations of Cybersecurity - Google Certificate
VICTOR MAESTRE RAMIREZ
 
Canadian book publishing: Insights from the latest salary survey - Tech Forum...
Canadian book publishing: Insights from the latest salary survey - Tech Forum...Canadian book publishing: Insights from the latest salary survey - Tech Forum...
Canadian book publishing: Insights from the latest salary survey - Tech Forum...
BookNet Canada
 
MINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PRMINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PR
MIND CTI
 
GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...
GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...
GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...
James Anderson
 
Hybridize Functions: A Tool for Automatically Refactoring Imperative Deep Lea...
Hybridize Functions: A Tool for Automatically Refactoring Imperative Deep Lea...Hybridize Functions: A Tool for Automatically Refactoring Imperative Deep Lea...
Hybridize Functions: A Tool for Automatically Refactoring Imperative Deep Lea...
Raffi Khatchadourian
 
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
BookNet Canada
 
TrsLabs - Leverage the Power of UPI Payments
TrsLabs - Leverage the Power of UPI PaymentsTrsLabs - Leverage the Power of UPI Payments
TrsLabs - Leverage the Power of UPI Payments
Trs Labs
 
GyrusAI - Broadcasting & Streaming Applications Driven by AI and ML
GyrusAI - Broadcasting & Streaming Applications Driven by AI and MLGyrusAI - Broadcasting & Streaming Applications Driven by AI and ML
GyrusAI - Broadcasting & Streaming Applications Driven by AI and ML
Gyrus AI
 
TrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business ConsultingTrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business Consulting
Trs Labs
 
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make .pptx
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make   .pptxWebinar - Top 5 Backup Mistakes MSPs and Businesses Make   .pptx
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make .pptx
MSP360
 
Reimagine How You and Your Team Work with Microsoft 365 Copilot.pptx
Reimagine How You and Your Team Work with Microsoft 365 Copilot.pptxReimagine How You and Your Team Work with Microsoft 365 Copilot.pptx
Reimagine How You and Your Team Work with Microsoft 365 Copilot.pptx
John Moore
 
Connect and Protect: Networks and Network Security
Connect and Protect: Networks and Network SecurityConnect and Protect: Networks and Network Security
Connect and Protect: Networks and Network Security
VICTOR MAESTRE RAMIREZ
 
UiPath Agentic Automation: Community Developer Opportunities
UiPath Agentic Automation: Community Developer OpportunitiesUiPath Agentic Automation: Community Developer Opportunities
UiPath Agentic Automation: Community Developer Opportunities
DianaGray10
 
The Microsoft Excel Parts Presentation.pdf
The Microsoft Excel Parts Presentation.pdfThe Microsoft Excel Parts Presentation.pdf
The Microsoft Excel Parts Presentation.pdf
YvonneRoseEranista
 
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
Zilliz Cloud Monthly Technical Review: May 2025
Zilliz Cloud Monthly Technical Review: May 2025Zilliz Cloud Monthly Technical Review: May 2025
Zilliz Cloud Monthly Technical Review: May 2025
Zilliz
 
Financial Services Technology Summit 2025
Financial Services Technology Summit 2025Financial Services Technology Summit 2025
Financial Services Technology Summit 2025
Ray Bugg
 
The Changing Compliance Landscape in 2025.pdf
The Changing Compliance Landscape in 2025.pdfThe Changing Compliance Landscape in 2025.pdf
The Changing Compliance Landscape in 2025.pdf
Precisely
 
Transcript: Canadian book publishing: Insights from the latest salary survey ...
Transcript: Canadian book publishing: Insights from the latest salary survey ...Transcript: Canadian book publishing: Insights from the latest salary survey ...
Transcript: Canadian book publishing: Insights from the latest salary survey ...
BookNet Canada
 

A Power User's Intro to jQuery Awesomeness in SharePoint

  • 1. SharePoint Power Hour Mark Rackley mrackley@paitgroup.com A Power User’s Intro to jQuery Awesomeness in SharePoint
  • 2. © 2016 PAIT Group http://www.paitgroup.com @mrackley Mark Rackley / Partner & CTO • 20+ years software architecture and development experience • Office 365 MVP, SharePoint Junkie since 2007 • Event Organizer (SharePointalooza.org) • Blogger, Writer, Speaker • Bacon aficionado @mrackley www.SharePointHillbilly.com www.PaitGroup.com www.SharePointaLooza.org www.StratusForms.com #SayNoToInfoPath
  • 3. © 2016 PAIT Group http://www.paitgroup.com @mrackley Agenda • What are we talking about? • Why should you care? • How to do it • Best practices and things you should avoid doing • Demos, examples, and where to find them
  • 4. © 2016 PAIT Group http://www.paitgroup.com @mrackley What are we talking about? • Enhancing pages in SharePoint using JavaScript and jQuery (developer stuff) • It’s easy to do (all you need is a Content Editor/Script Editor Web Part and a Document Library) • The possibilities are pretty endless • Dashboards • Custom Forms • Animations • More organized and visually appealing SharePoint content
  • 5. © 2016 PAIT Group http://www.paitgroup.com @mrackley Why Should You Care? • SharePoint gets you MOST of the way there • It makes SharePoint more visually appealing • It makes SharePoint easier to use • It’s simple (if you are careful) • It’s only going to get more important
  • 6. © 2016 PAIT Group http://www.paitgroup.com @mrackley How (a Power User) Should do it • Upload file(s) to a document library • Users must have read access to library • Create or edit an existing page • Insert a Content Editor Web Part • Link Content Editor Web Part to file you uploaded in document library • Ta and da…
  • 7. DEMO: Add your first jQuery script
  • 8. © 2016 PAIT Group http://www.paitgroup.com @mrackley Best Practices for the Power User • Understand the basics • Functionality is generally made up of multiple files • Some are stored in your document library • Some are stored somewhere else • Some may already to referenced • Don’t reference a script more than once • Don’t throw multiple scripts on a page and except them to work • Don’t combine scripts and expect them to work • Don’t mess with the script without understanding what you are changing
  • 9. © 2016 PAIT Group http://www.paitgroup.com @mrackley Anatomy of a Script
  • 10. © 2016 PAIT Group http://www.paitgroup.com @mrackley Anatomy of a Script • Script References
  • 11. © 2016 PAIT Group http://www.paitgroup.com @mrackley Anatomy of a Script • Style Sheet References
  • 12. © 2016 PAIT Group http://www.paitgroup.com @mrackley Anatomy of a Script • Additional Styles
  • 13. © 2016 PAIT Group http://www.paitgroup.com @mrackley Anatomy of a Script • HTML
  • 14. © 2016 PAIT Group http://www.paitgroup.com @mrackley Anatomy of a Script • JavaScript
  • 16. © 2016 PAIT Group http://www.paitgroup.com @mrackley Tabbed Web Parts • http://www.paitgroup.com/sharepoint-tabbed-web- partshillbillytabs-3-0/ Place web parts on a page into tabs.
  • 17. © 2016 PAIT Group http://www.paitgroup.com @mrackley Digital Signatures in SharePoint • http://www.paitgroup.com/easy-digital-signatures-in- sharepoint/ • Easy digital signatures for your lists and libraries
  • 18. © 2016 PAIT Group http://www.paitgroup.com @mrackley Office 365 Video Portal • http://www.paitgroup.com/integrate-your-office-365-video- portal-with-sharepoint-online/ • Integrate your Office 365 Video Portal into your SharePoint Online
  • 19. © 2016 PAIT Group http://www.paitgroup.com @mrackley Tabify SharePoint Forms • http://www.markrackley.net/2015/12/03/tabify-your- sharepoint-forms/ Modify your SharePoint form so that the fields are displayed in tabs
  • 20. © 2016 PAIT Group http://www.paitgroup.com @mrackley Personalization & Custom Tiles • http://www.paitgroup.com/personalize-your-sharepoint- home-page-with-masonry/ Add responsive tiles to a page that can be used as links to other pages or sites. Personalize tiles so that users only see links that are relevant
  • 21. © 2016 PAIT Group http://www.paitgroup.com @mrackley Cascading Drop Down Lists • http://www.markrackley.net/2014/05/20/cascading-drop- down-lists-in-sharepoint-office-365-using-rest/ Filter a drop down list based upon the value of another drop down list.
  • 22. © 2016 PAIT Group http://www.paitgroup.com @mrackley Customize SharePoint Forms • http://www.markrackley.net/2013/08/29/easy-custom- layouts-for-default-sharepoint-forms/ Use HTML to transform a default form in SharePoint so that it looks highly stylized
  • 23. © 2016 PAIT Group http://www.paitgroup.com @mrackley What’s next??? • Learn HTML, CSS, JavaScript • http://www.pluralsight.com • Create a page in SharePoint and play around
  • 24. Thank you. © 2015 PAIT Group June 29, 2015