アダプティブフォームのテーブル tables-in-adaptive-forms

新しいアダプティブフォームを作成する、または AEM Sites ページにアダプティブフォームを追加する際には、最新の拡張可能なデータキャプチャであるコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。

バージョン
記事リンク
AEM 6.5
ここをクリックしてください
AEM as a Cloud Service
この記事

複雑なデータであっても、テーブルを使用することで、効果的かつシンプルにまとめて提示できます。情報をわかりやすく配置し、行と列に分けて規則正しく配列することで、ユーザーも入力しやすくなります。金融サービスや政府機関が提供するフォームの大部分は、数字を入力して計算を実行できる大規模なデータテーブルを必要とします。

AEM Forms では、サイドバーのコンポーネントブラウザーにテーブルコンポーネントが用意されており、アダプティブフォーム内でテーブルを作成できます。主な機能には、以下のようなものがあります。

  • モバイルデバイス上のレスポンシブなレイアウト
  • 設定可能な行と列
  • 実行時の動的な追加と削除
  • セルの結合と分割
  • スクリーンリーダーによるアクセス
  • CSS を使用したカスタムレイアウト
  • XDP テーブルコンポーネントとの互換性とマッピング
  • XSD 複合タイプ要素を使用した行またはセルの追加のサポート
  • XML ファイルからのデータの結合

テーブルの作成 create-a-table

テーブルを作成するには、テーブルコンポーネントをサイドキックのコンポーネントブラウザーからアダプティブフォームにドラッグ&ドロップします。テーブルには、デフォルトで 2 つの列とヘッダー行を含む 3 つの行が含まれています。

AEM サイドバーのテーブルコンポーネント

ヘッダーと本文セルについて about-header-and-body-cells

ヘッダーセルは、テキストフィールドです。ヘッダーのラベルを変更するには、ヘッダーセルを右クリックし、「編集」をクリックします。編集ダイアログの「」フィールドのラベルを編集して、「OK」をクリックします。

ボディセルは、デフォルトでテキストボックスになっています。ボディセルは、サイドキックで使用可能な他のアダプティブフォームコンポーネント(数値ボックス、日付選択、ドロップダウンリストなど)に置き換えることができます。

例えば、以下のテーブルの最初のボディ行には、テキストボックス、日付選択、ドロップダウンリストのコンポーネントがセルとして含まれています。

行セルのタイプ

結合したいセルを選択し、右クリックして「結合」を選択することで、複数のセルを結合できます。また、結合されたセルを右クリックして「セルの分割」を選択することで、セルを分割できます。

行および列の追加、削除、移動 add-delete-move-rows-and-columns

テーブルの行または列を追加/削除したり、行を上下に移動させることができます。

行の追加、削除、移動

行を追加、削除、移動するには、行の任意のセルをクリックします。コンテンツブラウザー コンテンツブラウザー を開き、対応する行を選択すると、選択した行がハイライトされ、ツールバーオプションから行の追加、削除、上下の移動ができるようになります。

  • 上へ移動下へ移動 ​の操作を行うと、選択した行が上下に移動します。

  • 列を追加 ​の操作を行うと、選択した行の下に行が追加されます。

  • 列を削除 ​の操作を行うと、選択した行が削除されます。

行および列の追加-削除-移動

行をダブルクリックして、名前、バインド参照、繰り返し設定、CSS クラスなど、行のプロパティを設定します。
行および列の追加-削除-移動

列の追加または削除

列を追加または削除するには、ヘッダーセクションのテキストセルをクリックします。ツールバーが開き、列を追加または削除するオプションが表示されます。

add-delete-move-row-column

NOTE
テーブルには、任意の数の行を追加できますが、追加できる列の数は最大 6 つまでに制限されています。また、テーブルからヘッダー行を削除することはできません。

テーブルの説明の追加 add-table-description

情報がどのように整理されているか、スクリーンリーダーが解釈し、読み出すことのできる説明を、テーブルに追加できます。説明を追加するには、以下の手順を実行します。

  1. テーブルを選択して cmppr をクリックし、プロパティをサイドバーに表示します。
  2. 「アクセシビリティ」タブで概要を指定します。
  3. 完了」をクリックします。

テーブルの列の並べ替え sortcolumnstable

アダプティブフォームでは、テーブルの任意の列を基準にデータを並べ替えることができます。列の値は、昇順または降順で並べ替えることができます。

