Add Button in SharePoint List Ribbon Button Using JSOM

Question

I have to add a button in Sharepoint List Ribbon button & in ECB Menu. here is the code to add ECB menu in Sharepoint List using JSOM.

function AddCustomActions() {
            var listTitle = 'mylist Title';
            var clientContext = new SP.ClientContext();
            var oWebsite = clientContext.get_web();
            var oList = oWebsite.get_lists().getByTitle(listTitle);
            var UserCustomActions = oList.get_userCustomActions();

            var newUserCustomAction = UserCustomActions.add();
            newUserCustomAction.set_location('EditControlBlock');
            newUserCustomAction.set_url("javascript:archieveItem('{ListId}','{ItemId}');");
            newUserCustomAction.set_sequence(3);
            newUserCustomAction.set_title('Archive Item');
            newUserCustomAction.set_description('');
            newUserCustomAction.update();

            clientContext.executeQueryAsync(onQuerySucceed, onQueryFail);
        }
        function onQuerySucceed(sender, args) {
            alert('New custom action added to Site.\n\nRefresh the page.');
        }
        function onQueryFail(sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }
        function archieveItem(aListId, aItemId) {
        try {
            var flag1 = confirm('Are you sure want to archive the Item? Click Ok to Archive and Cancel to Unarchive');
            var clientContext = SP.ClientContext.get_current();
            var oWeb = clientContext.get_web();
            var id = aItemId;
            var listId = aListId;
            var oList = oWeb.get_lists().getByTitle(listTitle);
            var oListItem = oList.getItemById(id);
            if (flag1 == true) {
                oListItem.set_item('Archive', true);
            }
            else if (flag1 == false) {
                oListItem.set_item('Archive', false);
            }

            oListItem.update();
            clientContext.executeQueryAsync(onArchiveSucceeded, onArchiveFailed);
        }
        catch (e) {
            alert(e.message);
        }
    }

Can anyone help how to add button in Ribbon Button using JSOM?

Answer 1

It's the location property, here is the list over default locations from msdn

Example:

 newUserCustomAction.set_location('NewFormToolbar');

Update:

Tbh if you want maximum control, you should use the set_commandUIExtension, you can use the same markup as you when you deploy a custom action.

Could be like this:

var context = new SP.ClientContext.get_current();
var list = context.get_web().get_lists().getByTitle("stackoverflow")
var customAction = list.get_userCustomActions().add();

customAction.set_location('CommandUI.Ribbon.ListView');

var uiExtension = '<CommandUIExtension xmlns="http://schemas.microsoft.com/sharepoint/">' +
                    '<CommandUIDefinitions>' +
                        '<CommandUIDefinition Location="Ribbon.List.CustomizeList.Controls._children">'+
                            '<Button Id="Ribbon.Documents.New.RibbonTest" '+
                                    'Command="Notify" '+
                                    'Sequence="0" '+
                                    'Image16by16="/_layouts/images/NoteBoard_16x16.png" '+
                                    'Image32by32="/_layouts/images/NoteBoard_32x32.png" '+
                                    'Description="Uses the notification area to display a message." '+
                                    'LabelText="Notify hello" '+
                                    'TemplateAlias="o1"/>' +
                        '</CommandUIDefinition>'+
                    '</CommandUIDefinitions>'+
                    '<CommandUIHandlers>'+
                        '<CommandUIHandler Command="Notify" '+
                            'CommandAction="javascript:SP.UI.Notify.addNotification(\'Hello stackoverflow\');" />'+
                    '</CommandUIHandlers>'+
                   '</CommandUIExtension>';

customAction.set_commandUIExtension(uiExtension)


customAction.update();

context.load(list,'UserCustomActions');

context.executeQueryAsync(function() {
    console.log("success");
},
function(sender, args) {
    console.log(args.get_message());
});