Inner component is unable to edit in touchUI AEM-6.4.4

Avatar

Avatar

vijays80591732

Avatar

vijays80591732

vijays80591732

05-03-2021

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 

 

AEM6.4 component resource

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Anudeep_Garnepudi

MVP

Avatar

Anudeep_Garnepudi

MVP

Anudeep_Garnepudi
MVP

05-03-2021

@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.

Answers (0)