Demystifying Core Components in AEM

Hemalatha Chockalingam
3 min readDec 8, 2022

--

What are Core Components?

The Core Components are a set of standardized Web Content Management (WCM) components for AEM to speed up development time and reduce maintenance cost of your websites. There are 30 robust WCM components that are well tested, widely used, and that perform well.

Core components Version

The current release of the Core Components is 2.21.2 and is compatible with AEM as a Cloud Service, AMS and on-premise AEM installations.

Core Components Categories

Structure, Content, Form and Commerce Components

Component Library
https://www.aemcomponents.dev/

Core Components Guide
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/introduction.html

What are Email Core Components?

Email Core Components are components that are built on top of the Core Components specifically for use with Adobe Campaign.

Email Core Components Guide
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/email/introduction.html?lang=en

Core Component with AEMAACS

AEM as a Cloud Service automatically comes with the latest version of the Core Components. Just as AEMaaCS offers you the latest features of AEM, AEMaaCS automatically keeps you up-to-date with the latest version of the Core Components.

Core Component with AEM 6.5 and Prior

The Core Components are not part of the quickstart when starting in production mode (without sample content). Therefore, your first step is to download the latest released content package from GitHub and to install it on your AEM environments.

Core Components are open sourced — Source Code Reference — Github

https://github.com/adobe/aem-core-wcm-components
https://github.com/adobe/aem-core-email-components

Core Components Architecture

Image credit: Adobe Documentation on Core Components

Design Dialog — The design dialog defines what authors can or cannot do in the edit dialog
Edit Dialog — The edit dialog shows authors only the options they are allowed to use.
Sling Model — The Sling model verifies and prepares the content for the view (template). The result of the Sling model can be serialized to JSON for SPA use-cases.
HTL(Sightly) — The HTL renders the HTML server-side for traditional server-side rendering.

How to use core components?

Core Components must not be directly referenced from the content. To avoid that, they all belong to a hidden component group, which will prevent them from showing up directly in the editor. It is not recommended to create any overlay of the same path in /apps. The proxy component pattern should be used.

Pro tip:
The Core Components require the use of editable templates and do not support Classic UI nor static templates.

AMP support in Core Components

Support for AMP in the Core Components is fully configurable. AMP versions of pages can be served exclusively, alongside the standard HTML versions, or not at all. The Core Components use amp as a Sling selector to render an AMP page.

Pro Tip: Due to AMP design limitations Adobe does not support the use of the Responsive Grid with the AMP version of your page

Other Interesting Features of Core Components:

Theamable using Style Components

Track-able — The Adobe Client Data Layer can integrate with your custom components and integrations with Adobe Analytics and Adobe Target can help you gain insights into your website
https://github.com/adobe/adobe-client-data-layer

Accessible — Compliant with WCAG 2.1 standard, provide ARIA labels, and support keyboard navigation.

SEO-Friendly — The HTML output is semantic and provides schema.org micro data annotations

Configurable — The Core Components leverage both OSGi configurations and Sling context-aware configurations.

Features of the Core Components that use context-aware configurations are:
PDF Viewer Component
Adobe Client Data Layer
AMP Support

--

--