Create Coral dialogs for AEM with a Javascript API

Project is under active development, and future versions will introduce breaking changes.

Current working example

import { Multifield, Container, TextField, PathField, generate } from "aem-dialogs";

const multi = new Multifield("states", {
    fieldDescription: "Click '+' to add a new state.",
    composite: true,
}).child(
    new Container("field").items([
        new TextField("name", {
            fieldLabel: "Name",
            fieldDescription: "Enter a state name",
            emptyText: "Name",
            required: true,
        }),
        new PathField("flag", {
            fieldLabel: "Flag",
            fieldDescription: "Select the state flag image",
            forceSelection: true,
            rootPath: "/content/dam",
        }),
    ]),
);

generate("./tests/multi", multi);

To do

• Complete all Granite Coral based interfaces/class for convenience
  • RichText (Advanced Support)
  • Only supports dialog with tabs right now (DialogTabs)
• End goal is to have this easily droppable inside of ui.frontend.
  • Implementation structure will likely resemble the clientlib.config.js/aem-clientlib-generator.

Important Methods

parent.child(child: AemNode): Attaches a child AemNode to a parent AemNode.

parent.items(children: AemNode[]): Creates an <items /> node and attaches it to an AemNode. Contents populated by children.

generate(dirPath: string, xml: AemNode): Creates a .content.xml at dirPath with the .xml() output of the given AemNode.

Supported:

• AemNode: Can be used for anything that is not explicitly supported
• Checkbox
• Container
• DatePicker
• Field
• FileUpload
• FixedColumns
• JcrRoot
• Multifield
• NumberField
• PathBrowser
• PathField
• RadioGroup, RadioGroupItem
• RichText (basics like adding chars and formats)
• Select
• SelectOption
• DialogTabs
• Tab
• Textarea
• TextField