Show/Hide cq-dialog Fields based on Drop-Down Selection in AEM

[#1]

Show/Hide cq-dialog Fields based on Drop-Down Selection In AEM

  by Mayur Satav

In this blog post, we will see how to use OOTB show/hide functionality for CQ-dialogs fields based on the drop-down selection in AEM.In AEM, CQ-dialogs are one of the most important components. It is possible to greatly improve the user experience by strategically hiding dialog fields until a specific option is selected by the user.

It’s time to get started, so let’s do it step by step.

Step 1 — First create one node list of type nt:unstructured for the drop-down list and add below properties.

a. class— cq-dialog-dropdown-showhide*.

b. cq-dialog-dropdown-showhide-target— .{{anyClassName}}-showhide-target*.

e.g.

.test-options-showhide-target

c. fieldLabel— Options Type.

d. name — ./optionsType.

e. sling:resourceType — granite/ui/components/foundation/form/select*.

NOTE — properties marked as * are madatory

Once parent node list is created. Create item node of type nt:unstructured under list node. Then create one node of type nt:unstructured for each drop-down option. List node hierarchy should look like this.

And here we are done with list structure.

You can refer below node structure for Step 1 —

<list
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/select"
    class="cq-dialog-dropdown-showhide"
    cq-dialog-dropdown-showhide-target=".test-options-showhide-target"
    fieldLabel="Options Type"
    name="./optionsType">
    <items jcr:primaryType="nt:unstructured">
        <option1
            jcr:primaryType="nt:unstructured"
            text="Option1"
            value="option1"/>
        <option2
            jcr:primaryType="nt:unstructured"
            text="Option2"
            value="option2"/>
    </items>
</list>

Next, Will create node structure for each drop-down option.

Step 2 — Create container node option1Group of type nt:unstructured and add below properties.

a. class — hide {{anyClassName}}-showhide-target

e.g.

hide test-options-showhide-target

b. showhidetargetvalue — option1

on the basis of showhidetargetvalue, option1Group container will display and hide the fields added under it. showhidetargetvalue value should be same as value given for the option.

c. sling:resourceType — granite/ui/components/foundation/container

till here we are done with main logic of show/hide functionality. Now you can add different fields as per your requirements.

Similarly, follow Step 2 for each drop-down option.

You can refer below node structure for Step 2 —

<option1group
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container"
    class="hide test-options-showhide-target"
    showhidetargetvalue="option1">
    <items jcr:primaryType="nt:unstructured">
        <heading
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/heading"
            class="coral-Heading coral-Heading--4"
            level="{Long}4"
            text="Options 1 Group"/>
        <well
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/container">
            <layout
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/layouts/well"/>
            <items jcr:primaryType="nt:unstructured">
                <webUrl
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                    fieldLabel="Web Url"
                    name="./webUrl"/>
            </items>
        </well>
    </items>
</option1group>
<option2group
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container"
    class="hide test-options-showhide-target foundation-layout-util-vmargin"
    showhidetargetvalue="option2">
    <items jcr:primaryType="nt:unstructured">
        <heading
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/heading"
            class="coral-Heading coral-Heading--4"
            level="{Long}4"
            text="Options 2 Group"/>
        <well
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/container">
            <layout
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/layouts/well"/>
            <items jcr:primaryType="nt:unstructured">
                <htmlSnippet
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
                    fieldLabel="Upload HTML Snippet"
                    name="./htmlSnippet"
                    rootPath="/content/dam/"/>
            </items>
        </well>
    </items>
</option2group>​

I am sharing with you complete dialog structure also for your reference.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Test Dialog"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <list
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/form/select"
                        class="cq-dialog-dropdown-showhide"
                        cq-dialog-dropdown-showhide-target=".test-options-showhide-target"
                        fieldLabel="Options Type"
                        name="./optionsType">
                        <items jcr:primaryType="nt:unstructured">
                            <option1
                                jcr:primaryType="nt:unstructured"
                                text="Option1"
                                value="option1"/>
                            <option2
                                jcr:primaryType="nt:unstructured"
                                text="Option2"
                                value="option2"/>
                        </items>
                    </list>
                    <option1group
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container"
                        class="hide test-options-showhide-target"
                        showhidetargetvalue="option1">
                        <items jcr:primaryType="nt:unstructured">
                            <heading
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/heading"
                                class="coral-Heading coral-Heading--4"
                                level="{Long}4"
                                text="Options 1 Group"/>
                            <well
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/container">
                                <layout
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/layouts/well"/>
                                <items jcr:primaryType="nt:unstructured">
                                    <webUrl
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                        fieldLabel="Web Url"
                                        name="./webUrl"/>
                                </items>
                            </well>
                        </items>
                    </option1group>
                    <option2group
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container"
                        class="hide test-options-showhide-target foundation-layout-util-vmargin"
                        showhidetargetvalue="option2">
                        <items jcr:primaryType="nt:unstructured">
                            <heading
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/heading"
                                class="coral-Heading coral-Heading--4"
                                level="{Long}4"
                                text="Options 2 Group"/>
                            <well
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/container">
                                <layout
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/layouts/well"/>
                                <items jcr:primaryType="nt:unstructured">
                                    <htmlSnippet
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
                                        fieldLabel="Upload HTML Snippet"
                                        name="./htmlSnippet"
                                        rootPath="/content/dam/"/>
                                </items>
                            </well>
                        </items>
                    </option2group>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

Output

Summary

Basically, class and cq-dialog-dropdown-showhide-target these both properties are mandatory for hiding container based on showhidetargetvalue property value.

In short —

1. add class — cq-dialog-dropdown-showhide and cq-dialog-dropdown-showhide-target — .{anyName}-showhide-target in your dropdown list node
2. Add class — hide {anyName}-showhide-target and showhidetargetvalue — { value of drop down option } in each container of your drop-down list option.

For more visit

www.mayursatav.in

https://medium.com/@mayursatav

Q&A

Please use this thread to ask questions relating to this article