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)

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'}"/>

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/show tabs in Coral 3 UI dialog
https://www.albinsblog.com/2019/02/how-to-hideshow-tabs-in-coral-3-ui-dialogs-aem.html#.XIBNVIhKjIU