AEM Tips & Tricks

There is a frequent uses case to hide/show certain fields in a component dialog box based on the value selected in the drop down. Sometimes, those fields need to be hidden/shown based on criteria of the checkbox being checked. Adobe AEM 6.3 provides OOTB functionality to show hide fields based on the value selected in the drop drown. The script is located at path: /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js The comments in the script provide a nice description on how to use it to show/hide fields based on drop down selected value. /** * Extension to the standard dropdown/select component. It enabled hidding/unhidding of other components based on the * selection made in the dropdown/select. * * How to use: * * - add the class cq-dialog-dropdown-showhide to the dropdown/select element * - add the data attribute cq-dialog-dropdown-showhide-target to the dropdown/select element, value should be the * sele