New coral quick action on DAM assets

[taryna71844708]

Hi everyone,

I have a requirement to add a new quick action on the image cards in the DAM, for example below:

Following this Coral UI guide: Documentation | CoralUI , it gives an example on how to add to add quick action via Javascript

var quickActionsItem = new Coral.QuickActions.Item();

quickActionsItem.icon = 'copy';

quickActionsItem.href = "www.google.com.au";

quickActionsItem.textContent = "Copy asset link";

var target = document.getElementById('coral-id-20');

target.appendChild(quickActionsItem);

Using the guide, I can manually add the 'Copy asset link' item above specifically adding by element ID. However, I'm just wondering if this is the best way to add the new quick action to all image cards in the DAM.  I don't want this new quick action on folders, just the asset card.  So the process that I'd need to do in JS would be:

1. Find all coral-masonry-items

2. Find the hidden div underneath the coral-masonry-item exclude those with data-foundation-container-meta-folder=true

3. Append the new coral quick action to the coral-quickactions

Is there an easier way to achieve a new quick action on DAM assets?

Thank you

[Theo_Pendle · Accepted solution]

Hello

Your question inspired me to write a full tutorial on how to add a quick-action by levering OOTB functionalities: https://medium.com/@theopendle/aem-adding-a-touchui-quick-action-to-asset-cards-910b09d499d2 . I used your use-case as a basis so it should answer your question.

Here is the result:

Hope it helps and don't hesitate to get back to me if you have questions/opinions!

[taryna71844708]

Amazing! Thank you   Answers my question perfectly!