How should one use Granite UI foundation events to build a more dynamic dialog? | Community
Skip to main content
G
gabrielfgmzk
Level 2
February 23, 2026
Question

How should one use Granite UI foundation events to build a more dynamic dialog?

  • February 23, 2026
  • 1 reply
  • 17 views

I was searching for how to show/hide fields, whether a checkbox was checked or not. 

So I found the following documentation: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/clientlibs/foundation/vocabulary/toggleable.html

My understanding is that I can annotate a field with the “foundation-toggleable-control” class, and then when I press the field, a "foundation-toggleable-show" event will be dispatched.

Using a custom clientlib, I can listen to the event; however, the default behavior of the checkbox stops working.

Thanks.

    1 reply

    BrianKasingli
    Community Advisor and Adobe Champion
    BrianKasingliCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    February 24, 2026

    I personally have not used `foundation-toggleable-control` to hide or show Granite fields in a Touch UI dialog. In most real AEM projects, the common approach is either using the built in `granite:class` and `granite:data` showhide pattern or listening to the `foundation-contentloaded` event and applying lightweight JavaScript.
     

    A pattern you will see frequently in tutorials and production projects is `granite:class="cq-dialog-showhide"` combined with matching `granite:data` on the target field. This approach is simple, widely adopted, and works reliably in Touch UI dialogs.
     

    A good reference that explains this common show and hide pattern across different field types is: https://blog.3sharecorp.com/show-and-hide-dialog-fields-based-on-any-field-type 
     

    You will notice that most examples online follow this structure rather than using `foundation-toggleable-control`.
     

    When you move into more advanced use cases, such as hiding entire tabs based on a Style System selection, you typically need custom dialog logic. A more advanced tutorial that demonstrates this pattern well is:

    https://sourcedcode.com/blog/aem/aem-touch-ui-show-hide-tabs-by-style-system-configuration 
     

    I would recommend going through multiple tutorials like these so you start recognizing the common patterns. The more examples you build, the easier it becomes to understand how custom Granite UI behavior is typically implemented in real AEM projects.
     

    Terms & ConditionsAccessibility statement

    Loading footer...