並べ替えは、以下の項目を含むテーブルの列に適用できます。

  • 静的テキスト
  • データモデルオブジェクトプロパティ
  • 静的テキストとデータモデルオブジェクトプロパティの組み合わせ

テーブルの列に並べ替えを適用するには、数値ボックス、数値ステッパー、日付入力フィールド、日付選択、テキスト、テキストボックスのうち、いずれかのコンポーネントがテーブルの列のセルに含まれている必要があります。

並べ替えを有効にするには、以下の手順を実行します。

  1. テーブルを選択し、 configure_icon (設定)をクリックします。インタラクティブ通信のサイドキックにある​ コンテンツ ​ブラウザーを使用して、テーブルを選択することもできます。

  2. 並べ替えを有効にする」を選択します。

  3. done_icon を選択して、テーブルのプロパティを保存します。列ヘッダー内の並べ替えアイコンの上向き矢印と下向き矢印は、並べ替えが有効になっていることを表します。

    並べ替えを有効にする

  4. プレビュー ​モードに切り替えて、出力を表示します。テーブルは、テーブルの最初の列に基づいて自動的に並べ替えられます。

  5. 列ヘッダーをクリックして、列に基づいて値を並べ替えます。

    上向き矢印の付いた列ヘッダーは、その列に基づいてテーブルが並べ替えられていることを表します。さらに、列の値が昇順で表示されます。

    昇順での並べ替え

    同様に、下向き矢印の付いた列見出しは、列内の値が降順で表示されていることを表します。

    また、プレビュー ​モードでテーブルを変更し、列見出しをもう一度クリックして、列の値を並べ替えることもできます。

テーブルの列幅の設定 set-column-width

テーブルの列幅を設定するには、次の手順を実行します。

  1. コンテンツ」タブで、テーブル ​コンポーネントを選択し、「設定」( 設定 )アイコンを選択します。

1.「列幅」フィールドに値のコンマ区切りリストを入力して、テーブルの各列の比例する幅を指定します。例えば、3 つの列を含むテーブルの場合、「列幅」フィールドの値で 2、4、6 を指定すると、1 列目の幅は 2/12、2 列目は 4/12、3 列目は 6/12 に設定されます。最初の列の幅である 2/12 は、テーブル幅の 6 分の 1 を表します。同様に、4/12 は 2 番目の列の幅をテーブル幅の 3 分の 1 に設定し、6/12 は 3 番目の列の幅をテーブル幅の半分に設定します。

テーブルのスタイルの設定 configure

ページツールバーでスタイルモードを使用することで、テーブルのスタイルを定義できます。以下の手順を実行して、スタイルモードに切り替え、テーブルのスタイルを編集します。

  1. ページのツールバーで、プレビューを実行する前に、 canvas-drop-down スタイル ​を選択します。

  2. サイドバーでテーブルを選択し、「編集」ボタン edit-button をクリックします。
    サイドバーにスタイルプロパティが表示されます。

テーブルのスタイルプロパティ

NOTE
LESS 変数の値を変更することで、ヘッダー行と本文行のカラーテーマを変更できます。詳しくは、AEM Forms のテーマを参照してください。

動的に行を追加または削除する add-or-delete-a-row-dynamically

テーブルには、実行時の動的な行の追加および削除のサポートがあらかじめ含まれています。

  1. テーブルの行を選択し、 cmppr をクリックします。
  2. 「設定を繰り返し」タブで、テーブルの行の数を制限する最大値と最小値を指定します。
  3. 完了」をクリックします。

実行時やプレビュー時に、行を追加または削除するための + ボタンと「 削除 」ボタンが表示されます。

add-delete-rows-dynamically

NOTE
行の動的な追加/削除は、テーブルの「左側にヘッダー」のモバイルレイアウトではサポートされていません。

テーブルの式 expressions-in-a-table

アダプティブフォームのテーブルでは、表または行の表示/非表示、すべての数値を加算したセル内の合計表示、セルの有効化または無効化、ユーザー入力の検証などの動作を誘導する式を JavaScript で作成できます。これらの式は、アダプティブフォームのスクリプトモデル API を使用します。

テーブルと行では、式によって返される値を基にその表示をコントロールする表示式のみがサポートされていますが、セルでは、以下の式がサポートされています。

  • 初期化スクリプト: ​フィールドの初期化時にアクションを実行します。
  • 値コミットスクリプト: ​フィールドの値が変更された後でフォームのコンポーネントを変更します。
