A Power User's intro to jQuery awesomeness in SharePoint

SPS St. Louis Mark Rackleymrackley@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

@mrackleywww.SharePointHillbilly.comwww.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 (yes, even for you)• 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 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

© 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

Content Slider

• http://info.paitgroup.com/blog/the-ultimate-content-slider-for-sharepoint • Everybody loves content sliders

© 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

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

© 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