Pages

Wednesday, February 27, 2019

Adobe Experience Manager(AEM) 6.4 - Touch UI conversion Tips

Adobe Experience Manager(AEM) 6.4 - Touch UI conversion Tips

This post explains some of the issues identified during Touch UI conversion in AEM 6.4.

Embedded child components are not editable in Touch UI:


The Touch UI editing is not enabled for the components embedded in another component

e.g

The component2 is embedded in component 1(component1.html)

 <div data-sly-resource ="${ @path='component2', resourceType='/apps/test/components/component2 '}" >

The edit option is enabled for parent component(componet1) but not for child component(component2)

editing_issue_embedded_components

The embedded component editing is not enabled if the parent component also included the parsys through sly tag.

The issue is resolved after replacing the sly tag with div tag

<sly  data-sly-resource ="${ @path='cartBottomParsys', resourceType='wcm/foundation/components/parsys'}"/>

to

<div data-sly-resource ="${ @path='cartBottomParsys', resourceType='wcm/foundation/components/parsys'}"/>

editing_issue_embedded_components

cq:dialog Inheritence:


Parent dialog tabs and properties are displayed(Inherited) in the child component  in Touch UI but the same is not inherited in classic UI.

To hide the parent dialog tabs and properties in child components add the below property to the items node under tabs node in child component - e.g /apps/test/components/pages/homepage/cq:dialog/content/items

Name: sling:hideChildren
Type: String[]
Value: *

To hide the specific tabs from parent component

Name: sling:hideChildren
Type: String[]
Value: tab1,tab2

hide_cq_dialog_tabs.png

Hide/show tabs in Coral 3 UI dialog









No comments:

Post a Comment