Core Components

You are reading the AEM 6.3 version of Core Components.
This documentation is also available for the following versions: 

In Adobe Experience Manager, components are the structural elements that constitute the content of the pages being authored. This section covers the core components, which provide essential content types to create pages.

The 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.

Note

Core components are not immediately available to authors, the development team must first integrate them to your environment. Once integrated, they may be made available and pre-configured via the template editor or in design mode.

Caution

Core components require AEM 6.3 and do not work with the Classic UI.

Authoring with Core Components

Authoring with the core components does not differ substantially from the foundation components.

However, as an author, you will notice several advantages of the core components, including:

The components are available on the Components tab of the side panel of the page editor when editing a page.

Components are grouped according to categories called component groups to easily organize and filter the components. The component group name is displayed with the component in the component browser and it is also possible to filter by group to easily find the right component.

Pre-Configuring Core Components

Configuring foundation components was the job of a developer. However with core components, a template author can now configure a number of capabilities via the template editor or in design mode.

For example if an image component should not allow image upload from the file system, or if a text component should only allow certain paragraph formatting, these features can be enabled or disabled with a simple click.

See Creating Page Templates for more information.

Edit and Design Dialogs

Because the core components can be pre-configured by template authors to define what options are allowed as part of a template, and then further configured by the page author to define actual page conent, each component can have options in two different dialogs.

  Description What it Controls Examples
Edit Dialog Options that a page author can modify during normal page editing for the placed components The content displayed by the component and how it will ultimately appear on the page. Text formatting, image rotation
Design Dialog Options that a template author can modify when configuring a page template. What options the page author has available when editing the component Which text formatting options are available, which image in-place options are available

List of Core Components Available

The following list describes the available core components with their edit and design dialog capabilities. For techincal details about the core components see the Core Components developer documentation.

Note

Depending on your instance you may have customized components developed explicitly for your requirements. These may even have the same name as some of the components discussed here.

Page

Extensible page component designed to work with the template editor and allow page header/footer and structure components to be assembed with the template editor.

Edit Dialog

Design Dialog

  • Client-Side Libraries
file

Title

Section heading component that features in-place editing.

Edit Dialog

  • Title Type / Size (H1-H6 levels)
file

Design Dialog

  • Default Type / Size
file

Text

Rich text component that features in-place editing.

Edit Dialog

  • None, in-place and fullscreen editing are available instead
file

Design Dialog

  • Define which capabilities of the rich text editor available to page authors:
    • Features (paste plain text, or from Word, find & replace, HTML source editing)
    • Formatting (tables, lists, alignment, bold, italic, underline, …)
    • Paragraph styles
    • Special characters
file

Image

Smart adaptive image component that features lazy loading and in-place editing.

Edit Dialog

  • Image asset
  • Mandatory alternative text, unless the image is decorative (required by assistive technology for visually impaired readers)
  • Link
  • Caption, displayed below the image, or as pop-up
file

Design Dialog

  • Smart loading
    • Allowed widths for the adaptive behavior
    • Disable lazy loading
  • Define which capabilities of the in-place image editor available to page authors:
    • Asset upload from file system
    • Image rotation
    • Horizontal or vertical image flipping
    • Image cropping with available aspect ratios

 

file

Caution

Note that in AEM, crop aspect ratios are defined as height/width. This differs from the conventional definition of width/height and is done for legacy compatability reasons. The authoring users will not be aware of any difference as long as you provide a clear name of the ratio since the name is shown in the UI and not the ratio itself.

List

A component that lists a collection of pages from different sources, with the possibility to order or paginate the results.

Edit Dialog

  • Define the list source (childs pages, fixed list, search results, or tags)
  • Define sort formatting (order by, sort order, and maximum elements)
  • Items Settings to define how to display the items (linking to the items, showing their description or their date)
file

Design Dialog

  • List Settings to define which list sources are made availalbe to authors
  • Items Settings to define the how to display the items by default (linking to the items, showing their description or their date)
file

Breadcrumb

Component that displays the position of the current page within the site hierarchy, allowing the visitors to navigate the page hierarchy.

Edit Dialog

  • Define starting navigation level
  • Whether to show hidden pages, and to hide the current page in the navigation
file

Design Dialog

  • Define default starting navigation level
  • Default value for whether to show hidden pages, and to hide the current page in the navigation
file

Sharing

Facebook and Pinterest sharing widget

Edit Dialog

  • Because sharing requires special page headers, any sharing must be enabled at the page level. Therefore, the options for the sharing component are available through the page properties.

Design Dialog

  • None

Form Container

The core form container component allows the building of simple information submission forms and features:

  • Support of simple WCM forms
  • Uses a nested structure allowing additional form components

Edit Dialog

  • Action Type (mail, store content, submit order, and update order)
  • Action Type Options (standard mail options such as subject, to/from, cc, as well as defining content path for storage of submitted data)
  • Thank You Page (leave blank to redisplay form after submission)
file

Design Dialog

Form Text Input

Core form text input component that allows entry of form text.

Edit Dialog

  • Constraint to define which data can be entered
    • Text, Textarea, Email, Telephone, Date, and Number
    • Can affect what type of keyboard is shown on mobile devices
  • Define label element names and values
  • Define a help message and how it is displayed
  • Make file required or read-only
file

Design Dialog

  • None

Form Options

Core form component that allows selecting from multiple options as a drop-down, radio button, or checkbox.

Edit Dialog

  • Define type of input (checkboxes, radio buttons, drop-down, multi-select drop-down)
  • Define field title, name, and source
    • Local - static options within the component
    • List - path in the repository for the list of options
    • Datasource - resource type of the datasource
file

Design Dialog

  • None

Form Hidden Field

Core hidden field component.

Edit Dialog

  • Define name, value, and identifier
file

Design Dialog

  • None

Form Button

Core form button component.

Edit Dialog

  • Define type of button (submit or nomral button)
  • Define title, name, and value
file

Design Dialog

  • None

Note

The form core components are not related to AEM Forms.

Developer Resources

See the Developing Core Components developer documentation for technical information regarding core components.

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.