how to prevent cq:dialog inheritance

Question

I am migrating classic ui dialogs to touch ui dialogs, I migrated the parent component dialog, I observed AEM is showing the parent dialogs tabs and properties in the child component as well. In the existing classic ui dialogs it doesnt inherit the parent properties whereas in the touch ui it does.

How can we achieve the same classic ui behavior in touch ui as well by preventing the dialog inheritance.

Please share details if anyone has information about this issue.

Answer 1

Add the

sling:hideChildren property

to the child component's dialog.

You can add this property to the immediate parent of the particular fieldset/tab/field that you need to hide.

Syntax:

Property Name: sling:hideChildren

Property Type: String or String[]

Property Value: Name of the immediate children, * hides them all

Example:

To hide the all the fields under properties tab of the below dialog:

<content
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/container">
    <items jcr:primaryType="nt:unstructured">
        <fixedcolums
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
            <items jcr:primaryType="nt:unstructured">
                <properties
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/container">
                    <items jcr:primaryType="nt:unstructured">
                        <startLevel
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                            ../>
                        <showHidden
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                            ../>
                    </items>
                </properties>
            </items>
        </fixedcolums>
    </items>
</content>

add the sling:hideChildren property to its immediate parent node, i.e., items (see below)

<content
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/container">
    <items jcr:primaryType="nt:unstructured">
        <fixedcolums
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
            <items jcr:primaryType="nt:unstructured"
                sling:hideChildren="*">
                <properties
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/container">
                    <items jcr:primaryType="nt:unstructured">
                        <startLevel
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                            ../>
                        <showHidden
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                            ../>
                    </items>
                </properties>
            </items>
        </fixedcolums>
    </items>
</content>

to hide only the startLevel field, add the sling:hideChildren property to its immediate parent node(see below)

<content
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/container">
    <items jcr:primaryType="nt:unstructured">
        <fixedcolums
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
            <items jcr:primaryType="nt:unstructured">
                <properties
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/container">
                    <items jcr:primaryType="nt:unstructured"
                        sling:hideChildren="startLevel">
                        <startLevel
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                            ../>
                        <showHidden
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                            ../>
                    </items>
                </properties>
            </items>
        </fixedcolums>
    </items>
</content>

Answer 2

See AEM 6.1 User Interface Customization slide 9 for the "new" granite edit dialog inheritance ...

The We.Retail (AEM 6.2) edit dialog examples shows "hiding" each parent edit dialog tabs in the child component edit dialog ...

Answer 3

Sling Resource Merging with AEM docs can be found here. Specifically look through the docs for the resource merger properties and how you can manipulate different properties.

The resource merger provides the following properties:

sling:hideProperties (String or String[]) Specifies the property, or list of properties, to hide. The wildcard * hides all.

sling:hideResource (Boolean) Indicates whether the resources should be completely hidden, including its children.

sling:hideChildren (String or String[]) Contains the child node, or list of child nodes, to hide. The properties of the node will be maintained. The wildcard * hides all.

sling:orderBefore (String) Contains the name of the sibling node that the current node should be positioned in front of.

These properties affect how the corresponding/original resources/properties (from /libs) are used by the overlay/override (often in /apps).

Answer 4

You can use the sling:hideChildren property to hide inherited tabs and properties. For example, let's say you wanted to hide the inherited permissions and cloudservices tabs, and customize the basic and advanced tabs:

...
<items jcr:primaryType="nt:unstructured">
    <tabs
        ...>
        <layout
            .../>
        <items
            jcr:primaryType="nt:unstructured"
            sling:hideChildren="[permissions,cloudservices]">
            <basic
                .../>
            <advanced
                .../>
        </items>
    </tabs>
</items>
...