SlideShare une entreprise Scribd logo
1  sur  24
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

Contenu connexe

Tendances

SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014Mark Rackley
 
SPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuerySPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQueryMark 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
 
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/14Mark 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
 
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 SharePointMark 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 WorkshopMark 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 FasterMark Rackley
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideMark 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 itMark Rackley
 
The SharePoint & jQuery Guide
The SharePoint & jQuery GuideThe SharePoint & jQuery Guide
The 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
 
SharePoint REST vs CSOM
SharePoint REST vs CSOMSharePoint REST vs CSOM
SharePoint REST vs CSOMMark Rackley
 
Introduction to using jQuery with SharePoint
Introduction to using jQuery with SharePointIntroduction to using jQuery with SharePoint
Introduction to using jQuery with SharePointRene 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 ITProsPaul Hunt
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointBringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointChad Schroeder
 
SharePoint 2013 APIs
SharePoint 2013 APIsSharePoint 2013 APIs
SharePoint 2013 APIsJohn 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 SharePointMark Rackley
 

Tendances (20)

SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014
 
SPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuerySPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuery
 
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
 
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
 
Using jQuery to Maximize Form Usability
Using jQuery to Maximize Form UsabilityUsing jQuery to Maximize Form Usability
Using jQuery to Maximize Form Usability
 
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
 
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
 
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
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuide
 
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
 
What is SharePoint Development??
What is SharePoint Development??What is SharePoint Development??
What is SharePoint Development??
 
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
 
The SharePoint & jQuery Guide
The SharePoint & jQuery GuideThe SharePoint & jQuery Guide
The 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
 
SharePoint REST vs CSOM
SharePoint REST vs CSOMSharePoint REST vs CSOM
SharePoint REST vs CSOM
 
Introduction to using jQuery with SharePoint
Introduction to using jQuery with SharePointIntroduction to using jQuery with SharePoint
Introduction to using jQuery with SharePoint
 
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
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointBringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePoint
 
SharePoint 2013 APIs
SharePoint 2013 APIsSharePoint 2013 APIs
SharePoint 2013 APIs
 
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
 

En vedette

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 2015Ryan 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 JavaScriptGuy Royse
 
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜Kazuyoshi Tsuchiya
 
jQuery Learning
jQuery LearningjQuery Learning
jQuery LearningUzair Ali
 

En vedette (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
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
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
 
Jquery introduction
Jquery introductionJquery introduction
Jquery introduction
 
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
 
jQuery Learning
jQuery LearningjQuery Learning
jQuery Learning
 
The jQuery Divide
The jQuery DivideThe jQuery Divide
The jQuery Divide
 
jQuery Introduction
jQuery IntroductionjQuery Introduction
jQuery Introduction
 

Similaire à A Power User's Intro to jQuery Awesomeness in SharePoint

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 SharePointMark 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 2018Robert 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 TSPUGEd 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 HSPUGEd Musters
 
Search Driven Solutions
Search Driven SolutionsSearch Driven Solutions
Search Driven SolutionsApril Dunnam
 
Getting started developing for share point
Getting started developing for share pointGetting started developing for share point
Getting started developing for share pointRoel 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 premisePrashant 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 groupCraig Jahnke
 
Penny coventry auto-bp-spsbe31
Penny coventry auto-bp-spsbe31Penny coventry auto-bp-spsbe31
Penny coventry auto-bp-spsbe31BIWUG
 
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 toolingThomas 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 SolutionsSPC 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 JokisaloaOS 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 2016Chirag 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 ManagementDrew Madelung
 

Similaire à 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
 
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
 
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
 
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
 
Search Driven Solutions
Search Driven SolutionsSearch Driven Solutions
Search Driven Solutions
 
Getting started developing for share point
Getting started developing for share pointGetting started developing for share point
Getting started developing for share point
 
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
 
Power apps and flow user group
Power apps and flow user groupPower apps and flow user group
Power apps and flow user group
 
Penny coventry auto-bp-spsbe31
Penny coventry auto-bp-spsbe31Penny coventry auto-bp-spsbe31
Penny coventry auto-bp-spsbe31
 
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...
 
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...
 
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
 
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...
 
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
 
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
 
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
 
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...
 
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...
 
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...
 
Product Catalog and IT Service Management
Product Catalog and IT Service ManagementProduct Catalog and IT Service Management
Product Catalog and IT Service Management
 

Plus de Mark Rackley

Column Formatter in SharePoint Online
Column Formatter in SharePoint OnlineColumn Formatter in SharePoint Online
Column Formatter in SharePoint OnlineMark 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 SPFXMark Rackley
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery EssentialsMark 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 EssentialsMark Rackley
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentialsSharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentialsMark Rackley
 

Plus de Mark Rackley (7)

Column Formatter in SharePoint Online
Column Formatter in SharePoint OnlineColumn Formatter in SharePoint Online
Column Formatter in SharePoint Online
 
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
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
 
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)
 
What IS SharePoint Development?
What IS SharePoint Development?What IS SharePoint Development?
What IS SharePoint Development?
 
SPSTC - SharePoint & jQuery Essentials
SPSTC - SharePoint & jQuery EssentialsSPSTC - SharePoint & jQuery Essentials
SPSTC - SharePoint & jQuery Essentials
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentialsSharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
 

Dernier

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 

Dernier (20)

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 

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