List Aggregator App (SPFx)

Add user custom action to list ECB menu in SharePoint Online using JavaScript object model (jsom)

Add use custom action to list ECB menu in SharePoint Online using JavaScript object model

This SharePoint tutorial explains, how we can add a custom action to list the ECB menu in SharePoint Online using the JavaScript object model. In my previous post, we have discussed on Add custom actions in Site Actions menu in SharePoint Online using JavaScript Object Model and Delete custom action menu option in Site Actions menu in SharePoint online using JavaScript Object Model, which you can read from here.

Add user custom action to list ECB menu in SharePoint Online using JavaScript object model

Here also you can use the below code inside a script editor web part in web part page in SharePoint 2013.

SharePoint deveopment training course
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<input name="ADD" id="btnAdd" type="submit" value="Add new custom actions ECB Menu" />
<script language="javascript" type="text/javascript">

$(document).ready(function () {

$("#btnAdd").click(function () {

AddCustomActions();
});
});
function AddCustomActions() {
var clientContext = new SP.ClientContext();
var web=clientContext.get_web();
var oList = web.get_lists().getByTitle('MeetingAnnouncement');
var customActions = oList.get_userCustomActions();

var newCustomActionMenu = customActions.add();
newCustomActionMenu.set_location('EditControlBlock');
newCustomActionMenu.set_sequence(200);
newCustomActionMenu.set_title('EnjoySharePoint.com');
newCustomActionMenu.set_url('http://www.enjoysharepoint.com');
newCustomActionMenu.update();
clientContext.load(oList, 'Title' ,'UserCustomActions');
clientContext.executeQueryAsync(Function.createDelegate(this, this.onSuccess),
Function.createDelegate(this, this.onFailure));
}
function onSuccess() {
alert('New Item Added to ECB Menu');
}
function onFailure(sender, args) {
alert('Error Occurred. ' + args.get_message());
}
</script>

Once you execute the code, you can see the option will appear in the ECB menu like below:

Add user custom action to SharePoint Online jsom
Add user custom action to SharePoint Online jsom

You may like follow SharePoint tutorials:

Hope this SharePoint tutorial explains, how to add user custom action to list ECB menu in SharePoint Online using JavaScript object model (jsom).

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →