Options for Branding SharePoint Online (Office 365)

*Updated on December 10, 2014 with info directly from Microsoft!

“Right now we are working with a bunch of SharePoint MVP’s who are providing all of the common branding scenarios they have. The intention is that we will provided supported hooks to achieve these. And not just across SharePoint but suite wide. We have a list of 30 the engineering team are researching right now based on code they’ve been provided by MVP’s. […] There are no promises right now on when engineering will have the hooks. But it’s a step in the right direction.” – Jeremy Thake

 

BrandingO365

There’s been some interesting chatter going on lately about what the options are for branding Office 365. Recently Microsoft has updated their guidance against using custom master pages, custom site templates or sandboxed solutions! (Newly updated guidance as of December 9, 2014 here.) It seems as if is confirmed that something new will be coming in the future but for now we are stuck in limbo. Companies aren’t going to sit around and wait for the next option to be revealed, they are in need of solutions and guidance immediately. I have done a good amount of research over the past couple weeks and I have found the following options to be available right now:

  1. Don’t custom brand – This is not what you want to hear but for now it is the best option. Wait for future enhancements or use all out of the box options (master pages, themes, etc.).
  2. Use the theming engine – “Designers can use the theming engine to create custom themes, which are called composed looks in SharePoint 2013 and SharePoint Online. At a minimum, themes define colors. A complete theme defines colors, fonts, a background image, and the associated master page, and a .preview file that defines how the .master page is previewed. Developers can write remote provisioning code to apply themes using the remote provisioning pattern.”Source
  3. Brand like you always have before – Design manager, custom master pages, Apps for deployment, etc. HERE’S THE PROBLEM: Microsoft is continually rolling out updates, including to the 2 default master pages. This means if you change them or roll out your own, you will need to compare yours to theirs on a frequent (weekly?) basis. Then you will need to update your master page with changes made to the default ones so that your users can take advantage of all the new features.
  4. Just CSS and JavaScript – After a good amount of research, I have found a middle ground. What if you could have custom CSS and JavaScript running on every page without having to deploy a custom App or use a custom master page? Once you enable the Publishing Feature on your site, you can utilize an Alternate CSS file for all your sites (Site Settings > Look and Feel > Master Page > Expand the Alternate CSS URL section). That just leaves the custom JavaScript. This blog shows step by step how to get a custom JavaScript file running on all pages in SharePoint Online using only JavaScript/JSOM. You are still going to need to check the site for affected CSS/JS changes but it should be on a more “as needed” basis.

What do you think? Are there other options or variants I am missing? Please let me know so I can update immediately.

Tim Ferro

JavaScript on Every Page of SharePoint Online (Office 365)

Tim Ferro on GitHub (vball525)

BLUF: Here’s a single JavaScript (JSOM) file you can use to add a JavaScript file reference on every page in SharePoint Online (Office 365) without an App!

Scenario: You need to run some JavaScript on every page in your site collection in SharePoint Online (Office 365). You don’t want to use a custom master page (because Microsoft is now recommending you not do this anymore), AND you don’t want to have to write an App to do something this simple. I was in this exact situation last week and I wanted a quick but effective way to handle this situation. I kept thinking that there has to be an easy way to do this without an App or a custom master page. GOOD NEWS, THERE IS.

JSOM to the rescue! After a bit of searching around the Internet, I found a couple of great references: here and here. They were so close but I needed to do a little tweaking to get it just right. I just wanted ONE single file that does everything for me. When a simple, single file solution didn’t exist, I created one (mostly from the previous references) and posted it to my GitHub account here! *Note I could not find a way to get CSS with HTC references working (example here). Please let me know if you can and how.

Step 1: Download RegisterJavaScript.js and alert.js (this is the file you want registered on every page in Office 365) from GitHub. Important! Comment out the following lines, then save.

Step 2: Upload them both to your Office 365 tenant. Upload the alert.js file to the “Site Assets” document library. Upload the RegisterJavaScript.js file to any document library you wish.

Step 3: Create a new page. Call it anything you wish, as you will delete this after one use. I called mine “RegisterScript”.

Step 4: Add a Content Editor Web Part to the page and link it to the RegisterJavaScript.js file. Be sure you followed Step 1 and commented out the lines.

Step 5: Save the page, refresh the page, and make sure there are no errors.

Step 6: Uncomment the lines you commented out earlier and in a different tab reupload to the Site Assets library.

Step 7: Refresh the RegisterScript page again. You should see a success pop up!

Step 8: DO NOT REFRESH THE PAGE. Click ok. Close that tab. Do not save anything. From the other tab you have open, click the link for Site Contents. Navigate to the document library where your new page is and DELETE IT. If it is successful, you only need to run this one time.

Step 9: Verify via JavaScript tools. For this example I will show the F12 Developer Tools for Internet Explorer.

DONE! All-in-one file using JSOM you have registered your JavaScript file in SharePoint Online (Office 365) on every page. I have tested this in multiple Office 365 tenants.

I hope this is easy, simple, and helps. Please leave comments or feedback so that it can help others.

Tim Ferro