NOTE
同じフィールドに XFA change/exit スクリプトも適用されている場合は、値コミットスクリプトの前に XFA change/exit スクリプトが実行されます。
  • 式の計算:フィールドの値を自動計算します。
  • 検証式:フィールドを検証します。
  • アクセス式:フィールドを有効/無効にします。
  • 表示式:フィールドおよびパネルの表示をコントロールします。

テーブルまたは行の表示の式は、対応する編集コンポーネントダイアログの「パネルプロパティ」タブで定義できます。セルの式は、編集コンポーネントダイアログの「スクリプト」タブで定義できます。

アダプティブフォームのクラス、イベント、オブジェクトおよびパブリック API の完全なリストについては、アダプティブフォーム用 JavaScript ライブラリ API リファレンスを参照してください。

モバイルレイアウト mobile-layouts

アダプティブフォームのテーブルは、レイアウトの流動性と応答性に優れており、モバイルデバイス上で比類のないエクスペリエンスを提供します。AEM Forms には、テーブル用のモバイルレイアウトとして、「左側にヘッダー」と「折りたたみ可能な列」の 2 種類が用意されています。

テーブルのモバイルレイアウトは、テーブルの編集コンポーネントダイアログの「スタイル設定」タブから設定できます。

左側にヘッダー headers-on-left

左側にヘッダーのレイアウトでは、テーブルのヘッダーが左側に転置され、ヘッダーに寄せてセルがひとつだけ表示されている形になっています。このレイアウトでの各行は、個別のセクションとして表示されます。以下の画像では、デスクトップ上でのテーブルとモバイルデバイス上でのテーブルを比較しています。

デスクトップビュー

左側にヘッダーのレイアウトを使用したテーブルのデスクトップビュー

左側にヘッダー

左側にヘッダーのレイアウトを使用したテーブルのモバイルビュー

折りたたみ可能な列のレイアウト collapsible-columns-layout

折りたたみ可能な列のレイアウトでは、デバイスの大きさによって 1 つまたは 2 つの列が表示され、その他の列は折りたたまれます。折りたたみ/展開アイコンをクリックすると、テーブルの他の列を表示できます。

NOTE
折りたたみ可能な列のレイアウトはモバイルデバイス向けに最適化されていますが、テーブルの中のすべての列を表示するのに十分な幅がない場合に、デスクトップにも使用できます。

以下の画像では、列が折りたたまれた状態と展開された状態で、テーブルがどのように表示されるかを比較しています。

折りたたまれた列

モバイルデバイス上で、列が 2 つだけ表示されているテーブルの中の折りたたまれた列

collapsible_column

モバイルデバイス上で展開されたテーブルの列

テーブルでのデータの結合 merge-data-in-a-table

アダプティブフォームのテーブルを使用すると、実行時に、XML ファイルのデータを使用してテーブルにデータを入力することができます。データ XML ファイルは、AEM Forms サーバーが稼動しているマシンのローカルファイルシステム、または CRX リポジトリに置くことができます。

XML ファイルからのデータを使って銀行取引概略表に入力する例を次に示します。

data-merge-table

この例で使用する要素名プロパティを以下に示します。

  • 行:Row1
  • 取引日の下のボディセル:tableItem1
  • 説明の下のボディセル:tableItem2
  • 取引の種類の下のボディセル:type
  • 金額(USD)の下のボディセル:tableItem3

以下の形式のデータを含む XML ファイル:

<?xml version="1.0" encoding="UTF-8"?><afData>
  <afUnboundData>
    <data>
 <typeSelect>0</typeSelect>
 <Row1>
      <tableItem1>2015-01-08</tableItem1>
      <tableItem2>Purchase laptop</tableItem2>
      <type>0</type>
      <tableItem3>12000</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-05</tableItem1>
      <tableItem2>Transport expense</tableItem2>
      <type>0</type>
      <tableItem3>120</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2014-01-08</tableItem1>
      <tableItem2>Laser printer</tableItem2>
      <type>0</type>
      <tableItem3>500</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2014-12-08</tableItem1>
      <tableItem2>Credit card payment</tableItem2>
      <type>0</type>
      <tableItem3>300</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-06</tableItem1>
      <tableItem2>Interest earnings</tableItem2>
      <type>1</type>
      <tableItem3>12000</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-05</tableItem1>
      <tableItem2>Payment from a client</tableItem2>
      <type>1</type>
      <tableItem3>500</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-08</tableItem1>
      <tableItem2>Food expense</tableItem2>
      <type>0</type>
      <tableItem3>120</tableItem3>
 </Row1>
 </data>
  </afUnboundData>
  <afBoundData>
    <data/>
  </afBoundData>
  <afBoundData/>
