Some relevant info about TouchUI Dialog Creation in Adobe AEM

Knowledge base / Microblog about software development related things by Hans-Peter Störr

Some relevant info about TouchUI Dialog Creation in Adobe AEM

Created 24-08-2023, last change 24-09-2023

Editing: probably best done with IntelliJ IDEA Live Templates, or a Scala DSL. Remember to look at the comments in the JSPs of the granite etc. components - they contain documentation. CAUTION: granite/ui/components/foundation/xxx vs. granite/ui/components/coral/foundation :

interesting cq:dialog attributes

helpPath (URL) , extraClientlibs


Dialog only fullscreen: _cq_editConfig.xml in component with

Richtext field

Javascript: CUI.rte…


  • attribute granite:class - additional CSS class
  • subnode granite:data - additional data attributes , expression language possible
  • granite:id , granite:rel , granite:hidden see doc.

Extending dialogs

For extending component dialogs with Javascript, the clientlib ‘’ is appropriate. Also work: (doesn’t work for page properties) , cq.authoring.dialog (works for page properties), does not work:

Stacking dialogs

If you create a dialog from a dialog, it seems both get closed. I solved that for Composum AI by event.preventDefault(), event.stopPropagation() and removing the dialog HTML. (But I guess there is a better way I don’t know yet.)