can we add two dropdown showhide?

[SudarshanV1]

i want to do showhide of fields in dialog on selection of dropdown.
here, i have two dropdowns.
one is working fine but another is not working with core js.
can someone help here?

[arunpatidar]

Hi @SudarshanV1 

Yes, it is possible, just use different data attributes.

[konstantyn_diachenko]

Hi @SudarshanV1,

You can try mimic this example:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          jcr:primaryType="nt:unstructured"
          sling:resourceType="cq/gui/components/authoring/dialog">
    <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/tabs">
        <items jcr:primaryType="nt:unstructured">
            <settings
                    jcr:primaryType="nt:unstructured"
                    jcr:title="Config 1"
                    sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                <items jcr:primaryType="nt:unstructured">
                    <column
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <variation
                                    granite:class="cq-dialog-dropdown-showhide"
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                    name="./variation">
                                <items jcr:primaryType="nt:unstructured">
                                    <backgroundImage
                                            jcr:primaryType="nt:unstructured"
                                            text="Background image"
                                            value="backgroundImage"/>
                                    <topImage
                                            jcr:primaryType="nt:unstructured"
                                            text="Top image"
                                            value="topImage"/>
                                    <noImage
                                            jcr:primaryType="nt:unstructured"
                                            text="No image"
                                            value="noImage"/>
                                </items>
                                <granite:data
                                        jcr:primaryType="nt:unstructured"
                                        cq-dialog-dropdown-showhide-target=".card-variation-showhide-target"/>
                            </variation>
                            <cardSizeContainer
                                    granite:class="hide card-variation-listfrom-showhide-target foundation-layout-util-vmargin"
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                <granite:data
                                        jcr:primaryType="nt:unstructured"
                                        showhidetargetvalue="topImage"/>
                                <items jcr:primaryType="nt:unstructured">
                                    <variation
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                            name="./cardSize">
                                        <items jcr:primaryType="nt:unstructured">
                                            <medium
                                                    jcr:primaryType="nt:unstructured"
                                                    text="Medium"
                                                    value="medium"/>
                                            <large
                                                    jcr:primaryType="nt:unstructured"
                                                    text="Large"
                                                    value="large"/>
                                        </items>
                                    </variation>
                                </items>
                            </cardSizeContainer>

                            <cardType
                                    granite:class="cq-dialog-dropdown-showhide"
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                    name="./cardType">
                                <items jcr:primaryType="nt:unstructured">
                                    <circle
                                            jcr:primaryType="nt:unstructured"
                                            text="Circle"
                                            value="circle"/>
                                    <square
                                            jcr:primaryType="nt:unstructured"
                                            text="square"
                                            value="square"/>
                                    <triangle
                                            jcr:primaryType="nt:unstructured"
                                            text="Triangle"
                                            value="triangle"/>
                                </items>
                                <granite:data
                                        jcr:primaryType="nt:unstructured"
                                        cq-dialog-dropdown-showhide-target=".card-type-showhide-target"/>
                            </cardType>
                            <squareTypeContainer
                                    granite:class="hide card-type-listfrom-showhide-target foundation-layout-util-vmargin"
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                <granite:data
                                        jcr:primaryType="nt:unstructured"
                                        showhidetargetvalue="square"/>
                                <items jcr:primaryType="nt:unstructured">
                                    <enableSquareShadow
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                        checked="false"
                                        name="./enableSquareShadow"
                                        text="Enable square shadow"
                                        uncheckedValue="false"
                                        value="true"/>
                                </items>
                            </squareTypeContainer>
                        </items>
                    </column>
                </items>
            </settings>
        </items>
    </content>
</jcr:root>

You can find 2 drop-downs there. If you select top image, another container will appear. If you select Square, you will see decicated container.

Best regards,

Kostiantyn Diachenko.

[SudarshanV1]

its not working after pasting same code as part of my dialog

[konstantyn_diachenko]

@SudarshanV1 , do you mean that if you select dropdown option, then any other containers will not be appeared? 

What AEM version are you running on? 

Best regards,

Kostiantyn Diachenko.

[SudarshanV1]

its AEM - AMS 6.5 instance with serivepack latest

[konstantyn_diachenko · Accepted solution]

Hi @SudarshanV1 ,

Yes, you are right. I checked it. I made a typo in granite:class selectors.

Fixed version you can find here:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          jcr:primaryType="nt:unstructured"
          sling:resourceType="cq/gui/components/authoring/dialog">
    <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/tabs">
        <items jcr:primaryType="nt:unstructured">
            <config
                    jcr:primaryType="nt:unstructured"
                    jcr:title="Config"
                    sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <variation
                            granite:class="cq-dialog-dropdown-showhide"
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/select"
                            name="./variation">
                        <items jcr:primaryType="nt:unstructured">
                            <backgroundImage
                                    jcr:primaryType="nt:unstructured"
                                    text="Background image"
                                    value="backgroundImage"/>
                            <topImage
                                    jcr:primaryType="nt:unstructured"
                                    text="Top image"
                                    value="topImage"/>
                            <noImage
                                    jcr:primaryType="nt:unstructured"
                                    text="No image"
                                    value="noImage"/>
                        </items>
                        <granite:data
                                jcr:primaryType="nt:unstructured"
                                cq-dialog-dropdown-showhide-target=".card-variation-showhide-target"/>
                    </variation>
                    <cardSizeContainer
                            granite:class="hide card-variation-showhide-target foundation-layout-util-vmargin"
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/container">
                        <granite:data
                                jcr:primaryType="nt:unstructured"
                                showhidetargetvalue="topImage"/>
                        <items jcr:primaryType="nt:unstructured">
                            <variation
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                    name="./cardSize">
                                <items jcr:primaryType="nt:unstructured">
                                    <medium
                                            jcr:primaryType="nt:unstructured"
                                            text="Medium"
                                            value="medium"/>
                                    <large
                                            jcr:primaryType="nt:unstructured"
                                            text="Large"
                                            value="large"/>
                                </items>
                            </variation>
                        </items>
                    </cardSizeContainer>

                    <cardType
                            granite:class="cq-dialog-dropdown-showhide"
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/select"
                            name="./cardType">
                        <items jcr:primaryType="nt:unstructured">
                            <circle
                                    jcr:primaryType="nt:unstructured"
                                    text="Circle"
                                    value="circle"/>
                            <square
                                    jcr:primaryType="nt:unstructured"
                                    text="Square"
                                    value="square"/>
                            <triangle
                                    jcr:primaryType="nt:unstructured"
                                    text="Triangle"
                                    value="triangle"/>
                        </items>
                        <granite:data
                                jcr:primaryType="nt:unstructured"
                                cq-dialog-dropdown-showhide-target=".card-type-showhide-target"/>
                    </cardType>
                    <squareTypeContainer
                            granite:class="hide card-type-showhide-target foundation-layout-util-vmargin"
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/container">
                        <granite:data
                                jcr:primaryType="nt:unstructured"
                                showhidetargetvalue="square"/>
                        <items jcr:primaryType="nt:unstructured">
                            <enableSquareShadow
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                    checked="false"
                                    name="./enableSquareShadow"
                                    text="Enable square shadow"
                                    uncheckedValue="false"
                                    value="true"/>
                        </items>
                    </squareTypeContainer>
                </items>
            </config>
        </items>
    </content>
</jcr:root>

Best regards,

Kostiantyn Diachenko.

[SudarshanV1]

Thanks working.