Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

New coral quick action on DAM assets

Avatar

Level 2

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

1 Accepted Solution

Avatar

Correct answer by
Level 10

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!

View solution in original post

2 Replies

Avatar

Correct answer by
Level 10

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!

Avatar

Level 2

Amazing! Thank you   Answers my question perfectly!