A Power User's intro to jQuery awesomeness in SharePoint

SPS St. Louis Mark [email protected]

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

http://www.stratusforms.com/


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


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


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


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


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


Anatomy of a Script


Anatomy of a Script

• Script References


Anatomy of a Script

• Style Sheet References


Anatomy of a Script

• Additional Styles


Anatomy of a Script

• HTML


Anatomy of a Script

• JavaScript

Examples and Demos


Tabbed Web Parts

• http://www.paitgroup.com/sharepoint-tabbed-web-partshillbillytabs-3-0/

Place web parts on a page into tabs.

http://www.paitgroup.com/sharepoint-tabbed-web-partshillbillytabs-3-0/

http://www.paitgroup.com/sharepoint-tabbed-web-partshillbillytabs-3-0/


Content Slider

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

http://info.paitgroup.com/blog/the-ultimate-content-slider-for-sharepoint

http://info.paitgroup.com/blog/the-ultimate-content-slider-for-sharepoint


Digital Signatures in SharePoint

• http://www.paitgroup.com/easy-digital-signatures-in-sharepoint/• Easy digital signatures for your lists and libraries

http://www.paitgroup.com/easy-digital-signatures-in-sharepoint/

http://www.paitgroup.com/easy-digital-signatures-in-sharepoint/


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

http://www.paitgroup.com/integrate-your-office-365-video-portal-with-sharepoint-online/

http://www.paitgroup.com/integrate-your-office-365-video-portal-with-sharepoint-online/


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

http://www.markrackley.net/2015/12/03/tabify-your-sharepoint-forms/

http://www.markrackley.net/2015/12/03/tabify-your-sharepoint-forms/


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

http://info.paitgroup.com/blog/sharepoint-responsive-promoted-links

http://info.paitgroup.com/blog/sharepoint-responsive-promoted-links


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.

http://www.markrackley.net/2014/05/20/cascading-drop-down-lists-in-sharepoint-office-365-using-rest/

http://www.markrackley.net/2014/05/20/cascading-drop-down-lists-in-sharepoint-office-365-using-rest/


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

http://www.markrackley.net/2013/08/29/easy-custom-layouts-for-default-sharepoint-forms/

http://www.markrackley.net/2013/08/29/easy-custom-layouts-for-default-sharepoint-forms/


What’s next???

• Learn HTML, CSS, JavaScript• http://www.pluralsight.com

• Create a page in SharePoint and play around

http://www.pluralsight.com/

Thank you.

© 2015 PAIT Group June 29, 2015

Technology

A Power User's intro to jQuery awesomeness in SharePoint