Inner component is unable to edit in touchUI AEM-6.4.4

[vijays80591732]

Hello All,

  I have a component called SecondaryNav and SecondaryNavReference and both are having CQ: dialog. In, SecondarNavReference component I'm just calling the SecondaryNav Component via data-sly-resource.

On the page, I have drag and drop the SecondaryNavReference component and I'm able to see the SecondaryNav component as well but I'm unable to edit the SecondaryNav component (inner component).

Further debugged and found out that the CQ editable overlay is not appearing for the inner component. The same code and components are working properly in classic UI and able to edit the inner component as well. FYI.

Below the code snippet:

<template data-sly-template.secondaryNavigation="${@model}">
<div data-sly-test="${wcmMode.edit}">
(Secondary Navigation Reference)
</div>
<div class="navigation row">
<div id="menu-page-data" style="display:none;">${model.menuListJson @ context='unsafe'}</div>

<div
class="navigation-vertical columns collapsed large-5"
data-sly-resource="${model.verticalNav @ resourceType='myapp/core/components/common/richtext'}">
</div>
<a data-sly-test="${model.showMenu}"
class="dropdown-navigation-button ${model.menuIconClass} link-icon"
href="#">${model.menuText}</a>

<div
class="navigation-horizontal columns collapsed large-7"
data-sly-resource="${model.horizontalNav @ resourceType='myapp/core/components/common/richtext'}">
</div>
</div>
</template>

================

model.verticalNav will gives the value as /content/myapp/ph/en_ph/home/one/sample/jcr:content/par/secondarynavigation_813311796/vertical and model.horizontalNav will gives the value as /content/myapp/ph/en_ph/home/one/sample/jcr:content/par/secondarynavigation_813311796/horizontal.

@arunpatidar26 @Vijayalakshmi_S @Manjunath_K @Ratna_Kumar @Feike_Visser1 

[Anudeep_Garnepudi · Accepted solution]

@vijays80591732 

Does your inner component has minimum height? Add min-height or some text in inner component and see.

Try below snippet. Just give node name instead of content path in data-sly-resource like highlighted below.

1. Give node name resourceType, will create component of given resourceType under current resource/component with given name.
2. Give directly resource content path,  where the given resource path should contain sling:resourceType property and that resource/component will be included in current component.

<div
class="navigation-vertical columns collapsed large-5"
data-sly-resource="${'vertical' @ resourceType='myapp/core/components/common/richtext'}">
</div>

<div
class="navigation-horizontal columns collapsed large-7"
data-sly-resource="${'horizontal' @ resourceType='myapp/core/components/common/richtext'}">
</div>

[vijays80591732]

Hi Anudeep. The same component with the same style is working fine on another page. I'm able to see the data which has already authored in the inner component. So, suspecting something with the CQ edit overlay. Because I'm seeing the CQ edit overlay for the inner components in other pages whereas I'm not seeing the edit overlay for the page which is causing an issue.

<div data-type="Editable" data-path="/content/myapp/ph/en_ph/home/sample/one/jcr:content/par/secondarynavigation_813311796" tabindex="0" draggable="true" class="cq-Overlay cq-Overlay--component cq-draggable cq-droptarget" title="Secondary Navigation" style="top: 0px; left: 0px; width: 1438px; height: 70px;">
<span class="cq-Overlay--component-name">Secondary Navigation</span>
<div data-type="Editable" data-path="/content/myapp/ph/en_ph/home/sample/one/jcr:content/par/secondarynavigation_813311796/vertical" tabindex="0" draggable="true" class="cq-Overlay cq-Overlay--component cq-draggable cq-droptarget" title="Rich Text" style="top: 0px; left: 0px; width: 366px; height: 70px;">
<span class="cq-Overlay--component-name">Rich Text</span>
<div class="cq-droptarget cq-subdroptarget cq-Overlay-subdroptarget" data-asset-id="text" data-path="/content/myapp/ph/en_ph/home/sample/one/jcr:content/par/secondarynavigation_813311796/vertical"></div>
</div>
<div data-type="Editable" data-path="/content/myapp/ph/en_ph/home/sample/one/jcr:content/par/secondarynavigation_813311796/horizontal" tabindex="0" draggable="true" class="cq-Overlay cq-Overlay--component cq-draggable cq-droptarget" title="Rich Text" style="top: 0px; left: 784.141px; width: 653.859px; height: 70px;">
<span class="cq-Overlay--component-name">Rich Text</span>
<div class="cq-droptarget cq-subdroptarget cq-Overlay-subdroptarget" data-asset-id="text" data-path="/content/myapp/ph/en_ph/home/sample/one/jcr:content/par/secondarynavigation_813311796/horizontal"></div>
</div>
</div>

[Anudeep_Garnepudi]

For already authored components you are able to see overlay and able to edit, but for new components you are unable to see overlay and open dialog. My understanding correct? If yes check the values of model.verticalNav and model.horizontalNav for old and new components.

[Anudeep_Garnepudi]

@vijays80591732 Updated the above comment, try.

[vijays80591732]

Hi Anudeep. Thanks for your help. Seems, it's a product issue. I'm able to edit the component from left panel. On hovering I'm unable to edit.

[vijays80591732]

Update to the query:

if we include a resource via data sly resource with a direct resource path available it is not having the decoration tag. But the document says we can author @decorationTagName and cssClassName tried and no luck.

Decoration tag is applying for the below resource,

<div class="main" data-sly-resource="${ 'richtext' @ resourceType='myapp/core/components/common/richtext'}"></div>

Decoration tag is not applying for the below resource,

<div class="main" data-sly-resource="${ /content/myapp/ph/en_ph/home/one/sample/jcr:content/par/secondarynavigation_813311796/vertical  @ resourceType='myapp/core/components/common/richtext'}"></div>