Updated slide deck presented at SharePoint Saturday St. Louis on 1/20/2018

1. SPS St. Louis Mark Rackley
mrackley@paitgroup.com
A Power User’s Intro to jQuery Awesomeness in SharePoint

2. Gold Sponsors
SHAREPOINT SATURDAY ST.LOUIS 2018
Silver Sponsors
Bronze Sponsors

3. © 2017 PAIT Group http://www.paitgroup.com @mrackley
Mark Rackley / Partner & CSO
• 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.MarkRackley.net
www.PAITGroup.com
www.SharePointaLooza.org
www.StratusForms.com
#SayNoToInfoPath

4. © 2017 PAIT Group http://www.paitgroup.com @mrackley
BRANSON
MARCH 2nd & 3rd 2018
BRANSON, MO
www.sharepointalooza.org
www.collabsummit.org
50% off Promotion Code SPSSTL
North American
Collaboration Summit

5. © 2017 PAIT Group http://www.paitgroup.com @mrackley
Agenda
• What is this “Stuff”?
• Why should you care?
• How to do it
• Best practices and things you should avoid doing
• Demos, examples, and where to find them

6. © 2017 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 (yes, even for you)
• The possibilities are pretty endless
• Dashboards
• Custom Forms
• Animations
• More organized and visually appealing SharePoint content

7. © 2017 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

8. © 2017 PAIT Group http://www.paitgroup.com @mrackley
How (a Power User) can 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…

9. DEMO: Add your first jQuery
script

10. © 2017 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 be referenced
• Don’t reference a script more than once
• Don’t throw multiple scripts on a page and expect them to work
• Don’t combine scripts and expect them to work
• Don’t mess with the script without understanding what you are
changing and expect it to work

11. © 2017 PAIT Group http://www.paitgroup.com @mrackley
What about Modern Pages / Sites?
• You SHOULD use the SharePoint Framework
• But you need to be a developer to do that
• What if you aren’t a developer?
• SPFx Content Editor Web Part
• https://info.paitgroup.com/blog/perhaps-the-only-other-sharepoint-framework-web-
part-you-will-ever-need
• *USE JUDISCIOUSLY!! TEST
• *ON MOBILE!!
• *DO NOT ALTER THE PAGE!
• *Consider involving a developer and creating an SPFx web part instead
*#AchievementUnlocked #CYA

12. Examples and Demos

13. © 2017 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.

14. © 2017 PAIT Group http://www.paitgroup.com @mrackley
Content Slider
• http://info.paitgroup.com/blog/the-ultimate-content-slider-
for-sharepoint
• Everybody loves content sliders

15. © 2017 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

16. © 2017 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

17. © 2017 PAIT Group http://www.paitgroup.com @mrackley
Customize SharePoint Forms
• http://www.markrackley.net/2017/05/04/customize-your-
sharepoint-classic-forms-without-infopath/
• Use HTML to transform a default form in SharePoint so that
it looks highly stylized

18. © 2017 PAIT Group http://www.paitgroup.com @mrackley
Responsive Promoted Links
• http://info.paitgroup.com/blog/sharepoint-responsive-
promoted-links
• 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

19. © 2017 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. © 2017 PAIT Group http://www.paitgroup.com @mrackley
Cascading Drop Down Lists
• http://info.paitgroup.com/blog/new-and-improved-
cascading-dropdowns-for-sharepoint-classic-forms
• Multi-Level Cascading Drop Downs for your Classic
SharePoint Forms

21. © 2017 PAIT Group http://www.paitgroup.com @mrackley
Custom Calendars
• http://www.markrackley.net/2017/06/07/using-fullcalendar-
io-to-create-custom-calendars-in-sharepoint/
• Using FullCalendar.io to Create Custom Calendars in
SharePoint

22. © 2017 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
• Learn about the SharePoint Framework
• http://www.voitanos.com

23. Thank you
http://www.paitgroup.com
http://www.markrackley.net
mrackley@paitgroup.com
@mrackley
© 2017 PAIT Group http://www.PAITGroup.com