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
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=""/>
Solved! Go to Solution.
Views
Replies
Total Likes
@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 Please follow this article which explains how to add show/hide fields in dialogs conditionally.
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.
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=""/>
@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.
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
Views
Likes
Replies