Level 2

Question

Hide dialog for a specific dropdown value

Forum|Forum|9 months ago
April 17, 2025
2 replies
863 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

K

kylemdAuthor

Level 2

Hey, I have this implemented as you've shown but the dialog is not showing at all now regardless of which option is selected.

SantoshSai

Community Advisor

@kylemd
Can you try this?

<options
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/select"
    name="./options"
    fieldLabel="Select component layout"
    class="cq-dialog-dropdown-showhide"
    cq-dialog-dropdown-showhide-target=".layout-showhide-target">
    <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>

<show-for-option-2
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container"
    class="hide layout-showhide-target"
    showhidetargetvalue="option-2">
    <items jcr:primaryType="nt:unstructured">
        <img
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
            fieldLabel="Image Path"
            name="./imgOption2"/>
    </items>
</show-for-option-2>

<show-for-option-3
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container"
    class="hide layout-showhide-target"
    showhidetargetvalue="option-3">
    <items jcr:primaryType="nt:unstructured">
        <img
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
            fieldLabel="Image Path"
            name="./imgOption3"/>
    </items>
</show-for-option-3>

I think it doesn’t handle showhidetargetvalue="[option-2,option-3]" well unless using Coral multifield. Instead, create one container per value.

Make sure: The dropdown’s cq-dialog-dropdown-showhide-target matches the container class (e.g., .layout-showhide-target) and container class must include hide and your matching class (layout-showhide-target).

Santosh Sai

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