リストコンポーネント（v1） list-component-v

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
コアコンポーネント

作成対象：

開発者
管理者
ユーザー

コアコンポーネントのリストコンポーネントを使用すれば、動的リストや静的リストを簡単に作成できます。

使用方法 usage

リストコンポーネントを使用すれば、子ページの動的リストや、自由に定義した項目の静的リストなどを作成できます。

デザインダイアログでは、利用可能なリストの種類や書式設定のオプションをテンプレート作成者が定義できます。編集ダイアログでは、利用可能なリストタイプやリスト要素の書式設定方法の中から、コンテンツエディターが選択できます。

バージョンと互換性 version-and-compatibility

このドキュメントでは、AEM 6.3 のコアコンポーネントのリリース 1.0.0 で最初に導入された、リストコンポーネントの v1 について説明します。

次の表に、リストコンポーネントの v1 の互換性の一覧を示します。

AEM のバージョン

リストコンポーネント v1

6.3

互換性あり

6.4

互換性あり

CAUTION

このドキュメントでは、リストコンポーネントの v1 について説明します。

リストコンポーネントの現在のバージョンについて詳しくは、リストコンポーネントドキュメントを参照してください。

コンポーネント出力のサンプル sample-component-output

以下は We.Retail から取得したサンプルです。

スクリーンショット 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"
            }

NOTE

コアコンポーネントからの JSON エクスポートには、コアコンポーネントのリリース 1.1.0 が必要です。詳しくは、コアコンポーネント v1 の互換性情報を参照してください。

編集ダイアログ edit-dialog

編集ダイアログでは、コンテンツ作成者がリストとリスト要素を設定できます。

リスト設定 list-settings

リストは様々な方法で作成できます。

子ページ
固定リスト
検索
タグ

リストの作成方法に関係なく、常に設定できる並べ替えオプションがあります。

コンテンツ作成者が選択したリストの作成方法に応じて、追加の設定オプションが変わります。

子ページ child-pages

リストは、現在のページまたは別のページの子ページから作成できます。

親ページ
- リストを作成する子ページの親ページ
- 現在のページを使用する場合は空のままにします
子の深さ - 階層内の何個下のレベルまで使用するか

固定リスト fixed-list

リストは、項目の固定リストを使用して作成できます。

「追加」ボタンをタップまたはクリックして、新しい項目をリストに挿入します。

リスト内の項目のテキストを入力するか、選択ダイアログ を使用して AEM から項目を選択します。
リスト内の項目を再配置するには、ドラッグハンドルを使用します。
リスト内の項目を削除するには、ごみ箱アイコンを使用します。

検索 search-list

リストは、AEM コンテンツの検索結果を使用して作成できます。

検索クエリー - フルテキスト検索を実行してリスト要素を生成する際の対象となる文字列
検索範囲 - 検索の実行場所
- 選択ダイアログ を使用して AEM 内の場所を選択します。
- 空のままにした場合は現在のページが使用されます

タグ tags

リストは、特定の場所の下で特定のタグに一致するページを使用して作成できます。

親ページ - タグマッチングの開始場所
- 選択ダイアログ を使用して AEM 内の場所を選択します。
- 空のままにした場合は現在のページが使用されます
タグ - マッチングの対象となるタグ
- 参照ダイアログを使用してタグを選択します
一致 - リストに含まれるページの条件となる一致の種類を定義します
- いずれかのタグ
- すべてのタグ