Use browser console to register CustomAction element

Of course it is possible to register a CustomAction using a declarative solution. Nevertheless it is also possible to do this directly from the browser without creating any declarative XML. You do not even need the help of the „Script Editor“ web part which is normally used to do something like this in SharePoint.

You can simply execute the following code from within the JS console of your browser after you have navigated to the site where you would like to register the action.

function AddCustomActions() {
	var clientContext = new SP.ClientContext();
	var site = clientContext.get_web();
	var UserCustomActions = site.get_userCustomActions();
 
	var newUserCustomAction = UserCustomActions.add();
	newUserCustomAction.set_location('ScriptLink');	   
	newUserCustomAction.set_scriptSrc('~SiteCollection/SiteAssets/customscript.js');
	newUserCustomAction.set_sequence(3);
	newUserCustomAction.set_title('custom script');
	newUserCustomAction.set_description('');
	newUserCustomAction.update();
 
	clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
	alert('New custom action added to Site.\n\nRefresh the page.');
}
function onQueryFailed(sender, args) {
	alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
AddCustomActions();

If you would like to set different options of the UserCustomAction then you simply grab the first 4 lines of the function „AddCustomActions“ and modify it in the JS console of your browser. Moreover the SP.USerCustomAction object is of course documented in MSDN.

Furthermore it also possible to remove UserCustomActions in the same way. To do this you need to get the ID of the UserCustomAction so that you know which one needs to be deleted. For this you can use the following script which lists all registered UserCustomActions.

function ListCustomAction() {
	this.clientContext = new SP.ClientContext();
	var site = clientContext.get_web();
	this.UserCustomActions = site.get_userCustomActions();
	clientContext.load(UserCustomActions);
	clientContext.executeQueryAsync(Function.createDelegate(this, this.listActions), Function.createDelegate(this, this.onQueryFailed));
}
 
function listActions() {
	var customActionEnumerator = UserCustomActions.getEnumerator();
	var actionID;
	while (customActionEnumerator.moveNext()) {
		var oUserCustomAction = customActionEnumerator.get_current();
		console.log(oUserCustomAction.get_title() + ',' + oUserCustomAction.get_id());        
	}
}
 
function onQueryFailed(sender, args) {
	alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
 
ListCustomAction();

Simply copy the ID of the UserCustomAction which should be removed and insert it into the following script.

function RemoveCustomAction() {
	this.clientContext = new SP.ClientContext();
	var site = clientContext.get_web();
	this.UserCustomActions = site.get_userCustomActions();
	clientContext.load(UserCustomActions);
	clientContext.executeQueryAsync(Function.createDelegate(this, this.deleteAction), Function.createDelegate(this, this.onQueryFailed));
}
 
function deleteAction() {
	var customActionEnumerator = UserCustomActions.getEnumerator();
	var actionID;
	while (customActionEnumerator.moveNext()) {
		var oUserCustomAction = customActionEnumerator.get_current();
		console.log(oUserCustomAction.get_title() + ',' + oUserCustomAction.get_id());
		if (oUserCustomAction.get_id().toString() === 'INSERT_CUSTOMACTION_ID_HERE') {
			actionID = oUserCustomAction.get_id();
		}
	}
	var customActionToDelete = UserCustomActions.getById(actionID);
	console.log(customActionToDelete);
	customActionToDelete.deleteObject();
	clientContext.load(customActionToDelete);
	clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
 
function onQuerySucceeded() {
	alert('Custom action removed');
}
 
function onQueryFailed(sender, args) {
		alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
 
RemoveCustomAction();

IMPORTANT: You can’t use absolute URL for „set_scriptSrc“ like „http://sharepoint/sites/mysitecollection/SiteAssets/customscript.js“ as this would cause some trouble because you would not be able to access your site collection as you will see the yellow ASP error page. If you read this note too late you can simply clear all UserCustomActions which have been registered for a site with the following PowerShell script. The script needs to be run on a server of the farm as it is mostly the case for SharePoint PowerShell scripts.

$site = get-spsite SITE-COLLECTION-URL
$web = $site.OpenWeb()
$web.UserCustomActions.Clear()

If you have any question or comment just drop me a note below.