New coral quick action on DAM assets

taryna71844708

09-10-2019

Hi everyone,

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

Screen Shot 2019-10-10 at 4.33.23 pm.png

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

Screen Shot 2019-10-10 at 4.31.22 pm.png

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

Thank you

Accepted Solutions (1)

Accepted Solutions (1)

Theo_Pendle

MVP

13-10-2019

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:

Peek 2019-10-13 15-08.gif

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