Level 3

Solved

can we add two dropdown showhide?

Forum|Forum|1 year ago
January 21, 2025
2 replies
843 views

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?

Best answer by konstantyn_diachenko

its AEM - AMS 6.5 instance with serivepack latest

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.

arunpatidar

Community Advisor

Hi @sudarshanv1

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

Arun Patidar

konstantyn_diachenko

Community Advisor

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.

Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.

SudarshanV1Author

Level 3

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

konstantyn_diachenko

Community Advisor

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

Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded