Level 3

Solved

Inner component is unable to edit in touchUI AEM-6.4.4

Forum|Forum|4 years ago
March 5, 2021
2 replies
2909 views

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.

@14414417 @vijayalakshmi_s @manjunath_k @ratna_kumar @feike_visser1

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Anudeep_Garnepudi

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

Give node name resourceType, will create component of given resourceType under current resource/component with given name.
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.

Anudeep_Garnepudi

Accepted solution

Community Advisor

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

Give node name resourceType, will create component of given resourceType under current resource/component with given name.
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.

vijays80591732Author

Level 3

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>

vijays80591732Author

Level 3

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>

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded