[AEM Forms]{class="badge positive" title="AEM Formsに適用)。"}

インタラクティブ通信エディターでの動的テーブルの作成

概要

インタラクティブ通信エディターには、動的テーブルが用意されています
構造化データソースから実行時にコンテンツが自動的に入力されるデータドリブン型テーブルを作成者が作成できるようにする機能。

行を手動で作成する必要がある静的テーブルとは異なり、動的テーブルは、バインドされたデータソースから返されたレコードに基づいて自動的に拡張または縮小されます。 これにより、請求書、取引履歴、製品リスト、ポリシースケジュールなどのシナリオに役立ちます。

この記事では、データバインディングを使用して動的テーブルを挿入および設定する方法、複数ページのテーブルフローを管理する方法、行数を検証する方法について説明します。

動的テーブルの挿入

  1. インタラクティブ通信エディター​を開きます。
  2. コンポーネントパネル​から、テーブルコンポーネント​を
    キャンバス:
  3. ダイアログボックスで​ 列数 ​と​ 初期行 ​を指定し、ヘッダー行​が含まれていることを確認してから、「OK」をクリックしてテーブルを作成します。

動的テーブルへのデータのバインド

動的テーブルは、繰り返し可能なデータソースにバインドすることで、行に自動的に入力されます。

IC ドキュメントを検索

データをテーブルにバインドするには:

  1. 階層パネルから​ テーブルの行 ​を選択します。

  2. サイドパネルから​ データバインディング ​を開きます。

  3. 選択したデータスキーマが配列型であることを確認します。

  4. 配列データスキーマを選択したテーブル行にドラッグ&ドロップして、データをバインドします。

ページフローを有効にする

動的テーブルは、単一ページを超えて展開される場合があります。 テーブルを拡大してページ間で続行するには、フローコンテンツ コンテナ内に配置します。

IC ドキュメントを検索

ページフローを有効にするには:

  1. テーブルの​ 親レイアウトコンテナ ​を選択します。

  2. プロパティパネルを開き、コンテンツタイプを​ Flowed ​に設定します。

  3. テーブルを選択し、フローコンテンツをサポートするように設定されていることを確認します。

  4. 通信をプレビューして、追加の行がレンダリングされるときにテーブルが次のページに続くことを確認します。

テーブル内で改ページを許可

IC ドキュメントを検索

テーブルがページ間で適切に分割されるようにするには、次の手順を実行します。

  1. キャンバスで​ テーブル ​を選択します。
  2. プロパティ パネルを開きます。
  3. コンテンツ内で改ページを許可​を有効にします。

有効にすると、表はページの最後で自動的に区切られ、次のページに続き、ヘッダー行が繰り返されます。

行の検証の設定

動的テーブルがレンダリングできる行数を制御できます。

  • 最小行: テーブルが少なくとも指定された行数だけレンダリングされるようにします。
  • 最大行:​は、データソースからレンダリングされる合計行を制限します。
  • 初期行: デザイン時のプレビュー時にエディターに表示される行数を定義します。
NOTE
初期行​を​ 3 ~ 5 ​程度に設定すると、ランタイムデータが適用される前に、よりリアルなレイアウトプレビューが表示されます。

主な機能

  • 列データのバインド:各列をデータモデルのフィールドにバインドします。

  • フロー済みコンテンツ:テーブルを拡張し、ページ間で続行できます。

  • 改ページのサポート:テーブル内の行レベルの改ページを有効にします。

  • 最小行:最小数の行がレンダリングされるようにします。

  • 最大行数:データソースからレンダリングされる合計行を制限します。

  • 初期行:デザイン時のプレビュー時に表示されるデフォルトの行を定義します。

インタラクティブ通信エディターの動的テーブル機能を使用すると、カスタムコードを記述することなく、柔軟なデータ駆動型テーブルを作成できます。 テーブルをデータ配列にバインドし、Flowed Contentを有効にし、ページ区切りを許可し、行検証を設定することで、作成者は一貫したレイアウトを維持しながら、様々なボリュームのデータにスムーズに適応する構造化コミュニケーションを作成できます。

recommendation-more-help
experience-manager-cloud-service-help-main-toc