[O365] Deploying a SharePoint theme / branding using JavaScript only

With provider hosted add-ins being introduced in SharePoint 2013, the world of SharePoint devs shifted to using provisioning schemes to get their stuff in SharePoint sites. And this worked, quite well i might add. You might have read my post on SPMeta2 vs PnP (which is a bit outdated I must add). These provisioning engines allow your to provision “stuff” (files, folders, lists, contenttypes, whatever) to SharePoint. Amongst other things, they have one thing in common: they’re built on top of the CSOM (Client Side Object Model) C# SDK. This means that you are forced to run them as a stand-alone task, or deploy a provider hosted app which includes having a server up and running somewhere. So what if you do not want that? 

In my case, I wanted to deploy some branding to a site, plain and simple. Not something you’d really would want to have to spin up a server for. But I didn’t want to create a console app for private use either. And so I ventured into the world of JavaScript once again, trying to leverage the JSOM (JavaScript Object Model) to deploy things.

At this moment, there are no provisioning frameworks like SPMeta2 or PnP available for JSOM yet. The SPMeta guys let me know that they’re considering a JSOM port, but it’s not there at this point in time.

Ok so we’re left without a framework at this point in time, but we can still do what’s needed! In short, there’s three things I wanted to do:

  1. Copy the required content (css, javascript, images, theme file) to my site.
  2. Set the CSS to be the alternate CSS for the site
  3. Apply the theme to the site

Here’s the good news: there are API’s for all of this available!

Copying content

For copying content, I inspired myself with the bulk upload sample of the PnP team you can find here. This provided the basis for an uploader class. The most important code (all samples are in TypeScript by the way):

But I also needed a way to make sure the target path exists. This code takes care of that:

Set the alternate CSS URL / theme

This was easier than I expected it to be. There simply is a method on the web object that allows you to set the URL. Same goes for the theme. Than there’s some plumbing, mainly the jQuery promises you’ll need to make sure all of the async stuff in done in the correct sequence. I found that I couldn’t combine setting the alternate css url + theme in one execution, it would then complain that the web was being altered by another process. So this is the safe way to get there:

 

That’s all folks!

I’ve pushed the entire project to a GitHub repo you can find here: https://github.com/atosorigin/sharepoint-theming-app. Feel free to reuse it, feel just as free to brand all of your sites with the Atos branding although unless you’re a colleague I wouldn’t know why you would want to do that 😉

Leave a Reply

Your email address will not be published. Required fields are marked *