Extend WCM Core Teaser component - Customize Authoring Dialog to Add New Fields

[S__k__Agarwal]

We have a requirement to extend WCM Core Teaser component, where we have to add few extra fields for Images under Asset Tab which is

• extending core/wcm/components/image/v3/image/cq:dialog/content/items/tabs/items/asset
• having sling:resourceType set as core/wcm/components/include/imagedelegate

I am looking for solution how we can reutilize the Asset Tab Dialog without duplicating it & add my requirement specific fields.

@aanchal-sikka @EstebanBustamante 

@arunpatidar @Shashi_Mulugu 

@lukasz-m @Mahedi_Sabuj 

@kautuk_sahni @Sudheer_Sundalam

@lukasz-m @Rohan_Garg

[giuseppebag]

You can leverage Sling Resource Merger, ie you will have to

• replicate the node structure till the parent container (/apps/core/wcm/components/teaser/v3/teaser/cq:dialog/content/items/tabs/items/asset) in your dialog
• Insert your new image fields (e.g., customImageField) under the asset node
• Use sling:orderBefore to position your fields relative to existing ones. For example, to place customImageField before the default image field

Key Advantages:

• No Redundancy: Reuses the existing Asset Tab logic (e.g., validation, rendering) from the core component.
• Maintainability: Future core updates automatically propagate to your overlay, reducing maintenance overhead.
• Flexibility: Extend only the necessary parts of the dialog, minimizing conflicts

[SantoshSai]

Hi @S__k__Agarwal,

You can extend the dialog and reuse the Asset tab of the image delegate using sling:resourceSuperType and overlaying only what you need to customize. Here's how:

Path: apps/<your-project>/components/teaser/cq:dialog/content/items/tabs/items/asset

Instead of copying the full asset tab dialog from the core image component, create a lightweight overlay and use:

sling:resourceSuperType = "core/wcm/components/image/v3/image/cq:dialog/content/items/tabs/items/asset"

Then just add your custom fields under items.

Sample Structure

/apps/<your-project>/components/teaser
├── cq:dialog
│   └── content
│       └── items
│           └── tabs
│               └── items
│                   └── asset (nt:unstructured)
│                       ├── sling:resourceType = "granite/ui/components/coral/foundation/fixedcolumns"
│                       ├── sling:resourceSuperType = "core/wcm/components/image/v3/image/cq:dialog/content/items/tabs/items/asset"
│                       └── items
│                           └── mycustomfield (nt:unstructured)
│                               ├── sling:resourceType = "granite/ui/components/coral/foundation/form/checkbox"
│                               ├── name = "./myCustomCheckbox"
│                               ├── text = "Enable Foo"
│                               └── value = "true"

The key is that sling:resourceSuperType allows you to inherit the original asset tab, and the items node allows you to add your custom fields without duplicating the full tab.

• The Teaser component uses the Image delegate (core/wcm/components/include/imagedelegate) in the dialog to include the image dialog.

• That delegate itself has sling:resourceSuperType pointing to core/wcm/components/image/v3/image, and it internally uses the Asset tab.

• By overlaying only the tab and not the full dialog or image component, you keep clean inheritance and future-proofing (e.g., in case Adobe updates the core component).

Hope that helps!

[AmitVishwakarma · Accepted solution]

Hi @S__k__Agarwal ,

You do not need to copy or duplicate the entire Asset tab. Instead, you leverage sling:resourceSuperType and Sling Resource Merger to cleanly extend only the part you need.

Solution:

1. Overlay Only the asset Node

Create the following structure in your Teaser component dialog:

/apps/<your-project>/components/teaser/cq:dialog/content/items/tabs/items/asset

2. Set sling:resourceSuperType

sling:resourceType = "granite/ui/components/coral/foundation/fixedcolumns"
sling:resourceSuperType = "core/wcm/components/image/v3/image/cq:dialog/content/items/tabs/items/asset"

This means: inherit the entire asset tab from the core component, but allow local extension.

3. Add Your Custom Field(s)

Under the items node of this new asset overlay, add your custom fields.

/apps/<your-project>/components/teaser/cq:dialog/content/items/tabs/items/asset/items/myCustomImageField

Example:

sling:resourceType = "granite/ui/components/coral/foundation/form/checkbox"
name = "./myCustomCheckbox"
text = "Enable Foo"
value = "true"

Regards,
Amit

[NirbhayAEMBee]

Use granite:include or cq:include within the dialog structure
Inside a dialog definition (e.g., cq:dialog/.content.xml)
<myField
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/include"
path="/apps/your/components/basecomponent/cq:dialog/content/items/fields/fieldToInclude"/>

This allows you to include a part of another dialog. This is the correct way to reuse parts of a dialog.

[Supriya_Savre]

Hi @S__k__Agarwal,

I hope the response shared above helped address your question. If it did, it would be wonderful if you could mark the most helpful one as "correct reply"— this helps others in the community find helpful solutions more easily.

If you’re still facing any challenges, please feel free to continue the conversation here. We’re happy to support further.