User Custom Actions Config Page
The following is what I consider to be the easiest way to add script to your SharePoint and SharePoint Online
"Inject JavaScript to any Site or Site Collection via a User Custom Action's ScriptLink property."
2016-03-10 Update
- Add Script ID - this enables PnP SharePoint 2013/2016 Responsive UI to be installed by copying 3 files!
- Dropped /SiteAssets/ in path, this means you can add deep nested paths into other libraries, or even subsites. ~sitecollection/ + url (before was ~sitecollection/SiteAssets/ + url
Why use User Custom Actions?
This is a great technique because it lets you:
- Add JavaScript anywhere - scoped to Site Collection or Site.
- Add CSS via JavaScript
- You can add more than 1 CSS file
- Order them the way you want via Sequence
- You can combine this to load your initial JavaScript file which can be a RequireJS setup and then hand off the controls to RequireJS config
- Does not modify MasterPage
- Works in SharePoint 2010, 2013, 2016 and SharePoint Online
- Only need Site Collection permissions to set up - you don't need to have a Farm Solution or Add-In Model. The permission is only required to set up the ScriptLink.
- The object model provides a way for an administrator to check all the User Custom Actions attached to any site/site collection, so there's a level of oversight available if you want to check if your customizations are ready for migration.
There are various ways to attach a script via User Custom Actions.
- Remote Provisioning (Pattern and Practice) uses it via C# CSOM
- PowerShell remote provisioning
- Farm Solution can invoke the API
- Sandbox Solution can invoke the Client Side Object Model API (*with permission)
- Add-In can invoke the CSOM API as well (with Site Collection - Full Control permission)
The unfortunate part is, there's no UI for a power user to add or view ScriptLinks directly. You need to spin up SharePoint Manager or read/update it via PowerShell.
So what do you have here?
I build a simple config page in JavaScript.
Then I did a load of work to make sure everything runs from One Page.
![Screenshot](https://github.com/johnnliu/UserCustomActionsConfigPage/raw/master/docs/ucacp-1.png)
I also brand it to look a bit like SharePoint. Just a bit.
![Branding](https://github.com/johnnliu/UserCustomActionsConfigPage/raw/master/docs/LINKS.gif)
Install
- Drop configure-page.aspx into a SiteAssets or SitePages library.
- The JavaScript on the page detects and loads some dependencies (jQuery, SP.js etc).
- Provided you have site collection permissions, it'll list all existing User Custom Actions
- You can specify a filename (including any subfolders like spg/hello.js) and give it a sequence number (default to 1000). Then you can install a Custom Action to Site Collection or Current Web. All via the magic of JavaScript.
Specifying different sequence numbers.
hello.js is sequence 1000. hello1.js is sequence 999.
![Screenshot](https://github.com/johnnliu/UserCustomActionsConfigPage/raw/master/docs/ucacp-3.png)
![Screenshot](https://github.com/johnnliu/UserCustomActionsConfigPage/raw/master/docs/ucacp-2.png)
Related Links