List Component (v1) list-component-v

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

Usage usage

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.

Version and Compatibility version-and-compatibility

This document describes v1 of the List Component, originally introduced with release 1.0.0 of the Core Components with AEM 6.3.

The following table lists the compatibility of v1 of the List Component.

Sample Component Output sample-component-output

The following is sample taken from We.Retail.

Screenshot screenshot

HTML html

<div class="cmp cmp-list aem-GridColumn aem-GridColumn--default--12">

<ul>
    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/arctic-surfing-in-lofoten.html">
            <span class="cmp-list--item-title">Arctic Surfing In Lofoten</span>

        </a>

    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/summit-success-in-the-himalayas.html">
            <span class="cmp-list--item-title">Summit Success in the Himalayas</span>

        </a>

    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/climbing-on-kalymnos-island--greece.html">
            <span class="cmp-list--item-title">Climbing on Kalymnos Island, Greece</span>

        </a>

    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/running-at-the-great-wall-marathon.html">
            <span class="cmp-list--item-title">Running at the Great Wall Marathon</span>

        </a>

    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/skiing-deep-powder-in-siberia.html">
            <span class="cmp-list--item-title">Skiing deep powder in Siberia</span>

        </a>

    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/climbing-in-the-massif-du-mont-blanc.html">
            <span class="cmp-list--item-title">Climbing in the Massif du Mont Blanc</span>

        </a>

    </article>
</li>
</ul>

</div>

JSON json

"articles_list": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              ":type": "weretail/components/content/articleslist",
              "tagsMatch": "any",
              "displayAs": "teaser",
              "feedEnabled": "true",
              "listFrom": "children",
              "limit": "0",
              "orderBy": "cq:lastModified",
              "pageMax": "0"
            }

Edit Dialog edit-dialog

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

List Settings list-settings

The list can be built in different ways.

Regardless of how the list is built, there are Sort 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 child-pages

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

Fixed List 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.

Search search-list

The list can be built using the results of a search of AEM content.

Tags tags

The list can be built using pages that match certain tags under a particular location.

Sort Options sort-options

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

Item Settings item-settings

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

Design Dialog 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 list-settings-1

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.

Item Settings item-settings-1

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.

Technical Details technical-details

The latest technical documentation about the List Component can be found on GitHub.

The entire core components project can be downloaded from GitHub.

Further details about developing Core Components can be found in the Core Components developer documentation.