Add and Delete user custom action using JavaScript in SharePoint

This JSOM SharePoint tutorial, we will discuss how to add and delete user custom action using JavaScript in SharePoint 2013/2016 or SharePoint Online.

SharePoint Custom actions are types of app experiences where you can develop and deploy them for the menu items to provide new functionality.

Creating a user custom action on the Site Actions menu of a Web site is similar to creating an action for list items: You call the Add () method, set properties for the action, and then call Update ().

The following example specifies Microsoft.SharePoint.StandardMenu for Location, and Site Actions for Group, to place the new action on the Site Actions menu.

add user custom action in sharepoint using javascript

Add and Delete user custom action using JavaScript in SharePoint

Here, we will provide a user the options to enter the user custom action name and two-button (one to add user custom action and another one is to delete the user custom action).

Here we will use the JavaScript object model (jsom) code to add or delete user custom

Step 1:
Navigate to your SharePoint 2013 site.

Step 2:
From this page select the Site Actions | Edit Page.

Edit the page, go to the “Insert” tab in the Ribbon and click the “Web Part” option. In the “Web Parts” picker area, go to the “Media and Content” category, select the Script Editor web part and press the “Add button”.

Step 3:
Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert the HTML and/or JavaScript as in the following:

Add and Delete user custom action using JavaScript in SharePoint
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" language="javascript">
var clientContext;
var oUserCustomAction;
// Delete user custom action on the Site Actions menu
function deleteUserCustomAction()
{
clientContext = new SP.ClientContext()
var oWebsite = clientContext.get_web();
collUserCustomAction = oWebsite.get_userCustomActions();
clientContext.load(oWebsite, 'UserCustomActions', 'Title');
clientContext.executeQueryAsync(Function.createDelegate(this, this.deleteCustomAction), Function.createDelegate(this, this.onQueryFailed));
}
function deleteCustomAction()
{
var CstomAName = $(“#text1").val();
var customActionEnumerator = collUserCustomAction.getEnumerator();
while (customActionEnumerator.moveNext())
{
var oUserCustomAction = customActionEnumerator.get_current();
if (oUserCustomAction.get_title() == CstomAName)
{
oUserCustomAction.deleteObject();
clientContext.load(oUserCustomAction);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceededdelete), Function.createDelegate(this, this.onQueryFailed));
}
}
}
function onQuerySucceededdelete()
{

$(“#result").empty();
$(“#result").text('Custom action removed\n\nTo view the new menu item, refresh the page.');
}
function onQueryFailed(sender, args)
{
$(“#result").empty();
$(“#result").text('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

//Create user custom action on the Site Actions menu

function CreateUserCustomAction()
{
var CstomAName = $(“#text1").val();
var clientContext = new SP.ClientContext();
var site = clientContext.get_web();
var collUserCustomAction = site.get_userCustomActions();

var newUserCustomAction = collUserCustomAction.add();
new UserCustomAction.set_location('Microsoft.SharePoint.StandardMenu');
new UserCustomAction.set_group('SiteActions');
new UserCustomAction.set_sequence(1000);
new UserCustomAction.set_title(CstomAName);
new UserCustomAction.set_imageUrl('/_layouts/images/myIcon.jpg');
new UserCustomAction.set_description('Menu item added via ECMAScript');
new UserCustomAction.set_url('/_layouts/create.aspx');
new UserCustomAction.update();
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args)
{
$(“#result").empty();
$(“#result").text('New menu item added to Site Actions menu.\n\nTo view the new menu item, refresh the page.')
}

function onQueryFailed(sender, args)
{
$(“#result").empty();
$(“#result").text('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

<h2>Example Custom Action using SharePoint 2013 CSOM </h2>
</br>
</br>
Custom Action Name: <inputtype="text"id="text1″/>
</br>
</br>
<input type="button"value="Create User CustomAction"id="create"onclick="CreateUserCustomAction()"/>
</br>

</br>
<input type="button"value="Delete User CustomAction"id="Delete"onclick="deleteUserCustomAction()"/>
</br>
<div id="result"></div>

Add a user custom action on the Site Actions menu:

delete user custom action in sharepoint using javascript

Delete a user custom action on the Site Actions menu:

sharepoint custom user actions

You may like following SharePoint javascript tutorials:

I have tried creating and selecting a user custom action on the Site Actions menu, which would provide you a greater flexibility in user interaction on the application. I have achieved this using JavaScript in SharePoint 2013. I hope this article is helpful to you and hereby I expect you to revert back to it in case of any queries.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

>