Not able to Edit Component if it's embedded inside other component

[ankurk67503819]

Hi Team,

Aem Version- 6.2

We are facing an issue where in we are not able to open the dialog if component is embedded inside another component.

For ex-

We have product grid component where we will have "N" subproducts which will have their own dialog.

So here in product grid component we have added "N" number of product component but we are able to edit the product component as not able to use it's dialog. 

If someone had faced the same issue, Kindly help.

Regards

[antoniom5495929]

        How you embed this component? Using data-sly-resource? If yes in which html tag?

[ankurk67503819]

I have added like below-

   <div  data-sly-resource="${ @ path='card', resourceType='/apps/projectname/components/content/card''}" data-sly-unwrap></div>

[ankurk67503819]

antoniom54959291 wrote...

How you embed this component? Using data-sly-resource? If yes in which html tag?

I have added like below-

   <div  data-sly-resource="${ @ path='card', resourceType='/apps/projectname/components/content/card''}" data-sly-unwrap></div>

[antoniom5495929]

        Try to remove the data-sly-unwrap.

[ankurk67503819]

antoniom54959291 wrote...

Try to remove the data-sly-unwrap.

Hi,

Tried but still it's not working.

Regards

Ankur

[antoniom5495929]

        Ok, So what you could try is to remove all your custom css rules and check if it works. if yes you have some css rules in conflict with AEM. Let me know.

[ankurk67503819]

antoniom54959291 wrote...

Ok, So what you could try is to remove all your custom css rules and check if it works. if yes you have some css rules in conflict with AEM. Let me know.

I tried in we retail demo site as well, tried including breadcrumb inside productgrid component.

But still its not editable when productgrid component dragged and dropped into men page.

[ankurk67503819]

ankur_khare wrote...

antoniom54959291 wrote...

Ok, So what you could try is to remove all your custom css rules and check if it works. if yes you have some css rules in conflict with AEM. Let me know.

I tried in we retail demo site as well, tried including breadcrumb inside productgrid component.

But still its not editable when productgrid component dragged and dropped into men page.

Hi,

If you have embedded a component inside another component could you please share the steps.

Regards

Ankur

[antoniom5495929]

So any news?

[ankurk67503819]

HI,

It works in case of dialog, but it doesn't work for design dialog.

I mean  we are able to open the dialog and edit the component, but if we have a design dialog it doesn't work, is there a solution for the same.

Regards

Ankur

[antoniom5495929]

Could you attach here the xml of design dialog that you are using?

[ankurk67503819]

antoniom54959291 wrote...

Could you attach here the xml of design dialog that you are using?

Hi,

PFB the xml-

<?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"
    jcr:title="Navbar"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
            margin="{Boolean}false"
            type="nav"/>
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <theme
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/form/checkbox"
                        name="./theme"
                        text="Use dark theme"
                        value="inverse"/>
                    <rootLevel
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/form/numberfield"
                        fieldDescription="(eg: 1 for /content/site)"
                        fieldLabel="Absolute root level"
                        max="100"
                        min="0"
                        name="./rootLevel"
                        step="1"
                        value="3"/>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

I am including header component in page component as follows-

   <div  data-sly-resource="${ @ path='header', resourceType='/apps/project/structure/header'}" data-sly-unwrap></div>

<div class="container"
   data-sly-use.templatedContainer="com.day.cq.wcm.foundation.TemplatedContainer">
   <sly data-sly-repeat="${templatedContainer.structureResources}"
      data-sly-resource="${item.path @ resourceType=item.resourceType, decorationTagName='div'}" />
</div>

<div  data-sly-resource="${ @ path='footer', resourceType='/apps/project/structure/footer'}" data-sly-unwrap></div>
</div>

Now i am referring this page component in my template editor empty template.

That empty template i am using to create template

Now template created after following aboves steps are used to create pages

But i am not able to edit the header and footer in my template so i thought of editing the header in design mode on the page created.

Please let me know if i am doing in correct way or not.

Regards

Ankur

[antoniom5495929]

So there is no reason to use design dialog instead of cq:dialog?

If yes please send me a package with all involved component and i could check it in my instance.

[ankurk67503819]

Hi,

If you have we retail demo site you can try the same stuff on heropage template.

You need to add following lines in /apps/we-retail/components/structure/page/partials/body.html -

<div  data-sly-resource="${ @ path='header', resourceType='/apps/we-retail/components/structure/header'}" data-sly-unwrap></div>

<div class="container"
   data-sly-use.templatedContainer="com.day.cq.wcm.foundation.TemplatedContainer">
   <sly data-sly-repeat="${templatedContainer.structureResources}"
      data-sly-resource="${item.path @ resourceType=item.resourceType, decorationTagName='div'}" />
</div>

<div  data-sly-resource="${ @ path='footer', resourceType='/apps/we-retail/components/structure/footer'}" data-sly-unwrap></div>
</div>

Then try to edit header and footer in Hero page template, you won't be able to edit the header or footer.

Regards

Ankur

[antoniom5495929]

I dont have we retail demo sorry.

[antoniom5495929]

Create a component and put inside this html:

<div>
    Title
   <div data-sly-resource ="${'title' @ resourceType='/libs/wcm/foundation/components/title'}"></div> 

    Text
   <div data-sly-resource ="${'text' @ resourceType='/libs/wcm/foundation/components/text'}"></div> 

</div>

I check in my instance and it works properly. 

Let me know if it works properly in yours.

[smacdonald2008]

Make sure the JCR nodes you are using are valid for a design dialog.