Adobe Experience Manager Sites & More

VikasGs5 · 11/29/25

I am creating one custom component (let's say - resorts-card) and for that I want to include the Teaser component present in the project. But when I am doing so, the dialog for the main component (resorts-card) is opening fine but then the inner component (Teaser) - for this dialog is not opening. Also, when i checked the Network tab for the issue, the call which is being made when I try to author the inner cmp (Teaser), it is getting as 404.
Question - Do we have any known issues for including the Teaser cmp in AEM, as i tried including Title, Image, Button components & it worked well with those.
Although the XML & HTML content is pretty straight-forward but putting down just for the reference.
Resorts-card XML (main)

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Resorts Card"
    cq:isContainer="{Boolean}true"
    componentGroup="Demo - Content"/>

CQ Dialog XML

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Resorts Card"
    cq:isContainer="{Boolean}true"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <modalTitle
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldLabel="Title"
                                name="./title"
                                required="{Boolean}false" />
                            <columncount
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                fieldDescription="Enter the number of teaser cards required"
                                fieldLabel="Teaser Card Count"
                                name="./cardCount"
                                value="{Long}0"/>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

HTML file

<sly data-sly-resource="${'teaser' @ resourceType='demo/components/teaser', decoration=true}"></sly>

Whereas when I use below lines, it works fine for Title, Button, Image

<sly data-sly-resource="${'title' @ resourceType='demo/components/title', decoration=true}"></sly>
<sly data-sly-resource="${'image' @ resourceType='demo/components/image', decoration=true}"></sly>
<sly data-sly-resource="${'button' @ resourceType='demo/components/button', decoration=true}"></sly>

Shashi_Mulugu · 12/1/25

Hi @VikasGs5 ,

Thanks for reaching out to Adobe Experience League Community for AEM Forum. A great place to learn and share.

Regarding your question, can you also share your teaser component content xml and dialog xml? Anything you changed from.ootb?

Also are you able to author teaser Component directly on the page? Any issues observered?

For me at first sight, appears to be a teaser component setup problem than a container component integration problem

VikasGs5 · 12/1/25

Please refer the below image for my Teaser component (demo/components/teaser) which I am referring over here along with the content XML file whereas the dialog XML is being inherited from the "libs".

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
    xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Teaser"
    sling:resourceSuperType="core/wcm/components/teaser/v2/teaser"
    componentGroup="Demo - Content"
    imageDelegate="demo/components/image"/>

Yes, I am able to drag the Teaser component alone on the page & author it as well. The only issue is when we are using it as resource in my custom cmp, it is giving issue.

One more observation about the same --> since our OOTB teaser is pointing to libs core teaser V2 (latest) version so I tried pointing to that as well directly, but the issue persists (refer the code below).

<sly data-sly-resource="${'teaser' @ resourceType=‘demo/components/teaser’, decoration=true}"></sly>
<sly data-sly-resource="${'teaser' @ resourceType=‘/libs/core/wcm/components/teaser/v2/teaser’, decoration=true}"></sly>

Whereas, when we point the same to Teaser V1, it works well, see the code below.

<sly data-sly-resource="${'teaser' @ resourceType=‘/libs/core/wcm/components/teaser/v1/teaser’, decoration=true}"></sly>

giuseppebaglio · 12/2/25

hi @VikasGs5,

Ensure the Teaser editor clientlibs are included. In your dialog definition, add this field:

extraClientlibs=["core.wcm.components.teaser.v1.design","core.wcm.components.teaser.v2.editor","core.wcm.components.image.v3.editor"]

VikasGs5 · 12/2/25

Hi @giuseppebaglio
Thanks for the input!
I tried what you mentioned & added the clientlibs, below is the updated dialog XML but still it doesn't work.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Resorts Card"
    cq:isContainer="{Boolean}true"
    extraClientlibs="[core.wcm.components.teaser.v1.design,core.wcm.components.teaser.v2.editor,core.wcm.components.image.v3.editor]"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <modalTitle
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldLabel="Modal Title"
                                name="./modalTitle"/>
                            <columncount
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                fieldDescription="Enter the number of cards required"
                                fieldLabel="Card Count"
                                name="./cardCount"
                                value="{Long}0"/>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>