Solved

Nested parsys in Component

Forum|Forum|10 months ago
March 21, 2025
4 replies
639 views

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>

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

Thanks in advance.

Best answer by arunpatidar

Hi @mukeshyadav_ , @prashardan

You don't need a cq:dialog , it will work with editConfig as well.

Make sure you have editConfig to prevent deleting children components.

Example : https://github.com/arunpatidar02/aemaacs-aemlab/blob/master/ui.apps/src/main/content/jcr_root/apps/aemlab/oneweb/components/compositecontainer/_cq_childEditConfig.xml

giuseppebaglio

New Member

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

Community Advisor

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

MukeshYadav_

Community Advisor

Hi @prashardan ,

You may take reference fromhttps://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/render-aem-component-b-into-html-of-aem-component-a/m-p/741774#M182075
and data-sly-resource should be working.

Even if you don't want any thing in dialog you need to keep empty cq:dialog or editConfig node to get component dragged to page.

You may give a try by keeping absolute path like '/apps/project/components/comp1'

Thanks

arunpatidar

Accepted solution

Community Advisor

Hi @mukeshyadav_ , @prashardan

You don't need a cq:dialog , it will work with editConfig as well.

Make sure you have editConfig to prevent deleting children components.

Example : https://github.com/arunpatidar02/aemaacs-aemlab/blob/master/ui.apps/src/main/content/jcr_root/apps/aemlab/oneweb/components/compositecontainer/_cq_childEditConfig.xml

Arun Patidar

kautuk_sahni

Community Manager

@prashardan Did you find the suggestions helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!

Kautuk Sahni

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded