Nested parsys in Component

[Prashardan]

Hi Team

I have a requirement where I have to create a component and I don't need dialogue however when cover is added I want to add one abc-container component and abc-container component should have headline component which internal should have text component.

I have tried this using htl but not working. 

<div class="1st comp"

            data-sly-resource="${"1st comp" @resourceType='project/components/content/1stcomp', decorationTagName='div'}">

<div class="2nd comp"

            data-sly-resource="${"2nd comp" @resourceType='project/components/content/2ndcomp', decorationTagName='div'}">

<div class="3rd comp"

            data-sly-resource="${"3rd comp" @resourceType='project/components/content/3rdcomp', decorationTagName='div'}">

</div>

</div>

</div>

In short, I want to have nested component added by default. Any leads on this requirement please.

Thanks in advance.

[giuseppebag]

If you need to create a component which, once drag&dropped, it will contain other components you might want to consider using the cq:template feature. For example, you can create a file named _cq_template in the component folder, specifically at component/_cq_template/.content.xml, with the following content:

<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured">
    <name
        jcr:primaryType="nt:unstructured"
        jcr:title="Name:"
        sling:resourceType="project/components/core/form/text"
        name="submitted[nome]"
        required="true"
        requiredMessage="This field is required."
        rows="1"
        type="text"/>
    <surname
        jcr:primaryType="nt:unstructured"
        jcr:title="Surname:"
        sling:resourceType="project/components/core/form/text"
        name="submitted[cognome]"
        required="true"
        requiredMessage="This field is required."
        rows="1"
        type="text"/>
<country
        jcr:primaryType="nt:unstructured"
        jcr:title="Country:"
        sling:resourceType="project/components/core/form/options_rte"
        name="submitted[nazione]"
        requiredField="true"
        requiredMessage="This field is required."
        rows="1"
        source="local"
        textIsRich="true"
        type="drop-down">
        <items jcr:primaryType="nt:unstructured">
            <item0
                jcr:primaryType="nt:unstructured"
                disabled="true"
                selected="true"
                text="Select"
                value=""/>
            <item1
                jcr:primaryType="nt:unstructured"
                selected="false"
                text="Austria"
                value="austria"/>
</items>
    </country>

    <profile-type
        jcr:primaryType="nt:unstructured"
        jcr:title="Your Profile"
        sling:resourceType="project/components/core/form/options_rte"
        name="submitted[profile]"
        required="true"
        source="local"
        type="radio">
        <items jcr:primaryType="nt:unstructured">
            <item0
                jcr:primaryType="nt:unstructured"
                selected="true"
                text="Private"
                value="private"/>
            <item1
                jcr:primaryType="nt:unstructured"
                selected="false"
                text="Corporate"
                value="corporate"/>
        </items>
    </profile-type>
</jcr:root>

As you can see, you can replicate an entire JCR content as if you were downloading a page from CRXDE.

[AmitVishwakarma]

Hi @Prashardan ,

Use _cq_template

When you use _cq_template, AEM automatically adds default child components in your component's JCR structure the moment it’s dragged.

Step-by-Step Implementation

1. Component A Path

/apps/project/components/content/component-a

2. Create Folder Structure

component-a/
├── _cq_template/
│   └── .content.xml   ← Defines nested components
├── component.html     ← HTL to render children

3. _cq_template/.content.xml

Here’s your exact nesting using correct XML:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="nt:unstructured">

    <!-- abc-container -->
    <abc-container
        jcr:primaryType="nt:unstructured"
        sling:resourceType="project/components/content/abc-container">

        <!-- headline inside abc-container -->
        <headline
            jcr:primaryType="nt:unstructured"
            sling:resourceType="project/components/content/headline">

            <!-- text inside headline -->
            <text
                jcr:primaryType="nt:unstructured"
                sling:resourceType="project/components/content/text"/>
        </headline>
    </abc-container>
</jcr:root>

This ensures when Component A is dropped, AEM creates:

component-a
└── abc-container
    └── headline
        └── text

4. HTL for Component A → component.html
This renders the structure you just created.

<div class="component-a">
    <!-- Render abc-container (which includes headline → text) -->
    <div data-sly-resource="${@path='abc-container'}"></div>
</div>
​

Test Result:

1. Go to AEM Pages.

2. Drag Component A onto a page.

3. Open CRXDE → You’ll see the full nested structure auto-created.

4. Component A’s HTL renders abc-container → inside that headline → inside that text.

Regards,
Amit