Search code examples
aem

Is it possible to add a custom button on a toolbar of a component on AEM?

enter image description here

On the edit mode of AEM 6.5, if I click on a component, the toolbar above will pop up. Other than adding a dialog (spanner button) by creating cq:dialog node on CRXDE, can you create a custom button on the toolbar? If so, what are some working examples I can find online?

Solution

  • Yes, you can do this.

    You will need to create a custom client library with a JS file that registers the button in the toolbar:

    (function ($document, author) {
    var openDialog = {
        icon: 'coral-Icon--game',
        text: 'Open Dialog',
        handler: function (editable, param, target) {
            author.DialogFrame.openDialog(new author.edit.Dialog(editable));
        },
        condition: function (editable) {
            //show this action only for component type eaem-touchui-open-comp-dialog-register-action/touchui-open-component-dialog
            return editable.type === "eaem-touchui-open-comp-dialog-register-action/touchui-open-component-dialog";
        },
        isNonMulti: true
    };

    $document.on('cq-layer-activated', function (ev) {
        if (ev.layer === 'Edit') {
            author.EditorFrame.editableToolbar.registerAction('EAEM_OPEN_DIALOG', openDialog);
        }
    });
})($(document), Granite.author);

    You can customize the icon, text, the behavior of the button and decide for which components this toolbar customization will be visible.

    source