AEM Component Builder

What this tool does

The builder writes the boilerplate of a new AEM component from one form. You describe the component and its dialog fields, and it generates every file in the right place of an AEM Project Archetype project:

• Component node (.content.xml): title, description, group and optional super type.
• Dialog (_cq_dialog/.content.xml): Granite UI (Coral 3) fields on tabs, with the type hints that make AEM store numbers, booleans and dates with the right JCR type.
• HTL (<name>.html): markup with BEM classes and the Core Components empty placeholder for authors.
• Sling Model: an interface and an implementation with one getter per field, link mapping for page paths, an isEmpty() check and, optionally, the Sling Model Exporter for JSON.
• Unit test: a JUnit 5 test using AEM Mocks that authors sample values and checks every getter.
• SCSS: a BEM stub for ui.frontend.

The names, getters and types are generated from the same field list, so the dialog, model, HTL and test always agree. Everything runs in your browser.

When to use it

• Starting a new component: skip copying an old component and renaming everything by hand.
• Learning AEM: see how a dialog field, its stored property, the Sling Model getter and the HTL expression connect.
• Agreeing a component with authors: list the fields, their labels and help texts, then hand the generated files to development.

How to use it

1. Pick AEM as a Cloud Service or AEM 6.5, and start from an example or edit the one shown.
2. Fill in the component: title, node name and group. The resource type is shown below them.
3. Set the project: your app ID (the folder under /apps) and the Java package of your Sling Models. Choose whether you want the exporter, the unit test and the SCSS file.
4. Add dialog fields with the buttons under the list. Open a field to set its label, property name, help text and options. Add a Tab marker to start a new dialog tab.
5. Look through the generated files on the right and check the Checks tab. When there are no problems, press Download all (.zip).
6. Unzip the download over your project root, then build and deploy with mvn clean install -PautoInstallSinglePackage.

Field types

Field	Dialog widget	Stored as	Sling Model type
Text	textfield	String	String
Text area	textarea	String	String
Rich text	richtext (inline editor)	String (HTML)	String, printed with context='html'
Number	numberfield	Long, or Double with a fractional step, min or max	Long / Double
Checkbox	checkbox	Boolean	boolean
Dropdown	select	String	String
Date	datepicker	Date	Calendar
Link	pathfield	String (path or URL)	String, page paths mapped to .html URLs
Image	pathfield, plus an alt text field	String (DAM path)	String, plus get…Alt()
Multifield, no fields	multifield of textfields	String[]	List<String>
Multifield with fields	composite multifield	child nodes	List<Item>

Checks

The builder flags problems before you download:

• App ID, node name and Java package that AEM or Java won’t accept.
• Two fields storing the same property, or two properties that become the same Java name (cta-link and ctaLink).
• Reserved names such as empty, which would clash with the generated isEmpty().
• Dropdowns without options or with duplicate values, and a minimum larger than the maximum.
• Multifields inside multifields, which need a child component instead.

Limits

• The Sling Model reads the component’s own properties. With a super type, it doesn’t delegate to the parent’s model.
• The HTL is a starting point: rearrange the markup, and decide how checkboxes and dropdown values should change it.
• Multifields can’t contain other multifields here. Nested lists are easier to author as child components.
• The SCSS only lists the BEM elements. Styling is up to you.