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

Misc

Dialog only fullscreen: _cq_editConfig.xml in component with

Richtext field

Javascript: CUI.rte…

xmlns:granite=”http://www.adobe.com/jcr/granite/1.0”

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 ‘cq.authoring.editor.sites.page.hook’ is appropriate. Also work: cq.authoring.editor.sites.page (doesn’t work for page properties) , cq.authoring.dialog (works for page properties), does not work: cq.authoring.page

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.)