Loading JavaScript or CSS on Every Page in a Site using JSOM (UserCustomActions)

A common question in SharePoint forums is how do I load SuchAndSuch.js on every page in the site collection (ok, let’s be honest, it’s usually how to I load jQuery on every page). This is pretty easy to do using the SharePoint client object model and setting something called UserCustomActions. I showed using this utility page in my Accordion View, Custom List View CSR Template. In this post, I’m going to show what’s going on behind the curtains in that utility page. It will be an ASPX page (really just a text file) that you can drop in any SharePoint document library and click on to start immediately configuring UserCustomActions at either the site or the web level. It has no dependencies. It is a self contained page with only HTML and pure JavaScript.

When you put it in a document library and click on it, it looks like so:

Set UserCustomActions

All you have to do is type one path to a JavaScript or CSS file per line (in either the site or web), into the text area. By default it operates on UserCustomActions at the site level (i.e. site collection). If you want it to get/set user custom actions at the web level, change the selected scope value. Note that in order to ensure that only files in the site or web are loaded, it skips any path that doesn’t begin with ~site or ~sitecollection. And while there may be some clever exceptions, in general any site user custom action should start with ~sitecollection, and any web user custom action should start with ~site. The utility page doesn’t enforce that, but it will skip any path that doesn’t begin with one or the other. Anyway, once you’ve typed in all of the paths you want, click the save button and it will save the user custom actions and popup a message box on success or failure. If it fails, you probably don’t have sufficient privileges to set user custom actions at the current scope.

I try to avoid doing “here’s a big block of code” kind of posts, but sometimes it’s hard to break up a big block of code and explain it in isolated chunks. In those cases, a big block of code with a lot of comments can be somewhat self-documenting, so that’s what I’ve done below. This is the complete source code for my ASPX page. Just copy and paste the whole thing into notepad and save it with a .aspx extension. Upload that to a SharePoint document library and click on it to open it and start configuring UserCustomActions. Hopefully, I’ve included enough comments that if you know some JavaScript you can work your way through what it’s doing if you care.

I like to make utility pages like this for performing common administrative tasks that are not available through the OOB browser based interface for SharePoint. It’s really just a SharePoint wiki page. I often see people doing these tasks in deployment scripts using C# or Powershell and the server object model or client object model. The server object model is great for these kind of tasks if you are a farm administrator or can get a farm administrator to run it. If not, the client object model is an option, but many of these tasks are routinely needed by plain-old site collection administrators, who may not even have the authority to install the client object model on their corporate desktop. And generally do not have the skills and tools to do C# and PowerShell. But drop this text file in a document library, open it, fill in this text box, and click this button are instructions that should be easy enough for any SCA to follow. Hope someone finds this useful!

How to: Add and Modify UserCustomActions Using JavaScript

Leave a Comment