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 <granite:data> 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

npm install aem-dialog-generator-plugin --save-dev

Quick Start

1. Configure webpack

const AemDialogGeneratorPlugin = require('aem-dialog-generator-plugin');
const path = require('path');

module.exports = {
  plugins: [
    new AemDialogGeneratorPlugin({
      sourceDir: path.resolve(__dirname, 'src/main/webpack/components'),
      targetDir: path.resolve(__dirname, '../ui.apps/src/main/content/jcr_root/apps/mysite/components'),
      appName: 'mysite',
      generatePolicies: true,
      policiesTargetDir: path.resolve(__dirname, '../ui.content/src/main/content/jcr_root/conf/mysite/settings/wcm/policies'),
      templatePoliciesDir: path.resolve(__dirname, '../ui.content/src/main/content/jcr_root/conf/mysite/settings/wcm/templates'),
      autoMapPoliciesToTemplates: true
    })
  ]
};

2. Create a dialog.json file

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

{
  "title": "Button Component",
  "tabs": [
    {
      "title": "Properties",
      "fields": [
        {
          "type": "textfield",
          "name": "./text",
          "label": "Button Text",
          "required": true
        },
        {
          "type": "pathfield",
          "name": "./link",
          "label": "Link",
          "rootPath": "/content"
        },
        {
          "type": "select",
          "name": "./style",
          "label": "Button Style",
          "options": [
            {
              "value": "primary",
              "text": "Primary"
            },
            {
              "value": "secondary",
              "text": "Secondary"
            }
          ]
        }
      ]
    }
  ]
}
```…