SlideShare a Scribd company logo

Branding office 365 with front end tooling

•Download as PPTX, PDF•
•
Thomas Daly
Thomas Daly

This document discusses branding Office 365 using front end tooling. It begins with an introduction of the presenter and defines the discussion topics. It then describes branding assets, current deployment methods, challenges with Office 365 versus on-premises, and Microsoft guidance. The bulk of the document demonstrates setting up a project with Node, Gulp, and other tools to deploy branding assets like master pages, styles, and page layouts in a faster, more automated way compared to traditional methods. It highlights pros and cons of the approach and potential for hybrid scenarios. Key takeaways emphasize Office 365 branding changes and guidance to use alternative methods to custom master pages when possible.

1 of 30
Branding Office 365 using front end tooling Presented By: Thomas Daly
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 Azure Bootcamp Organizer • SharePoint Saturday NJ Organizer [2013-2014] • My SharePoint Blog • Git Hub [corp directory controls / o365 sticky footer / bootstrap navigation]
Branding office 365 with front end tooling
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?
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 }
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
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
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
Introducing Font-End Tooling
Tools & Packages Involved • Node • Node Package Manager • Gulp • SPSave • Visual Studio Code • Chrome • SPEditor
Branding office 365 with front end tooling
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
Branding office 365 with front end tooling
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.
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/
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
Gulp
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
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
spsave • https://github.com/s-KaiNet/spsave • Node.js module for saving files in SharePoint • Compatible with: • SharePoint 2013, 2016 • SharePoint Online
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
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
Demos
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)
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
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.
Next Steps
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
Questions / Comments
Slides & Demo • https://www.slideshare.net/tommdaly • https://github.com/tom-daly/demos

More Related Content

Branding office 365 with front end tooling

  • 1. Branding Office 365 using front end tooling Presented By: Thomas Daly
  • 2. 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 Azure Bootcamp Organizer • SharePoint Saturday NJ Organizer [2013-2014] • My SharePoint Blog • Git Hub [corp directory controls / o365 sticky footer / bootstrap navigation]
  • 4. 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?
  • 5. 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 }
  • 6. 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
  • 7. 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
  • 8. 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. Tools & Packages Involved • Node • Node Package Manager • Gulp • SPSave • Visual Studio Code • Chrome • SPEditor
  • 12. 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
  • 14. 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.
  • 15. 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/
  • 16. 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
  • 17. Gulp
  • 18. 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
  • 19. 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
  • 20. spsave • https://github.com/s-KaiNet/spsave • Node.js module for saving files in SharePoint • Compatible with: • SharePoint 2013, 2016 • SharePoint Online
  • 21. 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
  • 22. 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
  • 23. Demos
  • 24. 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)
  • 25. 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
  • 26. 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. 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
  • 30. Slides & Demo • https://www.slideshare.net/tommdaly • https://github.com/tom-daly/demos