Solved

Show/Hide Fields Based On Dropdown Selection - AEM 6.5

Forum|Forum|3 years ago
September 29, 2022
1 reply
5504 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by GanthiRa1

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

GanthiRa1

Community Advisor

@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-3-ie-aem-6-3-bfd48c261012

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_mAuthor

Thanks, @ganthira1 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=""/>

GanthiRa1

Accepted solution

Community Advisor

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded