Branding SharePoint Using Application Customizers Tony Phillips Cloud Design Box

Tony Phillips Cloud Design Box Ltd Blog: www.tonyishere.co.uk I've been working with Microsoft SharePoint since 2004 and specialise in branding, development and support of SharePoint and Office 365. I graduated from The University of Derby with BSc (Hons) in Digital Entertainment. I currently run a SharePoint and Office 365 consultancy business called Cloud Design Box Ltd. Blog: www.tonyishere.co.uk Website: www.clouddesignbox.co.uk Email : info@clouddesignbox.co.uk Twitter : @Tonyp543212003 Youtube : Cloud Design Box

The SharePoint branding story so far….

Your experiences of branding SharePoint 2003?

WSS/SP2003- FrontPage (Hacking) Microsoft FrontPage Replace HTML of each page Errors corrupted pages/very dangerous Had no idea what I was doing….

Your experiences of branding SharePoint 2007 (MOSS)?

MOSS/SP2007 – Master Pages/Themes CSS customisation Apply to a whole site No editing HTML CSS browser support varied Reuse themes Master Pages HTML, CSS and JS jQuery to fix browser issues Page layouts SharePoint Designer Deploy via feature MS HTML structure was hard to work with (required Heather Solomon cheat sheets!) Didn’t upgrade with SharePoint

Your experiences of branding SharePoint 2010?

SP2010 – Master Pages/XSLT Master Pages Better structured HTML (but still not quite there) Content Editor Web Part JSOM/REST Themes Made in PowerPoint Very basic XSLT (was available in earlier versions too) Made lists look great Broke easily (hard to debug) jQuery and other JavaScript libraries

Your experiences of branding SharePoint 2013?

SP2013/SPOnline – Custom Actions/JS Link Applies JS to every page on the site Use JS to edit HTML DOM Easy to upgrade/deploy Not dependant on Master Page Better structured HTML to work with Composed Looks Basic JS Link Made lists look great Easy to work with (if you like JavaScript) Make use of JS frameworks such as Angular Quick to apply

Modern Pages – SharePoint Framework (Web Parts and Extensions Preview) SharePoint Framework Use web stack technology TypeScript and SCSS Web Parts Render lists using REST API Create apps Slow to setup Better end user experience Extensions FieldCustomizers CommandSets Application Customizers

Application Customizers PageHeader Top Injects JS and CSS to every page DOM manipulation advised in placeholders only! PageFooter Bottom

Demo Creating an Application Customizer to apply branding using the SharePoint Framework Disclaimer: Release candidate/Updates/GA coming out very soon…this will break your projects – keep an eye on the dev centre for updates

Questions/Discussion

Examples available on GitHub github.com/CloudDesignBox Useful links: www.tonyishere.co.uk (My Blog) blog.mastykarz.nl (Waldek Mastykarz Blog) dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview

Demo Links Demo 2 This example adds HTML and CSS to the Top zone of the modern SharePoint pages using the SharePoint Framework. https://github.com/CloudDesignBox/collab365AppCustDemo2 Demo 3 In this example, we: add HTML and CSS to the Top zone of the modern SharePoint pages Add the time and date using a JavaScript function Import jQuery and jQuery Cycle 2 using CDNs Use the REST API to get announcements and display them in a slideshow Add Google Analytics to the page https://github.com/CloudDesignBox/collab365AppCustDemo3

Thanks for watching