aem-dialog-generator-plugin weekly downloads statistics

AEM Dialog Generator Plugin

A Webpack plugin that automatically generates AEM component _cq_dialog.xml and _cq_design_dialog.xml files with associated policies from simple JSON configurations. Features intelligent automation including automatic style tab generation, policy-to-template mapping, and dynamic indentation for production-ready AEM components.

Features

• 30+ Field Types - textfield, textarea, select, pathfield, pagefield, checkbox, alert, multifield, RTE, fieldset, container, heading, text, tags, image, autocomplete, radiogroup, contentfragmentpicker, experiencefragmentpicker, assetpicker, hidden, button, well, include, styletab, and more • Custom Resource Types - Override sling:resourceType on any field via resourceType for unsupported or project-specific components • Extended Datasource - datasource accepts a string, an object with extra attributes (e.g. rootPath), or a shorthand type ("tags") for built-in AEM datasources; fieldset and container also support datasource as the sole content source without requiring static fields • Flexible Layouts - Tabs, simple layouts, accordion, or fieldsets for organization • Auto-generation - XML files generated on every webpack build • Simple JSON - Easy-to-read configuration instead of verbose XML • Multifield Support - Both simple and composite multifields with delete confirmation and drag & drop reordering • Rich Text Editor - Full RTE configuration with customizable features • Folder Structure - Supports both _cq_dialog/.content.xml and _cq_dialog.xml formats • Show/Hide - Dynamic field visibility based on dropdown or checkbox values • Image Upload - Built-in support for DAM integration and file uploads • Page Selection - Native AEM page picker with content tree navigation • Content Fragments - Full support for Content Fragment and Experience Fragment pickers • Validation - Regex patterns, plain string validator keys, min/max values, required fields, maxLength • Contextual Help - Inline help tooltips and documentation links • Custom Styling - CSS classes, field width control, and Coral UI spacing • Field Enhancements - Default values, descriptions, placeholder/emptyText, autoFocus, wrapperClass • Enterprise Features - Custom IDs (granite:id), analytics tracking (trackingFeature, trackingElement), render hidden, collapsible sections • Advanced Pickers - Filter support, freshness control for DAM assets • typeHint - Force JCR data type on save (String, Boolean, Long, etc.) • Design Dialogs - Generate design dialogs (_cq_design_dialog) for component policies • Policy Generation - Automatically create component policies with RTE config, styles, and more • Style System - Define style groups and variants for the AEM Style System • Component Mapping - Configure asset-to-component drag & drop mappings • Auto Style Tab - Automatic cq:styles tab generation when styleGroups are present • Template Integration - Automatic policy-to-template mapping for seamless deployment • Include / Styletab - Embed any Granite UI include node, with a styletab shorthand for the AEM Style System edit tab • Dialog Root Attributes - extraClientlibs, helpPath, and trackingFeature on the jcr:root node of both dialog and design dialog • Render Conditions - renderCondition supports simple, privilege, feature, and, or, legacy:simple, full resource type paths, and explicit resourceType overrides • graniteData child node - graniteData prop generates a child node with arbitrary attributes (distinct from data, which generates inline granite:data-* attributes) • Select Enhancements - selectType: 'editable' creates a combobox-style input; options support selected and hide (→ granite:hide) attributes

Installation

Quick Start

1. Configure webpack

2. Create a dialog.json file

Create src/main/webpack/components/button/dialog.json:

3. Build

The plugin automatically generates:

Configuration Options

| Option | Type | Default | Description |

| sourceDir | String | Required | Folder containing component dialog.json files | | targetDir | String | Required | Target folder for generated XML files | | dialogFileName | String | dialog.json | Name of the JSON configuration file | | designDialogFileName | String | designDialog.json | Name of the design dialog JSON configuration file | | appName | String | mysite | AEM application name | | useFolderStructure | Boolean | true | Use _cq_dialog/.content.xml (true) or _cq_dialog.xml (false) | | verbose | Boolean | false | Enable detailed logging | | generatePolicies | Boolean | true | Enable automatic policy generation from designDialog.json | | policiesTargetDir | String | ../ui.content/.../policies | Target folder for generated policy XML files | | templatePoliciesDir | String | ../ui.content/.../templates | Target folder for template policy mapping | | autoMapPoliciesToTemplates | Boolean | true | Automatically map policies to specified templates |

Supported Field Types

Basic Fields

textfield

Design Dialogs & Component Policies

The plugin now supports generating Design Dialogs (_cq_design_dialog) and their associated component policies. This simplifies the complex task of configuring component policies in AEM.

Creating a Design Dialog

Create a designDialog.json file alongside your dialog.json:

Example: src/main/webpack/components/button/designDialog.json

Policy Configuration

The policy object in your designDialog.json supports:

Basic Policy Properties

Style System Configuration

Define style groups for the AEM Style System:

RTE Plugin Configuration

Configure Rich Text Editor plugins in policies:

Component Mapping

Configure asset-to-component drag & drop mappings:

Complete Design Dialog Example

Hero Component with Full Policy Configuration:

Generated Output

When you build, the plugin generates:…

Description from the npm listing.