A Power User's Intro to jQuery Awesomeness in SharePoint
Download as PPTX, PDF1 like1,108 views
This document summarizes a presentation about enhancing SharePoint pages using JavaScript and jQuery. The presentation covers why it is useful to do this, how a power user can add scripts to SharePoint pages through content editor web parts, best practices, and provides examples of scripts that can be used to add features like tabs, signatures, and customized forms.
Ad
More Related Content
What's hot (20)
Viewers also liked (8)
Ad
Similar to A Power User's Intro to jQuery Awesomeness in SharePoint (20)
Ad
More from Mark Rackley (7)
Recently uploaded (20)
A Power User's Intro to jQuery Awesomeness in SharePoint
- 1. SharePoint Power Hour Mark Rackley [email protected] 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