1. Branding SharePoint Using Application Customizers
Tony Phillips
Cloud Design Box

2. 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:
Website:
Twitter Youtube : Cloud Design Box

3. The SharePoint branding story so far….

5. Your experiences of branding SharePoint 2003?

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

7. Your experiences of branding SharePoint 2007 (MOSS)?

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

9. Your experiences of branding SharePoint 2010?

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

11. Your experiences of branding SharePoint 2013?

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

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

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

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

16. Questions/Discussion

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

18. Demo Links
Demo 2
This example adds HTML and CSS to the Top zone of the modern SharePoint pages using the SharePoint Framework.
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

19. Thanks for watching