create custom buttons on toolbar of acomponent

[sigarambotlahk]

i have a component i need to add custom button for toolbar of a component


toget this 
i used this script in client lib 

/*
Below JS can be used for TouchUI Edit tool bar Panel
to add custom newsAdd Icon helps to navigate to the Configuration Page URL.

To Enable the Icon, we can add the below script the Component HTL.

<script class="guxfoap-configurationPath" data-sly-test="${ wcmmode.edit || wcmmode.design }">
{
"configPath":"${model.configurationPath @ context='uri'}.html",
"disabled":${model.configurationPath ? 'false' : 'true' @ context='scriptString'}
}
</script>

Note : Replace Config path based on existing model object

*/
(function($document, author) {

    var openConfigPage = {
        icon: 'newsAdd',
        text: 'Configuration Page',
        handler: function(editable, param, target) {
            var getConfigPath = editable.dom.find(".guxfoap-configurationPath").text();
            if (getConfigPath) {
                var jsonConfig = $.parseJSON(getConfigPath);
                window.open(jsonConfig.configPath, "_blank");
            }
        },
        condition: function(editable) {
            var getConfigPath = editable.dom.find(".guxfoap-configurationPath").text();
            if (getConfigPath) {
                console.log('getConfigPath inside' + getConfigPath);
                var jsonConfig = $.parseJSON(getConfigPath);
                if (!jsonConfig.disabled) {
                    return true;
                } else {
                    return false;
                }
            }
        },
        isNonMulti: true
    };
    $document.on('cq-layer-activated', function(ev) {
        if (ev.layer === 'Edit') {
            author.EditorFrame.editableToolbar.registerAction('EAEM_CONFIG_PAGE', openConfigPage);
        }
    });
})($(document), Granite.author);

i am able to create only one icon need to create two but not able to create another one?

[arunpatidar · Accepted solution]

Hi,

could you add more details here? I can see from the code you have added only one icon.

can you also share which clients category have you used in order to load clientlibs?

I added a custom button in the component dialog, I know which is different than your use case but just wanted to share if that will be an option for you as well

https://aemlab.blogspot.com/2019/07/aem-touch-ui-dialog-assets-panel.html

[sigarambotlahk]

HI i used this

[sigarambotlahk]

HI i used this categories="[cq.authoring.dialog]"

[arunpatidar]

Hi, I tried your code, it works for me

(function($document, author) {

    var openConfigPage = {
        icon: 'newsAdd',
        text: 'Configuration Page',
        handler: function(editable, param, target) {
            var getConfigPath = editable.dom.find(".guxfoap-configurationPath").text();
            if (getConfigPath) {
                var jsonConfig = $.parseJSON(getConfigPath);
                window.open(jsonConfig.configPath, "_blank");
            }
        },
        condition: function(editable) {
            var getConfigPath = editable.dom.find(".guxfoap-configurationPath").text();
            if (getConfigPath) {
                console.log('getConfigPath inside' + getConfigPath);
                var jsonConfig = $.parseJSON(getConfigPath);
                if (!jsonConfig.disabled) {
                    return true;
                } else {
                    return false;
                }
            }
        },
        isNonMulti: true
    };

// second action
    var openConfigPage2 = {
        icon: 'newsAdd',
        text: 'Configuration Page',
        handler: function(editable, param, target) {
            var getConfigPath = editable.dom.find(".guxfoap-configurationPath").text();
            if (getConfigPath) {
                var jsonConfig = $.parseJSON(getConfigPath);
                window.open(jsonConfig.configPath, "_blank");
            }
        },
        condition: function(editable) {
            var getConfigPath = editable.dom.find(".guxfoap-configurationPath").text();
            if (getConfigPath) {
                console.log('getConfigPath inside' + getConfigPath);
                var jsonConfig = $.parseJSON(getConfigPath);
                if (!jsonConfig.disabled) {
                    return true;
                } else {
                    return false;
                }
            }
        },
        isNonMulti: true
    };


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

[sigarambotlahk]

Hey Arun_Patidar thanks now it's working

[ChitraMadan]

Hi @sigarambotlahk ,

Please refer to couple of examples below:

https://stackoverflow.com/questions/59831235/is-it-possible-to-add-a-custom-button-on-a-toolbar-of-a...

https://andreishilov.github.io/blog/custom-editable-toolbar-action/

Thanks,

Chitra