List

The Core Component List Component allows for the easy creation of dynamic as well as static lists.

The List Component can be used to create, for example, a dynamic list of child pages or a static list of arbitrarily defined items. The type of lists available and formatting options can be defined by the template author in the design dialog. The content editor can select from available list types and how to format the list elements in the edit dialog.

The edit dialog allows the content author to configure the list and the list items.

List Settings Tab

The list can be built in different ways:

• Child pages
• Fixed list
• Search
• Tags

Regardless of how the list is built, there are Sort and ID Options that can always be configured.

Child Pages
The list can be built of the child pages of the current page or another page as shown in the example at the bottome of this page.

Parent page
The page whose child pages should make the list.  Leave blank to use the current page

Child Depth
How many levels down in the hierarchy should be used.

Fixed List
The list can be built using a fixed list of items. Tap or click the Add button to inset a new item to the list.

• Enter text for the item in the list or use the Selection Dialog to choose an item from AEM.
• Use the drag handle to re-arrange the items in the list.
• Use the trash can icon to delete items in the list.

• Search query
  • The string for which a full-text search will be run to generate the list elements.
• Search in
  • Where the search should be run.
  • Use the Selection Dialog to choose the location in AEM.
  • Uses the current page if left blank.

Tags

The list can be built of the child pages of the current page or another page.

• Parent page
  • Where the tag matching should start
  • Use the Selection Dialog to choose the location in AEM
  • Uses current page if left blank
• Tags
  • Which tags should be matched
  • Use the Browse dialog to select the tags
• Match
  • Define which kind of match should qualify a page to be included in the list
  • Any tags
  • All tags

Sort Options

Regardless of how you choose to build the list, there are certain sorting options that can always be defined.

• Order by
  • How the elements should be ordered
  • Title
  • Last modified date
• Sort Order
  • The order in which the items should be ordered
  • Ascending
  • Descending
• Max Items
  • Maximum number of items displayed in list
  • Leave empty to return all items
• ID
  • This option allows to control the unique identifier of the component in the HTML and in the Data Layer
  • If left blank, a unique ID is automatically generated for you and can be found by inspecting the resulting page
  • If an ID is specified, it is the responsibility of the author to make sure that it is unique
  • Changing the ID can have an impact on CSS, JS and Data Layer tracking

Item Settings Tab

Using the Item Settings tab, the formatting of the list elements can be configured.

• Link Items  - Link items to the corresponding page
• Show Description - Show descriptions of the link item
• Show Date - Show modification date of the link item

List Component Example