How to hide/show fields based on checkbox in AEM 6.5?

Avatar

Avatar

vigiaemnewbie

Avatar

vigiaemnewbie

vigiaemnewbie

02-04-2020

Can someone please give me a step by step solution to hide show a set of fields based on checkbox in AEM 6.5? I have tried everything I could find on Google and nothing works as expected. It's ridiculous how we're up to AEM 6.5 and Adobe still hasn't provided an out of the box solution for this. And if there is an out of the box solution it's ridiculous how tough it is to find documentation for it.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Theo_Pendle

MVP

Avatar

Theo_Pendle

MVP

Theo_Pendle
MVP

04-04-2020

Hello, 

Your question inspired me to write a tutorial on how to show/hide or enable/disable fields based on a checkbox (or any other widget).

Have a look: https://levelup.gitconnected.com/aem-conditionally-show-or-hide-a-field-based-on-a-checkbox-widget-o...

Answers (2)

Answers (2)

Avatar

Avatar

jbrar

Employee

Avatar

jbrar

Employee

jbrar
Employee

03-04-2020

Avatar

Avatar

petterb23600126

Avatar

petterb23600126

petterb23600126

02-04-2020

As far as OOTB functionality goes your best option is to leverage granite/ui/components/coral/foundation/form/select and the cq-dialog-dropdown-showhide functionality. Step by step description in the js: /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js. But I'm guessing you're not really interested in a select when you're only working with two values.

 

As for existing solutions, I'd perhaps turn towards ACS: https://adobe-consulting-services.github.io/acs-aem-commons/features/ui-widgets/show-hide-widgets/in... and failing that I'd look at the implementation of the OOTB one, and tailor it to your needs: /libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

 

Hope any of this was useful.

Good luck!