AEM: Conditionally show or hide fields in TouchUI dialogs with Coral 3 (ie: AEM 6.3+)

How to create a TouchUI dialogs that can dynamically show or hide fields based on user input is a topic that often pops up on the AEM Experience League forums.

In this tutorial I will show you how to build the following TouchUI Dialog for a basic AEM component:

Coral 2 vs Coral 3

There seems to be a number of tutorials online describing how to implement this feature using Coral 2, including an official Adobe guide:

1. Adobe guide: https://helpx.adobe.com/experience-manager/using/dynamic_touchui.html
2. Tutorial from SGAEM: http://www.sgaemsolutions.com/2019/01/showhide-tabs-and-fields-based-on-drop.html
3. Video tutorial: https://www.youtube.com/watch?v=JZFFxxiFpGY

However, Coral 2 is out of style and may be deprecated and/or removed in future releases of AEM. 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. You can learn more about Coral 3 here: Migration Guide to CoralUI 3-based — Granite UI 1.0 documentation.

However, if you do decide to start using Coral 3 components, avoid creating UIs/dialogs that…