Olet tarkastelemassa seuraavan version ohjesisältöä::

This page provides an overview of Adobe Experience Manager (AEM) components such as those used for page authoring. The following pages provide more detailed information about developing these (and other) components:

What Exactly is a Component?


  • Are modular units which realize specific functionality to present your content on your website.
  • Are re-usable.
  • Are 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 an edit behaviour that can be configured.
  • Can be made available for either the touch-enabled UI, the classic UI, or both.
  • Use dialogs that are built using sub-elements, these are: Granite UI components for the touch-enabled UI and widgets, implemented with ExtJS, for the classic UI.
  • Can be developed using HTL (recommended) or JSP.
  • Can be developed to create customized components that extend the default functionality.

Because components are modular, you can:

  1. Develop a new component on your local instance.
  2. Deploy this to your test environment.
  3. Deploy it to your live authoring environment, where they allow authors and/or administrators to add and configure content.
  4. 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

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

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

Core Components have been 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 they are no longer enhanced and are based on legacy technologies.


Core Components represent the current best practices for component design and development and serve as reference implementations.

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.