AEM Components Explained: Dialogs, HTL, Sling Models, and Core Components

🔍 What Is It?

An AEM component is a combination of:

• →A JCR node under /apps/your-project/components/ that defines the component
• →A dialog (XML) that gives authors a form to fill in content
• →An HTL/Sightly template that renders the HTML
• →An optional Sling Model (Java) that provides business logic
• →Optional CSS/JS via Client Libraries

Every piece of content you see on an AEM page — a banner, a card, a text block, a navigation — is a component.

🎯 Why Do We Need It?

Without components, every page would need a developer to hard-code HTML. Components solve this by:

• →Letting authors add and configure content without touching code
• →Ensuring consistent design across thousands of pages
• →Making content reusable and maintainable
• →Allowing developers to build once, authors to use many times

In enterprise projects, a typical website has 30–80 custom components. The component model is what makes AEM different from a static website builder.

🏗️ What Happens in Real Projects?

In a real project, here's how components come to life:

1. Business Analyst defines: "We need a Hero Banner with a heading, sub-text, background image, and a CTA button"
2. UX Designer creates the design mockup
3. AEM Developer creates the component — dialog, HTL, Sling Model
4. Front-end Developer writes the CSS/JS in Client Libraries
5. Content Author drags the component onto a page, fills in the dialog, and publishes

In practice, most AEM projects use a mix of custom components (built by your team) and Core Components (Adobe's open-source component library). You'll often extend Core Components rather than building from scratch.

⚙️ How It Works

Here's the anatomy of a component:

1. Component Node (`/apps/mysite/components/hero`)

This is the JCR node that registers the component. Key properties:

• →jcr:primaryType = cq:Component
• →jcr:title = Hero Banner (shown in component picker)
• →componentGroup = My Site - Content
• →sling:resourceSuperType = used for inheritance

2. Dialog (`cq:dialog`)

XML structure that defines the author-facing form. Uses Granite UI widgets (textfield, pathbrowser, checkbox, etc.).

3. HTL Template (`hero.html`)

The rendering script. AEM finds this file by matching the sling:resourceType of the content node to the component path.

4. Sling Model (`HeroModel.java`)

Java class annotated with @Model that adapts the resource and provides data to HTL via @Inject or @ValueMapValue.

5. Content Node (stored in `/content`)

When an author drops a component and fills the dialog, AEM saves the values as a JCR node under the page's jcr:content.

💻 Example

Building a Simple Hero Banner Component — A minimal but complete example of a Hero Banner component from node definition to rendering.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Hero Banner"
    componentGroup="MyProject - Content"
    sling:resourceSuperType="core/wcm/components/image/v3/image"/>

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits