Show/Hide Dialog if one dropdown option or another is selected

[kylemd]

I have a dropdown with three options [a, b, c].
Two of my dialog fields are only valid for two dropdown options [b, c]

Is there some OOTB way to show two dialog fields if 'b' or 'c' is selected in the dropdown with showhidetargetvalue?

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

                <dialog-img
                        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-url
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                    fieldLabel="Image Clickthrough URL"
                                    fieldDescription="Remember to check for empty spaces."
                                    name="./imgUrl"
                                    required="{Boolean}false"
                                    value="https://www.missing_XXXXX_link.com/"/>
                                <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>
                    </dialog-img>

[Rajumuddana]

Hi @kylemd ,

You shall consider

sling:resourceType="granite/ui/components/coral/foundation/include"
path="/apps/your-project/components/common/my-fields/myfields"

Group desired fields to show/hide as you already done with ‘container’.

You shall show/hide those based on selection by loading them in using above approach without duplicating.

Thanks,

Raju.

[PRATHYUSHA_VP]

Hi @kylemd 

You can use ootb functionality to hide and show only specific fields for different options. In your case for option 'b' and 'c' you can group the fields in common place, for example under /apps and try to show/hide using showhidetargetvalue 

Refer below : 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-blogs/show-hide-cq-dialog-...

Hope this helps

Thanks

[Mahedi_Sabuj]

/libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js 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