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

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
   

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!

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.