A Power User's Introduction to jQuery Awesomeness in SharePoint

SPS St. LouisMark [email protected]

A Power User’s Intro to jQuery Awesomeness in SharePoint

Gold Sponsors

SHAREPOINT SATURDAY ST.LOUIS 2018

Silver Sponsors

Bronze Sponsors

© 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


BRANSONMARCH 2nd & 3rd 2018

BRANSON, MO

www.sharepointalooza.org

www.collabsummit.org

50% off Promotion Code SPSSTL

North American Collaboration Summit


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


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) 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…

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 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


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

https://info.paitgroup.com/blog/perhaps-the-only-other-sharepoint-framework-web-part-you-will-ever-need

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/


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


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/


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/


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

http://www.markrackley.net/2017/05/04/customize-your-sharepoint-classic-forms-without-infopath/


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


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/


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

http://info.paitgroup.com/blog/new-and-improved-cascading-dropdowns-for-sharepoint-classic-forms


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

http://www.markrackley.net/2017/06/07/using-fullcalendar-io-to-create-custom-calendars-in-sharepoint/


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

http://www.pluralsight.com/

http://www.voitanos.com/

Thank you

http://www.paitgroup.comhttp://[email protected]@mrackley

© 2017 PAIT Group http://www.PAITGroup.com

Technology

A Power User's Introduction to jQuery Awesomeness in SharePoint