Branding Office 365 w/ Front End Tools + SharePoint PnP https://github.com/tom-daly/demos/tree/master/spsnewengland

1. Branding Office 365
using front end tooling
Presented By: Thomas Daly

3. About me
• Senior SharePoint Consultant @ B&R Business Solutions
• Branding & Developer for SharePoint / Office 365
• Focused on the UI side of things
• Community Involvement
• Speaker [Branding & Front End Development]
• NJ SharePoint User Group Organizer
• SharePoint Saturday NYC Organizer
• NJ & NYC Global Office 365 Dev Bootcamp Organizer 2017
• NJ Azure Bootcamp Organizer
• SharePoint Saturday NJ Organizer [2013-2014]
• My SharePoint Blog
• Git Hub [corp directory controls / o365 sticky footer /
bootstrap navigation]

5. Defining Our Discussion
What are the branding assets we are trying to deploy?
What are the methods to currently deploy them?
What are the pro/cons with each method?
What are the challenges with O365 vs On Prem?
What is the official guidance from Microsoft and/or best practices?
What method are we demonstrating today?
What are the pros/cons of using this method?
What does the future look like?

6. What are branding assets?
• Master Page
• Style Library
• CSS [SASS / LESS]
• Images
• JavaScript
• 3rd Party Assets
• JS Link
• Page Layouts
• Display Templates
• Composed Looks { not covered }

7. Branding Cycle
• Branding development relies on the ability to make fast or
instantaneous changes to the UI
• This mini cycle can be repeated multiple times
• The process ends when the branding meets your objectives
Typical Flow
• Develop – create, update, add new assets
• Push – deploy out to an environment
• Test – verify changes, browser check
• Validate – matches comp / meets objective

8. What are the current methods?
• Current methods to deploy branding assets to Office 365
• No Code Sandbox Solutions aka NCSS using .WSP file
• Add-in Model
• Provider Hosted Add-ins
• https://channel9.msdn.com/blogs/OfficeDevPnP/PnP-Web-Cast-branding-sharepoint-using-add-in-model-techniques
• Manual Methods
• Click and Drag through the UI
• SharePoint Designer
• Mapped Drives
• Remote Provisioning, PnP (the future or now)
• SharePoint / Office 365 Developer Patterns and Practices
• https://github.com/SharePoint/PnP
• CSOM Technique
• https://github.com/SharePoint/PnP/tree/master/Samples/Branding.ApplyBranding

9. Microsoft Guidance
“Use remote provisioning to deploy
and register themes, composed looks,
and all branding artifacts with
SharePoint sites.”
“Do not use declarative code or
sandbox code to deploy and register
themes, master pages, and other
branding artifacts with SharePoint
sites.”https://msdn.microsoft.com/en-us/pnp_articles/branding-sharepoint-sites-sharepoint-add-in

10. Introducing Font-End Tooling

11. Tools & Packages Involved
• Node
• Node Package Manager
• Gulp
• SPSave
• Visual Studio Code
• Chrome
• SPEditor

13. Node.js
• As an asynchronous event driven JavaScript runtime
• Node is designed to build scalable network applications.
• https://nodejs.org/en/about/
• For our purposes it’s a JavaScript engine that runs in the command prompt
• It’s used to process and run npm packages

15. Node Package Manager
• npm is the default Package manager for the JavaScript
runtime environment Node.js
• npm runs through the command line and manages
dependencies for an application.
• It also allows users to install Node.js applications that are
available on the npm registry.

16. npm
• The npm registry hosts almost half a million packages of free,
reusable code — the largest software registry in the world.
• Find, Discover, Build node modules
• https://www.npmjs.com/

17. Installing Packages
• npm install {package}
• npm uninstall {package}
• We need to run ‘npm install gulp spsave’ to use the demo project
For More Information:
Beginners Guide to Node Package Manager

18. Gulp

19. Gulp
• gulp is a toolkit for
automating painful or
time-consuming tasks
in your development
workflow, so you can
stop messing around
and build something
• gulpfile.js is the entry
point to your app

20. gulpfile.js
• gulpfile.js – entry point
• We manually make this file for
our build process
• Define tasks and watch
functions for our files
• Tasks can be anything like
minify, sass/less compile,
bundling, moving
• Gulp watch to monitor for
changes and perform actions
on that file

21. spsave
• https://github.com/s-KaiNet/spsave
• Node.js module for saving files in SharePoint
• Compatible with:
• SharePoint 2013, 2016
• SharePoint Online

22. Visual Studio
Code
• free, open source code editor
• intelliSense, deugging, Git integration,
huge eco system of extensions
• https://code.visualstudio.com/
• Alternatively you can use any text
editor / IDE
• WebStorm
• Atom
• Sublime Text 3
• Notepad++
• Brackets

23. Chrome & SPEditor
• Chrome – Superior front end inspection & debugging
• SPEditor – Chrome Extension to
• Create and update SharePoint Online/SP2013/SP2016 css/js
files, inject files to web, manage web properties and list
Webhooks
• https://chrome.google.com/webstore/detail/sp-editor/ecblfcmjnbbgaojblcpmjoamegpbodhd

24. Demos

25. Demos
• Setting up the Project
• Installing the Packages
• Explaining the Project Structure
• Deploying Master Pages
• Deploying Style Library Assets
• Deploying Page Layouts
• Multiple environment support
(dev/prod)

26. Pros / Cons with this Approach
Pros
• Cuts development time by
multiples
• Can be used to deploy all
assets to an environment fast
• Can be set to monitor only
changed files for even faster
updates
• Circumvent Sandbox or Add-in
deployment process
Cons
• Doesn’t apply assets
automatically
• Current issue with mapping
page layout associated
publishing content type
• No way to deploy things like
content types, site columns,
lists

27. Hybrid Scenario
• Although sandbox solutions are discouraged, this method works well and can be used in
conjunction with Visual Studio / No Code Sandbox Solutions.
• This method allows you to deploy other assets such as site columns, content types, lists, web parts, etc..
• You deploy initially and then can utilize gulp & spsave to continuously deploy updates to existing files.

28. Real World
Deployment
• SharePoint PnP
• Production
• Essential for infrastructure [site
columns, content types, lists and
libraries]
• No need for node / gulp / npm …
• Node / Gulp
• Production or Development
• Ships assets only
• Can greatly speed up development

29. Next Steps

30. Key Takeaways
• Office 365 branding is in a transitional period
• Approaching a crisp, clean, simplified, mobile, modern look
• Expect ongoing changes within the UI… { ie. modern (pages/sites) }
• Microsoft acknowledge that the current branding methods are not the most optimal and is working
towards a better experience
• Current guidance states to stick with Composed Looks & Themes
• Use Alternative CSS or JavaScript manipulation as the next level
• Only create custom masterpage only if you absolutely must
• As SharePoint Patterns & Practices matures it will (hopefully) become more widely adopted, more
samples and clearer documentation

31. Questions / Comments

32. Slides & Demo
• https://www.slideshare.net/tommdaly
• https://github.com/tom-daly/demos