Expand my Community achievements bar.

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

AEM 6.5 - Customize image component having DM media capability

Avatar

Level 2

AEM Guru,

 

We want to customize the Image V2 core component which is having DM functionality. like adding few CTA functionality  along with the existing core functionality like DM and Lazy loading.

 

When i tried to add the cq:dialog my screen is looking like this :

 

Screen Shot 2021-03-10 at 6.57.14 PM.png

null tab is from image component and other ones are from my customization.

 

Any help will be appreciated. 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @aem_dev2,

For override/extend the dialog when your component is inheriting from core Image V2

  • Copy the cq:dialog node from core v2 image to your image component
  • If you want the Asset and Metadata tabs and its content to be available along with new tabs,
    • Delete the asset and metadata node under /cq:dialog/content/items/tabs/items
    • add new tab items under this path.
  • If you don't want the Asset and Metadata tabs and its content to be part of your dialog,
    • let the node name be asset and metadata, you can choose to change the title of tab item (asset node for example) and its contents. 
    • node named asset and metadata should be available which indicates we are overriding the respective nodes, otherwise the same will be available in your dialog as we are inheriting the component from core v2 Image.

Screenshot for clarity:

Vijayalakshmi_S_0-1615390551637.png

Only asset node is overridden, metadata tab is coming from Core Image V2 dialog

Vijayalakshmi_S_1-1615390611255.png

 

View solution in original post

5 Replies

Avatar

Correct answer by
Community Advisor

Hi @aem_dev2,

For override/extend the dialog when your component is inheriting from core Image V2

  • Copy the cq:dialog node from core v2 image to your image component
  • If you want the Asset and Metadata tabs and its content to be available along with new tabs,
    • Delete the asset and metadata node under /cq:dialog/content/items/tabs/items
    • add new tab items under this path.
  • If you don't want the Asset and Metadata tabs and its content to be part of your dialog,
    • let the node name be asset and metadata, you can choose to change the title of tab item (asset node for example) and its contents. 
    • node named asset and metadata should be available which indicates we are overriding the respective nodes, otherwise the same will be available in your dialog as we are inheriting the component from core v2 Image.

Screenshot for clarity:

Vijayalakshmi_S_0-1615390551637.png

Only asset node is overridden, metadata tab is coming from Core Image V2 dialog

Vijayalakshmi_S_1-1615390611255.png

 

Avatar

Community Advisor

Small correction in my response. If we don't want the parent tabs to be part of the dialog, solution mentioned by @Anudeep_Garnepudi should be the way.

I overlooked to mention sling resource merger properties. You can leverage other properties like sling:orderBefore, sling:hideProperties and sling:hideResource based on the need.

Avatar

Level 2
@Vijayalakshmi_S @Anudeep_Garnepudi - Sorry... I was out sick from last few days. As of now , i trying to create new functionality on top of the existing image component. So basically i dont have option to add to remove the Asset & Metadata option it is available by default. If i have to create new component , will i be getting all the features of image core component - like Lazy loading , DM feature etc

Avatar

Community Advisor

If we create new image component inheriting from core image component, we should inherit features as available from core image component. You can then add new functionality on top of it or override existing functionality from core component based on the need.

Avatar

Community Advisor

@aem_dev2 

Make sure your tabs are under cq:dialog/content/items/tabs/items path. If you don't want the parent component tabs use sling resource merger property sling:hideChildren   String[]    asset,metadata to items node under tabs.