Expand my Community achievements bar.

SOLVED

create custom buttons on toolbar of acomponent

Avatar

Level 2

i have a component i need to add custom button for toolbar of a component
Screenshot 2021-07-17 at 2.48.33 PM.png

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?



 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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



Arun Patidar

View solution in original post

6 Replies

Avatar

Correct answer by
Community Advisor

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



Arun Patidar

Avatar

Community Advisor

Hi, I tried your code, it works for me

 

Screenshot 2021-07-18 at 18.08.40.png

 

(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);

 

 



Arun Patidar