レイアウト:フィールドグリッドのセットアップ

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間:3分
  • フィールドグリッドは複数のフィールドを単一のレイアウトに収集しますが、セットとは異なり、他の行を参照できます。

    フィールドグリッドは、多数のフィールドをマトリクスレイアウトで表示します。これらは、同じ情報セットを所定の回数だけ要求する必要がある場合に役立ちます。フィールドグリッドを使用すると、ユーザーは繰り返し値のテーブルを作成できます。フィールドグリッドでは、行は他の行を参照できますが、セットでは、ユーザーはインデックス間のルールを書き込むことができません。

    フィールドグリッドは、列または行方向 (水平または垂直) に展開できます。

    フィールドグリッドに表示するすべてのフィールドを定義します。マトリックスローダーはこれに適したツールです。フィールドを、それらが使用される詳細計画に関連付けます。

    フィールドグリッドレイアウトのセットアップ

    フィールドグリッドをレイアウトに追加するために、フィールドグリッドは行と列を作成するため、列セットは必要ありません。代わりに、次の行タイプが必要です。

    • fieldgrid:このタイプは、フィールドグリッドがレイアウトで使用されることをレイアウトに指示します
    • fieldgriddata:このタイプは、フィールドグリッドの各列に使用されます
    • field:このタイプは、フィールドグリッドの各セルに必要です (各行ではありません)

    最初の 3 つの画像は CSV ファイルを示しています。最後の画像は、対応するユーザーレイアウトを示しています。上の数字は、下の画像の数字と一致します。(3番は何度も表示されるため、わかりやすくするために文字が追加されています。フィールドグリッドの個々のセルにラベルと入力フィールドの両方を含めることはできません。3C では、ラベルと入力フィールドの両方がレイアウト CSV ファイルに追加されることに注意してください。ただし、レイアウトには入力フィールドのみが入ります。

    フィールドグリッド

    フィールドグリッド

    フィールドグリッド

    フィールドグリッド

    fieldGrid サンプルレイアウト JSON

    フィールドグリッド UI コントロール

    フィールドグリッド UI のさまざまな側面は、レイアウト CSV ファイルの値フィールドを更新することで制御できます。

    • グリッド線のヴィジビリティ
    • 動的列ヘッダー
    • フィールドグリッドフィールド幅

    フィールドグリッド要素

    フィールドグリッド要素の値列に次の値を追加できます。

    • indexPre:インデックス列のインデックス番号の前に表示される文字列値。オプション
    • indexPost:インデックス列のインデックス番号の後に表示される文字列値。オプション
    • indexVisible:true |false:フィールドグリッドレイアウトにインデックス番号と列を表示するかどうか。オプション、デフォルト:true
    • maximumHeight:CSS px で設定する最大高さ。つまり「180px」。オプション
    • gridlines:すべて |水平 |垂直 |NONE の場合、セル間のグリッド線の表示方法を制御します。オプション。デフォルトは all です。

    Fieldgriddata 要素

    fieldgriddata 要素の value 列に次の値を追加できます。

    • fieldIndex:ヘッダー値に使用するフィールドの名前。オプション。含める場合、fieldgriddata 要素のラベルは空白である必要があります。
    • width:フィールドの幅。オプション。含める場合、有効な値の例は、 auto300 (ここでは px を想定)、 300px20vwcalc(100% - 100px).

    フィールドグリッドのデフォルトは幅が 100% ですが、含まれている fieldgriddata コンポーネントに幅の値が 1 つでも指定されている場合は、指定された幅を適用できるようにフィールドグリッドの幅が auto に変更されます。

    フィールドグリッドの動的ヘッダーとグリッド線の例 CSV ファイル

    フィールドグリッド幅の CSV ファイルの例