Level 2

Question

Hide dialog for a specific dropdown value

Forum|Forum|10 months ago
April 17, 2025
2 replies
866 views

I have a dialog that is only relevant to 2 out of 3 dropdown options and would like to hide it if option-1 is shown

I know how to set up the xml to SHOW dialog if an option is selected but not to HIDE it for a selected option and am not sure what I need to update to hide for a specific value.

Any input would be appreciated.

<options
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/select"
    granite:class="cq-dialog-dropdown-showhide"
    class="cq-dialog-dropdown-showhide"
    cq-dialog-dropdown-showhide-target=".layout-showhide-target"
    fieldLabel="Select component layout"
    name="./options">
    <items jcr:primaryType="nt:unstructured">
        <option-1
            jcr:primaryType="nt:unstructured"
            text="Option 1"
            value="option-1"/>
        <option-2
            jcr:primaryType="nt:unstructured"
            text="Option 2"
            value="option-2"/>
        <option-3
            jcr:primaryType="nt:unstructured"
            text="Option 3"
            value="option-3"/>
    </items>
</options>
<hide-for-option-1
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container"
    class="hide layout-showhide-target"
    showhidetargetvalue="option-1">
        <items jcr:primaryType="nt:unstructured">
            <img
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                fieldLabel="Image Path (https://dsg.images.harmony.epsilon.com/)"
                name="./img"
                required="{Boolean}false"
                value="https://dummyimage.com/1200x1000/fffb00/1a1a1a.jpg?text=Missing+assets"/>
        </items>
</hide-for-option-1>

SantoshSai

Community Advisor

Hi @kylemd,

The issue is likely that you're expecting the field to hide for option-1, but using showhidetargetvalue="option-1" actually shows the field when option-1 is selected.

Use showhidetargetvalue for option-2 and option-3 only, not for option-1.

Here's how you can update your dialog XML:

Update the dropdown (leave this as is):

<options
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/select"
    granite:class="cq-dialog-dropdown-showhide"
    class="cq-dialog-dropdown-showhide"
    cq-dialog-dropdown-showhide-target=".layout-showhide-target"
    fieldLabel="Select component layout"
    name="./options">
    <items jcr:primaryType="nt:unstructured">
        <option-1
            jcr:primaryType="nt:unstructured"
            text="Option 1"
            value="option-1"/>
        <option-2
            jcr:primaryType="nt:unstructured"
            text="Option 2"
            value="option-2"/>
        <option-3
            jcr:primaryType="nt:unstructured"
            text="Option 3"
            value="option-3"/>
    </items>
</options>

Modify the container so it only shows for desired values:

<conditional-fields
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container"
    class="hide layout-showhide-target"
    showhidetargetvalue="[option-2,option-3]">
    <items jcr:primaryType="nt:unstructured">
        <img
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
            fieldLabel="Image Path (https://dsg.images.harmony.epsilon.com/)"
            name="./img"
            required="{Boolean}false"
            value="https://dummyimage.com/1200x1000/fffb00/1a1a1a.jpg?text=Missing+assets"/>
    </items>
</conditional-fields>

showhidetargetvalue="[option-2,option-3]" will show this container only if the dropdown is option-2 or option-3. It will be hidden for option-1.

Hope that helps!

Regards,
Santosh

Santosh Sai

Mahedi_Sabuj

Community Advisor

OOTB clientlibs supports showing or hiding fields based on a single dropdown option, it doesn't account for multiple selections. To achieve that functionality, a custom JavaScript solution is required.

You can check this: https://ms-29.com/aem/sites/show-hide-aem-dialog-fields-on-dropdown-selection#show-hide-multiple-options

Mahedi Sabuj

kautuk_sahni

Community Manager

@kylemd Just checking in — were you able to resolve your issue?
We’d love to hear how things worked out. If the suggestions above helped, marking a response as correct can guide others with similar questions. And if you found another solution, feel free to share it — your insights could really benefit the community. Thanks again for being part of the conversation!

Kautuk Sahni

Update the dropdown (leave this as is):

Modify the container so it only shows for desired values:

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded