Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

How to add custom action tool bar on aem asset selection ?

Avatar

Level 2

I want to add a button on asset tool bar, when I hit custom button a pop should be appear and in pop all selected asset should be list,
For example we have already a button Share link, and when we click on share link then a pop is appeared with list, see the below screenshot, Similarly I want a new custom button and in pop a list display for all selected asset

Shahid_Siddiqui_04_0-1716810535133.png

Shahid_Siddiqui_04_1-1716810675105.png

Thankyou

 

 

2 Replies

Avatar

Community Advisor

@Shahid_Siddiqui_04 You can refer to the below approach:

1. JavaScript should extend the existing functionality of the asset selection toolbar. Example:  

(function(document, $) {
'use strict';

$(document).on('foundation-contentloaded', function(e) {
var toolbar = $(".granite-collection-actionbar");
if (toolbar.length > 0) {
var customButton = $('<button is="coral-button" variant="primary" icon="add" title="Custom Action">Custom Action</button>');

customButton.on('click', function() {
// Add your custom action logic here
alert('Custom action triggered');
});
toolbar.append(customButton);
}
});
})(document, Granite.$);

2. Update your component to include the newly created client library

<clientlibs js="custom-asset-toolbar" />

Hi @diksha_mishra Thankyou for reply, can you please explain this more? 
I want to add my new custom button somewhere in tool bar after asset selection, and then I can perform my custom logic
/libs/dam/gui/content/assets/jcr:content/actions/selection this is action path tool bar path