Show/Hide Fields Based On Dropdown Selection - AEM 6.5

[maheswaraiah_m]

Hi team,

Please help me, regarding show/hide fields based on the dropdown selection in the dialog box

---------------------------------------------------------------------------------------------------------------------------

In the dialog box, I have a two fields

1. Dropdown

2. NumberField

The dropdown has 6 values 

• none
• firstValue
• secondValue
• thirdValue
• fourthValue
• fifthValue

When dropdown selection is "none", the number field is not shown

When dropdown selection is any other value (firstValue, secondValue etc), the number field is shown

please help me with this code block

                                     <dropDown
                                        jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                        granite:class="cq-dialog-dropdown-showhide"
                                        fieldLabel="dropDown"
                                        name="./dropDown"
                                        required="{Boolean}false"
                                        type="editable">
                                        <items jcr:primaryType="nt:unstructured">
                                            <none
                                                jcr:primaryType="nt:unstructured"
                                                text="None"
                                                value="none"/>
                                            <firstValue
                                                jcr:primaryType="nt:unstructured"
                                                text="First Value"
                                                value="firstValue"/>
                                            <secondValue
                                                jcr:primaryType="nt:unstructured"
                                                text="Second Value"
                                                value="secondValue"/>
                                            <thirdValue
                                                jcr:primaryType="nt:unstructured"
                                                text="Third Value"
                                                value="thirdValue"/>
                                            <fourthValue
                                                jcr:primaryType="nt:unstructured"
                                                text="Fourth Value"
                                                value="fourthValue"/>
                                            <fifthValue
                                                jcr:primaryType="nt:unstructured"
                                                text="Fifth Value"
                                                value="fifthValue"/>
                                        </items>
                                        <granite:data
                                            jcr:primaryType="nt:unstructured"
                                            cq-dialog-dropdown-showhide-target=".dropDown-showhide-target"/>
                                    </dropDown>
                                    <numberField
                                        granite:class="heroFilter-showhide-target"
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                        fieldLabel="Number Field"
                                        name="./numberField"/>
                                        <granite:data
                                            jcr:primaryType="nt:unstructured"
                                            showhidetargetvalue=""/>

@arunpatidar 

@kautuk_sahni 

@Theo_Pendle 

[Ganthimathi_R]

@maheswaraiah_m Please follow this article which explains how to add show/hide fields in dialogs conditionally.

https://levelup.gitconnected.com/aem-conditionally-show-or-hide-fields-in-touchui-dialogs-with-coral...

For your requirement you will have to either add "showhidetargetvalue" under granite:data node for each drop down values individually or customize the dropdownshowhide.js to have comma separated values.

[maheswaraiah_m]

Thanks, @Ganthimathi_R  for your reply. 

could you please look at the below code and do some modifications, will be helpful for me.  Thanks  

                                    <dropDown
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                        granite:class="cq-dialog-dropdown-showhide"
                                        fieldLabel="dropDown"
                                        name="./dropDown"
                                        required="{Boolean}false"
                                        type="editable">
                                        <items jcr:primaryType="nt:unstructured">
                                            <none
                                                jcr:primaryType="nt:unstructured"
                                                text="None"
                                                value="none"/>
                                            <firstValue
                                                jcr:primaryType="nt:unstructured"
                                                text="First Value"
                                                value="firstValue"/>
                                            <secondValue
                                                jcr:primaryType="nt:unstructured"
                                                text="Second Value"
                                                value="secondValue"/>
                                            <thirdValue
                                                jcr:primaryType="nt:unstructured"
                                                text="Third Value"
                                                value="thirdValue"/>
                                            <fourthValue
                                                jcr:primaryType="nt:unstructured"
                                                text="Fourth Value"
                                                value="fourthValue"/>
                                            <fifthValue
                                                jcr:primaryType="nt:unstructured"
                                                text="Fifth Value"
                                                value="fifthValue"/>
                                        </items>
                                        <granite:data
                                            jcr:primaryType="nt:unstructured"
                                            cq-dialog-dropdown-showhide-target=".dropDown-showhide-target"/>
                                    </dropDown>
                                    <numberField
                                        granite:class="heroFilter-showhide-target"
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                        fieldLabel="Number Field"
                                        name="./numberField"/>
                                        <granite:data
                                            jcr:primaryType="nt:unstructured"
                                            showhidetargetvalue=""/>

[Ganthimathi_R · Accepted solution]

@maheswaraiah_m please refer the below dialog xml 

<dropDown
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/select"
    granite:class="cq-dialog-dropdown-showhide"
    fieldLabel="dropDown"
    name="./dropDown"
    required="{Boolean}false"
    type="editable">
    <granite:data
        jcr:primaryType="nt:unstructured"
        cq-dialog-dropdown-showhide-target=".heroFilterDropdowns-showhide-target"/>
        <items jcr:primaryType="nt:unstructured">
            <none
                jcr:primaryType="nt:unstructured"
                text="None"
                value="none"/>
            <firstValue
                jcr:primaryType="nt:unstructured"
                text="First Value"
                value="firstValue"/>
            <secondValue
                jcr:primaryType="nt:unstructured"
                text="Second Value"
                value="secondValue"/>
            <thirdValue
                jcr:primaryType="nt:unstructured"
                text="Third Value"
                value="thirdValue"/>
            <fourthValue
                jcr:primaryType="nt:unstructured"
                text="Fourth Value"
                value="fourthValue"/>
            <fifthValue
                jcr:primaryType="nt:unstructured"
                text="Fifth Value"
                value="fifthValue"/>
        </items>                       
</dropDown>
<numberField1
    granite:class="hide heroFilterDropdowns-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="firstValue"/>
        <items jcr:primaryType="nt:unstructured">
            <numberFieldSelect
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                fieldLabel="Number Field"
                name="./numberField"/>
        </items>
</numberField1>
<numberField2
    granite:class="hide heroFilterDropdowns-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="secondValue"/>
        <items jcr:primaryType="nt:unstructured">
            <numberFieldSelect
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                fieldLabel="Number Field"
                name="./numberField"/>
        </items>
</numberField2>

To avoid repeated <numberField> sections in the dialog you will have to customize the dropdownshowhide.js to have comma separated values in the same <numberField>

Refer https://www.linkedin.com/pulse/aem-hideshow-drop-down-select-options-more-than-one-values-vikraman for more information.

[maheswaraiah_m]

Thank you so much @Ganthimathi_R . It's working

I am trying to change the js code to avoid repeated number fields. 

Thank you so much