AEM WCM Core Components

Set of standardized Web Content Management (WCM) components for Adobe Experience Manager (AEM) to speed up development time and reduce maintenance cost of your websites.

Welcome

• Contributions are welcome, read our contributing guide for more information.
• Ideas and questions are discussed on our public mailing list; you can also subscribe via email.

Usability Study 2020

We're conducting a usability study by using the System Usability Scale, a reliable tool to measure the perceived usability.
Please help us making the Core Components better by responding to our short usability questionnaire. Thank you!

Documentation

• Component Library: A collection of examples to view the components in their various configurations.
• Component Documentation: For developers and authors, with details about each component.
• Get Started:
  • WKND Tutorial: A two-day tutorial for building a new site.
  • Summit Tutorial: A two-hour tutorial for building a new site (from a Lab at US Summit 2019).
  • Gems Webinar: A guided tour of the Core Components (recorded on Dec 2018).

Features

• Production-Ready: 28 robust components that are well tested, widely used, and that perform well.
• Cloud-Ready: Whether on AEM as a Cloud Service, on Adobe Managed Services, or on-premise, they just work.
• Versatile: The components represent generic concepts with which the authors can assemble nearly any layout.
• Configurable: Template-level content policies define which features the page authors are allowed to use or not.
• Accessible: They comply WCAG 2.1 standard, provide ARIA labels, and support keyboard navigation (known issues).
• SEO-Friendly: The HTML output is semantic and provides schema.org microdata annotations.
• WebApp-Ready: The streamlined JSON output allows client-side rendering, still with a possibility of in-context editing.
• Design Kit: A UI kit for Adobe XD allows designers to create wireframes that they can then style as needed.
• Themeable: The components implement the Style System, and the markup follows BEM CSS conventions.
• Customizable: Several patterns allow easy customization, from adjusting the HTML to advanced functionality reuse.
• Versioning: The versioning policy ensures we won't break your site when improving things that might impact you.
• Open Sourced: If something is not as it should, contribute your improvements!
• Trackable: Main components are integrated with the Adobe Client Data Layer.

Template Components

1. Page
2. Navigation
3. Language Navigation
4. Breadcrumb
5. Quick Search

Page Authoring Components

6. Title
7. Text
8. Image
9. Button
10. Teaser
11. Download
12. List
13. Experience Fragment
14. Content Fragment
15. Content Fragment List
16. Embed
17. Sharing
18. Separator
19. Progress Bar

Container Components

20. Container
21. Carousel
22. Tabs
23. Accordion

Form Components

24. Form container
25. Form text field
26. Form options field
27. Form hidden field
28. Form button

Roadmap

To learn about the main upcoming components and features, visit the roadmap wiki page.

Usage

To include the Core Components in a new project, we strongly advise to use the AEM Project Archetype; this guarantees a starting point that complies to all recommended practices from Adobe.

For existing projects, take example from the AEM Project Archetype by looking at the core.wcm.components references in the main pom.xml, in all/pom.xml, and in ui.apps/pom.xml. For the rest, make sure to create Proxy Components, to load the client libraries and to allow the components on the template, as instructed in Using Core Components.

System Requirements

Core Components	AEM as a Cloud Service	AEM 6.5	AEM 6.4	Java SE	Maven
2.9.0	Continual	6.5.4.0+	6.4.8.0+	8, 11	3.3.9+

For the requirements from previous Core Component releases, see Historical System Requirements.

The Core Components require the use of editable templates and do not support Classic UI nor static templates. If needed, check out the AEM Modernization Tools.

Setup your local development environment for AEM as a Cloud Service SDK or for older versions of AEM.

Building

To compile your own version of the Core Components, you can build and install everything on your running AEM instance by issuing the following command in the top level folder of the project:

mvn clean install -PautoInstallSinglePackage

You can also install individual packages/bundles by issuing the following command in the top-level folder of the project:

mvn clean install -PautoInstallPackage -pl <project_name(s)> -am

Note that:

• -pl/-projects option specifies the list of projects that you want to install
• -am/-also-make options specifies that dependencies should also be built

For convenience, the following deployment profiles are provided when running the Maven install goal with mvn install:

• autoInstallSinglePackage: Install everything to the AEM author instance.
• autoInstallSinglePackagePublish: Install everything to the AEM publish instance.
• autoInstallPackage: Install the ui.content and ui.apps content packages to the AEM author instance.
• autoInstallPackagePublish: Install the ui.content and ui.apps content packages to the AEM publish instance.

The hostname and port of the instance can be changed with the following user defined properties:

• aem.host and aem.port for the author instance.
• aem.publish.host and aem.publish.port for the publish instance.