What is a cq:dialog in AEM?

cq:dialog is the node (stored as _cq_dialog/.content.xml) that defines the authoring dialog for an AEM component. In the Touch UI it uses Granite UI / Coral resource types to render fields like text inputs, dropdowns, path pickers, and rich text editors.

Where do I put the generated file?

Inside your component folder in the JCR: apps/ /components/ /_cq_dialog/.content.xml. After deploying, the dialog appears when an author edits or configures the component.

What is the difference between tabs and a single-column dialog?

A single-column dialog renders all fields in one fixedcolumns container — fine for a few fields. Tabs group fields under a Granite UI tabs container so authors can switch between sections (e.g. Properties, Styling, Advanced). Toggle "Use tabs" to switch modes.

How do I bind a field to a property?

The name attribute (e.g. ./title) is the relative JCR property the field writes to. This generator builds the name from the property name you enter, so ./title saves to the component node's title property.

Does this support multifields or nested containers?

This builder covers the most common Granite UI field types (text, textarea, pathfield, checkbox, select, number, datepicker, richtext, image upload) plus tabs. Multifields and custom widgets can be added by hand to the generated XML — the structure it outputs is a valid starting point.

Wasim's Site

AEM Dialog XML Builder

Visually build AEM Touch UI component dialogs and export the Granite UI cq:dialog .content.xml. Add tabs, text, select, pathfield, richtext, and image fields.

Component Dialog

Dialog Title

Use tabs (uncheck for a single-column dialog)

Tabs

(0)

Active Tab Title

Add Field to “Properties”

Property Name

Field Type

Field Label

Description (optional)

Required

Generated _cq_dialog/.content.xml

Save as _cq_dialog/.content.xml inside your component folder.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="My Component"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                <Properties
                    jcr:primaryType="nt:unstructured"
                    jcr:title="Properties"
                    sling:resourceType="granite/ui/components/coral/foundation/container"
                    margin="{Boolean}true">
                    <items jcr:primaryType="nt:unstructured">
                        <columns
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                            margin="{Boolean}true">
                            <items jcr:primaryType="nt:unstructured">
                                <column
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                    <items jcr:primaryType="nt:unstructured">
                                        <!-- add fields -->
                                    </items>
                                </column>
                            </items>
                        </columns>
                    </items>
                </Properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

Building AEM Component Dialogs Without the XML Grind

Every authorable AEM component needs a dialog, and in the Touch UI that dialog is a deeply nested tree of Granite UI / Coral resource types — container → tabs → fixedcolumns → column → fields. Typing that structure by hand in CRXDE Lite is repetitive and easy to get wrong. This builder lets you describe the fields you want and emits a valid cq:dialog .content.xml you can drop straight into your component.

Supported Field Types

Text Field / Text Area: single- and multi-line strings.
Path Field: browse and select a JCR path (with a configurable root path).
Checkbox: boolean toggle, stored as a Boolean property.
Select: a dropdown with your own options (Label = value pairs).
Number / Date Picker: numeric and date inputs.
Rich Text Editor: the RTE for formatted content.
Image / File Upload: the standard fileupload widget with a file reference parameter.

How to Use This Builder

Name the dialog and decide whether to use tabs.
Add tabs (optional) and select the active tab to add fields to.
Add fields with a property name (e.g. ./title), a type, and a label.
Copy or download the result as _cq_dialog/.content.xml.

Frequently Asked Questions

What is a cq:dialog in AEM?: cq:dialog is the node (stored as _cq_dialog/.content.xml) that defines the authoring dialog for an AEM component. In the Touch UI it uses Granite UI / Coral resource types to render fields like text inputs, dropdowns, path pickers, and rich text editors.
Where do I put the generated file?: Inside your component folder in the JCR: apps/<project>/components/<component>/_cq_dialog/.content.xml. After deploying, the dialog appears when an author edits or configures the component.
What is the difference between tabs and a single-column dialog?: A single-column dialog renders all fields in one fixedcolumns container — fine for a few fields. Tabs group fields under a Granite UI tabs container so authors can switch between sections (e.g. Properties, Styling, Advanced). Toggle "Use tabs" to switch modes.
How do I bind a field to a property?: The name attribute (e.g. ./title) is the relative JCR property the field writes to. This generator builds the name from the property name you enter, so ./title saves to the component node's title property.
Does this support multifields or nested containers?: This builder covers the most common Granite UI field types (text, textarea, pathfield, checkbox, select, number, datepicker, richtext, image upload) plus tabs. Multifields and custom widgets can be added by hand to the generated XML — the structure it outputs is a valid starting point.