Add User Custom Actions Using JavaScript

The following example show you
how to  adds a user custom action to the drop-down menu that is displayed on list items. 

<script>

var siteUrl = '/sites/site name';

function createUserCustomActionList() {

    var clientContext = new SP.ClientContext(siteUrl);
    var oWebsite = clientContext.get_web();
    this.oList = oWebsite.get_lists().getByTitle('list name');

//The UserCustomActions property returns the collection of custom actions for a  list.
 
    var collUserCustomAction = oList.get_userCustomActions();
        
//To create a custom action in one of these collections, call the add() function of the UserCustomActionCollection object.
 
    var oUserCustomAction = collUserCustomAction.add();

       //To place the new action on the menu
      //the location property specifies EditControlBlock

    oUserCustomAction.set_location('EditControlBlock');

      //sequence specifies the  placement in relation to other custom actions

    oUserCustomAction.set_sequence(100);
    oUserCustomAction.set_title('derege Custom Action');

      //url specifies the path to a page that defines the action

    oUserCustomAction.set_url(siteUrl + '/_layouts/action link page.aspx');
    oUserCustomAction.update();
       
    clientContext.load(oList, 'Title' ,'UserCustomActions');
   
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded() {

    alert('Custom action created for ' + this.oList.get_title());}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

</script>

related content  
modify user custom actions
delete user custom actions

Do you like this post?
Buy me a cup of coffe to show your appreciation!