</afData>

サンプル XML では、行のデータは、テーブルの行の要素名である <Row1> タグによって定義されています。<Row1> タグ内では、各セルのデータは、タグ内の <tableItem1><tableItem2><tableItem3><type> などの要素名で定義されています。

このデータを実行時にテーブルと統合するには、wcmmode を無効にした状態で、XML の絶対位置をテーブルを含むアダプティブフォームに示す必要があります。例えば、アダプティブフォームが https://localhost:4502/myForms/bankTransaction.html にあり、データ XML ファイルが C:/myTransactions/bankSummary.xml に保存されている場合、データが入ったテーブルは次の URL で確認することができます。

https://localhost:4502/myForms/bankTransaction.html?dataRef=file:/// C:/myTransactions/bankSummary.xml&wcmmode=disabled

data-merged-table

XDP コンポーネントおよび XSD 複合タイプの使用 use-xdp-components-and-xsd-complex-types

XFA フォームテンプレートに基づいてアダプティブフォームを作成した場合、XFA 要素は AEM コンテンツファインダーの「データモデル」タブで使用できます。テーブルを含むこれらの XFA 要素は、アダプティブフォームにドラッグ&ドロップできます。

XFA のテーブル要素はテーブルコンポーネントにマッピングされており、アダプティブフォームですぐに使用できます。XDP テーブルのすべてのプロパティおよび機能は、アダプティブフォームに移動しても保持されるので、ネイティブのアダプティブフォームのテーブルと同様にあらゆる操作を実行できます。例えば、XDP 表の行が繰り返し可能とマークされている場合、アダプティブフォームにドロップされたときにも繰り返されます。

さらに、XDP サブフォームをドラッグ&ドロップして、新しい行をテーブルに追加することもできます。ただし、階層化されたサブフォームをドロップすることはできませんので注意してください。

NOTE
ヘッダー行のない XDP テーブルは、アダプティブフォームのテーブルコンポーネントにマッピングされません。代わりに、流動的なレイアウトをを使用してアダプティブフォームのパネルコンポーネントにマッピングされます。また、ネストされたテーブルを XDP からアダプティブフォームに追加すると、内部テーブルを保持したまま、外部テーブルがパネルに変換されます。

さらに、XSD 複合タイプ要素のグループをドラッグ&ドロップし、テーブルの行を作成できます。要素をドロップした行のすぐ下に、新しい行が作成されます。XSD 複合タイプ要素を使用して作成されたセルは、XSD への連結参照を維持します。また、セルに要素をドロップすることで、ボディセルを XSD 複合タイプ要素で置き換えることもできます。

NOTE
XDP テーブルコンポーネント(サブフォーム)または XSD 複合タイプ内の要素の数は、行内のセルの数を超えることはできません。例えば、セルが 3 つしかない行に、4 つの要素をドロップすることはできません。これは、エラーとなります。
要素数が行内のセルの数より少ない場合、要素に基づいたセルが新しい行にまず追加され、その後、行内の残りのセルに入力するためにデフォルトのセルが追加されます。例えば、3 つの要素のグループを 4 つのセルを持つ行にドロップした場合、最初の 3 つのセルはドロップされた要素に基づくセルとなり、残りの 1 つのセルは表のデフォルトのセルになります。

主な考慮事項 key-considerations

  • XSD ベースのテーブルの作成中に行を上下に移動させると、フォームの送信時に、テーブルの行から、XML によって生成されたデータのデータ損失が見られます。

  • デフォルトのテーブルの各ボディセルには、事前に定義された要素名が関連付けられています。アダプティブフォームに別のテーブルを追加すると、新しいテーブルのデフォルトのボディセルには、最初のテーブルと同じ要素名が割り当てられます。このようなケースでは、フォームの送信時に生成されるデータに、どちらかひとつのテーブルのデフォルトのボディセルのデータのみが含まれることになります。そのため、テーブルをまたいで一意の名前になるようにデフォルトのボディセルの要素名を変更し、データ損失を避けるようにしてください。

    デフォルトのボディセルにのみ適用できます。テーブルに行または列を追加すると、デフォルト以外のボディセルに対して、一意の要素名が自動生成されます。

関連トピック see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab