Sample Component Output
To experience the List Component as well as see examples of its configuration options as well as HTML and JSON output, visit the Component Library.
Technical Details
The latest technical documentation about the List Component can be found on GitHub.
Further details about developing Core Components can be found in the Core Components developer documentation.
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.
Regardless of how the list is built, there are Sort and ID Options that can always be configured.
Depending on how the content author chooses to build the list, the additional configuration options will change.
Child Pages
The list can be built of the child pages of the current page or another 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
The list can be built using the results of a search of AEM content.
-
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
- Use current page if left blank
Tags
The list can be built using pages that match certain tags under a particular location.
-
Parent page
Where the tag matching should start- Use the Selection Dialog to choose the location in AEM
- Use 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 tag
- 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
Design Dialog
The design dialog allows the template author to define what types of lists should be allowed to the content authors as well as the available item settings.
List Settings
On the List Settings tab, the date format can be defined as well as what type of lists should be available in the component to the content authors.
- Date Format
Format to use for the display of the last modification date - Disable children
Disable the children list type in the component - Disable static
Disable the static list type in the component - Disable search
Disable the search list type in the component - Disable tags
Disable tags list type in the component
Item Settings
On the Item Settings tab, the formatting options for the individual list elements that should be available in the component for the content authors can be defined.
- Link items
Enable Link Items option in the edit dialog - Show descriptions
Enable Show Descriptions option in the edit dialog - Show date
Enable Show Date option in the edit dialog