Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

create custom buttons on toolbar of acomponent

sigarambotlahk
Level 1
Level 1

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
Arun_Patidar
Correct answer by
Community Advisor
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

View solution in original post

6 Replies
Arun_Patidar
Correct answer by
Community Advisor
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

View solution in original post

Arun_Patidar
Community Advisor
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);