Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

AEM 6.5 - Customize image component having DM media capability

aem_dev2
Level 2
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
Vijayalakshmi_S
Correct answer by
Community Advisor
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
Vijayalakshmi_S
Correct answer by
Community Advisor
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

Vijayalakshmi_S
Community Advisor
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.

aem_dev2
Level 2
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
Vijayalakshmi_S
Community Advisor
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.

Anudeep_Garnepudi
Community Advisor
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.