リストコンポーネント（v2）

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

使用方法

リストコンポーネントを使用すれば、子ページの動的リストや、自由に定義した項目の静的リストなどを作成できます。デザインダイアログでは、利用可能なリストの種類や書式設定のオプションをテンプレート作成者が定義できます。編集ダイアログでは、利用可能なリストタイプやリスト要素の書式設定方法の中から、コンテンツエディターが選択できます。

バージョンと互換性

このドキュメントでは、2018年1月にコアコンポーネントのリリース 2.0.0 で導入されたリストコンポーネント v1 について説明します。

リスト内のリダイレクト

ページにリダイレクトターゲットがある場合（外部 URL を指しているか別の AEM ページを指しているかに関係なく）、そのターゲットへのリンクを含むリストは、リダイレクトターゲットの URL を直接示します。

例

• ページ B にリダイレクトするページ A を作成します。
• https://aemcomponents.dev にリダイレクトするページ C を作成する
• ページ D で、ページ A とページ C を含むリストコンポーネントを挿入します。
• 生成された各リンクは、ページ B と https://aemcomponents.dev を直接指します。

コンポーネント出力のサンプル

リストコンポーネントを体験したり、その設定オプションの例や、HTML 出力や JSON 出力の例を確認したりするには、コンポーネントライブラリにアクセスしてください。

技術的詳細

リストコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。

コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。

編集ダイアログ

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

「リスト設定」タブ

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

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

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

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

子ページ

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

• 親ページ

  • リストを作成する子ページの親ページ
  • 現在のページを使用する場合は空のままにします

• 子の深さ
  階層内の何個下のレベルまで使用するか

固定リスト

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

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

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

検索

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

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

タグ

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

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

並べ替えオプション

リストの作成方法にかかわらず、いつでも定義できる並べ替えオプションがあります。

• 並べ替え順
  要素の並べ替え方法
  • タイトル
  • 最終変更日
• 並べ替え順序
  項目の並べ替え順序
  • 昇順
  • 降順
• 最大項目数
  リストに表示される項目の最大数。
  • すべての項目を返すには、空のままにします。
• ID - このオプションを使用すると、HTML 内およびデータレイヤー内のコンポーネントの一意の識別子を制御できます。
  • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
  • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
  • ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。

「項目設定」タブ

「項目設定」タブを使用すれば、リスト要素の書式設定を設定できます。

• 項目をリンク
  項目を対応するページにリンクします
• 説明を表示
  リンク項目の説明を表示します
• 日付を表示
  リンク項目の変更日を表示します

デザインダイアログ

デザインダイアログでは、テンプレート作成者が、コンテンツ作成者に許可するリストの種類や、使用可能な項目設定を定義できます。

リスト設定

「リスト設定」タブでは、日付の形式を定義したり、コンポーネントでコンテンツ作成者が使用できるリストの種類を定義したりできます。

• 日付の形式
  最終変更日の表示に使用する形式
• 子を無効にする
  コンポーネントで子リストタイプを無効にします
• 静的を無効にする
  コンポーネントで静的リストタイプを無効にします
• 検索を無効にする
  コンポーネントで検索リストタイプを無効にします
• タグを無効にする
  コンポーネントでタグリストタイプを無効にします

項目設定

「項目設定」タブでは、コンテンツ作成者がコンポーネント内で使用できる個々のリスト要素の書式設定オプションを定義することができます。

• 項目をリンク
  編集ダイアログで「項目をリンク」オプションを有効にします
• 説明を表示
  編集ダイアログで「説明を表示」オプションを有効にします
• 日付を表示
  編集ダイアログで「日付を表示」オプションを有効にします

「スタイル」タブ

画像コンポーネントは、AEM スタイルシステムをサポートしています。

Adobe Client Data Layer

リストコンポーネントは、Adobe Client Data Layer をサポートしています。