

Basically here you’re providing a CSS selector to target the fields to show or hide. The value of this property can be whatever you want, I’ve opted for. Now add a node called granite:data node of type nt:unstructured to productType.Īdd the a cq-dialog-dropdown-showhide-target property of type String to the granite:data node. This basically “activates” the show/hide functionality (further explanation below). Open the productType node in CRX DE and add the following property: granite:class - String - cq-dialog-dropdown-showhide Which fields will correspond to each input in the dropdown.In our case it is the productType dropdown. Which input will determine what is shown or hidden.With the Coral 3 PSA out of the way, let’s have a look at our use case. You can tell Coral 2 and 3 components apart by their location in the JCR:Ĭoral 2: /libs/granite/ui/components/foundation Coral 3: /libs/granite/ui/components/ coral/foundation However, if you do decide to start using Coral 3 components, avoid creating UIs/dialogs that include a mix of Coral 2 and 3, I’ve seen many weird side-effects from this. You can learn more about Coral 3 here: Migration Guide to CoralUI 3-based - Granite UI 1.0 documentation. So consider, wherever possible, migrating to Coral 3 as it has new and better features and will future-proof your project when you decide to migrate to a newer version.

However, Coral 2 is out of style and may be deprecated and/or removed in future releases of AEM.
#SHOWHIDE TEMPLATE HOW TO#
There seems to be a number of tutorials online describing how to implement this feature using Coral 2, including an official Adobe guide:
