DocumentationAEM 6.4Developing Guide

Components Overview components-overview

Last update: Wed May 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Developer
CAUTION
AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

This page provides an overview of Adobe Experience Manager (AEM) components such as those used for page authoring.

What are Components? what-exactly-is-a-component

  • Modular units which realize specific functionality to present your content on your website.
  • Re-usable.
  • Developed as self-contained units within one folder of the repository.
  • Have no hidden configuration files.
  • Can contain other components.
  • Can run anywhere within any AEM system. They can also be limited to run under specific components.
  • Have a standardized user interface.
  • Have edit behavior that can be configured.
  • Use dialog boxes that are built using sub-elements based on Granite UI components
  • Are developed using HTL (recommended) or JSP.
  • Can be developed to create customized components that extend the default functionality.

Because components are modular, you can:

  • Develop a new component on your local instance.
  • Deploy it to your test environment.
  • Deploy it to your live authoring environment, where they allow authors and/or administrators to add and configure content.
  • Deploy it to your live publish environment(s), where they are used to render content for visitors to your website. Certain components, for example for Communities, also accept input from your users.

Each AEM component:

  • Is a resource type.
  • Is a collection of scripts that completely realize a specific function.
  • Can function in isolation, meaning either within AEM or a portal.

Out-of-the-Box Components Within AEM out-of-the-box-components-within-aem

AEM comes with a variety of out-of-the-box components that provide comprehensive functionality including:

  • Paragraph System ( parsys)
  • Page ( responsivegrid - touch-enabled UI only)
  • Text
  • Image, with accompanying text
  • Toolbar

The components provided and their usage within the sample We.Retail websites provided illustrate how to implement and use components. The components are provided with all source code and can be used as is or as starting points for modified or extended components.

Core Components and Foundation Components core-components-and-foundation-components

There are two sets of Adobe-provided AEM components available:

Core Components were introduced with AEM 6.3 and offer flexible and feature-rich authoring functionality. The We.Retail reference site illustrates how the core components can be used and represent the current best-practices of component development.

Foundation Components have been available with AEM for many versions and are available out-of-the-box in a standard AEM installation. Although still supported, most have been deprecated, are no longer enhanced, and are based on legacy technologies.

NOTE
Core Components represent the current best practices for component design and development and serve as reference implementations.
AEM Modernization Tools can help the migration to Core Components.

Viewing Available Components viewing-available-components

For an overview of all of the available components in your AEM instance, use the Components Console.

Alternatively, you can also use CRXDE Lite to get a list of all the components available in the repository.

  1. In CRXDE Lite, select Tools from the toolbar, then Query, which opens the Query tab.

  2. In the Query tab, select XPath as Type.

  3. In the Query input field, enter following string:

    //element(*, cq:Component)

  4. Click Execute and the components are listed.

Additional resources further-reading

The following pages provide more detailed information about developing these—and other—components:

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e