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.

Zimbabwe

Answer 1

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

Nonchalance

Thanks Bruce, this configuration has resolved the inheritance issue in application. Really appreciated your help for resolving this issue. – Zimbabwe

Hi Bruce, After implementing the above configuration, the sling:hideChildren is hiding all the children nodes under it and same is getting replicated in the child components. But doing this, it is hiding all its children nodes for itself as well. This is resolving only some bit of the issue but still the issue persist. – Zimbabwe

I have resolved it using the sling:hideChildren itself in each and every component, so its a little bit of work but this fixes the issue I was facing. I am still wondering if we have any global setting to do this. – Zimbabwe

Is this behavior different in AEM 6.0 and AEM 6.1? in 6.0 if i delete a property in my component, the property disappear but in 6.1 the property appears anyway... why? there is some documentation where is this change? – Polliwog

Answer 2

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

Squinty

Thanks Ben, this configuration can be done, as Bruce has suggested in the above post., Thanks for helping me find the resolve. – Zimbabwe

Answer 3

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>

Sacchariferous

Answer 4

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

Juncaceous

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes – Hundredweight