Toggle Field visibility based on dropdown’s value – Coral 3

AEM’s dropdown comes with a simple and useful feature, to toggle visibility of other Dialog fields based on its selection.

An OOTB implementation is available for component “/apps/core/wcm/components/list/v1/list”

Let’s quickly check how to configure it (verified on AEM 6.3 with Coral-3 dropdown):

Step 1: Register dropdown that is supposed to show/hide other dialog fields.

Achieved by adding “granite:class” as “cq-dialog-dropdown-showhide”

 

Step 2: Identify the target dialog fields

This is achieved in 2 small steps:

1. Informing dropdown about the class that all target elements would have, i.e :
   • Add a new child node “granite:data” to the dropdown
   • Add property “cq-dialog-dropdown-showhide-target” as “.<some_class_name>” 
2. Adding the class to all target dropdown fields, i.e:
   • Add “granite:class” as “hide <some_class_name>” to all target dropdown fields.

 

Step 3: Define dropdown’s value for which to show the target field

This is achieved in 2 small steps:

1. Add ‘value’ property to all options of the trigger dropdown
2. Declare dropdown value for which to display the target dialog field
   • Add a new child node “granite:data” to the dialog field
   • Add property “showhidetargetvalue” as “<required_dropdown_option_value>”