Components

You are reading the AEM 6.2 version of Components.
This documentation is also available for the following versions:  AEM 6.1  AEM 6.0  AEM 5.6.1  AEM 5.6  CQ 5.5  CQ 5.4 

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

What exactly is a Component?

Components:

  • 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-optimized UI, the classic UI or both.
  • use dialogs that are built using sub-elements, these are: Granite UI components for the touch-optimized 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.

As 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. and then deploy it to your live publish environment(s)
    (here 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; this means 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; these include:

  • Paragraph System (parsys)
  • Layout Container (responsivegrid - touch-optimized UI only)
  • Text
  • Image, with accompanying text
  • Toolbar

Some components, for example Text, are provided in two versions - JSP and HTL.

The components provided and their usage within the sample websites provided (e.g. Geometrixx, Geometrixx Outdoors) 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.

To get a list of all the components available in the repository, proceed as follows:

  1. In CRXDE Lite, select Tools from the toolbar, then Query; the Query tab will be opened.
  2. As Type, select XPath.
  3. In the Query input field, enter following string:
       //element(*, cq:Component)
  4. Click Execute. The list is displayed.

Any questions?

Have a question about this or any other AEM topic? Ask our Community.
Learn more about AEM topics on our help hub.
Was this helpful?

By submitting your feedback, you accept the Adobe Terms of Use.

Thank you for submitting your feedback.