Adobe Experience Manager Sites & More

kylemd · 4/17/25

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 · 4/17/25

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

kylemd · 4/17/25

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 · 4/17/25

@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

kylemd · 4/17/25

Is there not a way to just hide if one option is selected then?

Was trying to avoid having to create a separate dialogs for option 2 and 3 so can switch easily and use same htl properties

SantoshSai · 4/17/25

This is what coming in my mind at the moment: hide a field only for one specific option without duplicating the dialog structure for other options.

By default, cq-dialog-dropdown-showhide only allows showing a field based on a selected option (showhidetargetvalue), not hiding it for a specific one. But you can reverse this logic a bit.

Instead of showing for all values except option-1, explicitly list the options you do want the field to appear for:

<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"
            name="./img"
            required="{Boolean}false"/>
    </items>
</conditional-fields>

This way, the field is hidden for option-1 without duplicating anything.

Santosh Sai

Mahedi_Sabuj · 4/20/25

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