0.1.2 • Published 2 years ago
aem-dialogs v0.1.2
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