フォーム コンポーネントについて

フォーム コンポーネントでは、ユーザー データを収集できます。UI コンポーネントは、機能に基づいて、次のようなカテゴリにグループ化されます。

• ベーシック
• Advanced (カスタム)
• レイアウト
• データ

基本コンポーネント

テキスト フィールド

テキスト フィールド コンポーネントを使用すると、短いテキストを入力できます。

テキスト領域

テキスト領域コンポーネントを使用すると、長いテキストを入力できます。テキスト領域コンポーネントでは、複数の行を入力できます。

[行] 設定では、テキスト領域コンポーネントにおいて表示可能な行の数を設定できます。

Number

数コンポーネントを使用すると、任意の数値を入力できます。

• 桁区切り文字 (,) を使用 - 3 桁ごとにコンマで区切ります。
• 小数点の入力必須 - 0 の場合も常に小数点を表示します。
• 小数点以下桁数 - 表示する小数点以下の桁数の最大値を設定します。

パスワード

パスワード コンポーネントを使用すると、パスワードを入力できます。秘密保持のため、テキストは実際の入力値ではなくアスタリスクとして表示されます。

チェックボックス

チェックボックス コンポーネントを使用すると、Boolean 型の値 (true または false) を入力できます。

セレクト ボックス

セレクト ボックス コンポーネントを使用すると、ユーザーがリストから複数の値を選択できます。

値 - セレクト ボックス コンポーネントにオプションを追加できます。[ラベル] 列は、ユーザーに表示される値です。[値] 列は、データに保存される名前です。

ラベル/ヘッダー

ファイル/フォルダー パス

ラベル/ヘッダー コンポーネントを使用すると、他のフォーム コンポーネントにラベルを追加できます。フォーム内のセクションを分ける目的でも使用できます。

• ラベル サイズ - ドロップダウン リストからラベル/ヘッダー コンポーネントのサイズまたは種類を選択します。

ファイル/フォルダー パス コンポーネントを使用すると、ユーザーのドキュメントのファイルまたはフォルダーのパスを取得できます。

フォーム レンダラーでファイル パスを指定するには、以下の手順を実行します。

1. ファイル/フォルダー パス コンポーネントの [選択] ボタンをクリックします。ファイル コントロール ウィンドウが開きます。
2. ファイルを選択します。
3. ファイル コントロール ウィンドウで [開く] をクリックします。

フォーム レンダラーでフォルダー パスを指定するには、以下の手順を実行します。

1. ファイル/フォルダー パス コンポーネントの [選択] ボタンをクリックします。[フォルダーを参照] ウィンドウが開きます。
2. フォルダーを選択します。

3. [フォルダーを参照] ウィンドウで [OK] をクリックします。

   
   

   

   
   

• 選択の種類 - ユーザーが選択できるパスの種類を [ファイル] または [フォルダー] から選択します。

• すべてのファイルを表示 - オンにすると、ユーザーはファイル コントロールから任意のファイルの種類を選択できます。オフのままにすると [拡張子を追加] セクションが表示され、ユーザーがファイル コントロールで選択できるファイルの種類を手動で選択する必要があります。

  
  

  

  
  

注: [表示] タブの [拡張子を追加] セクションで、ユーザーが選択できるファイルの種類を制限または拡張できます。

ドロップダウン リスト

ドロップダウン リスト コンポーネントを使用すると、リストをドロップダウン形式で表示できます。

• ウィジェットの種類 - 使用するウィジェットの種類を選択します。

• データ ソース値 - ドロップダウン リストに表示する値を入力します。[ラベル] 列は、ユーザーに表示される値です。[値] 列は、データに保存される名前です。

  
  

  

  
  
• 項目テンプレート - ドロップダウン リストでの値の表示方法を制御できる HTML テンプレートです。ドロップダウン リストの値には、item 変数を介してアクセスできます。たとえば、ドロップダウン リストの特定の値にアクセスするには、item.label を使用します。
• オプションの更新条件 - 別のフィールドの変更時にデータを更新します。
• Refresh Options On Blur - 別のフィールドがフォーカスを失った場合にデータを更新します。
• 更新時に値をクリア オプション - [オプションの更新条件] フィールドが変更された場合にコンポーネントの値をクリアします。
• 読み取り専用の値 - 読み取り専用モードの時にのみ値を表示します。
• Choice.js オプション - 選択コンポーネントのオプションとして使用する生の JSON オブジェクトを入力します。
• 完全一致検索を使用 - 検索アルゴリズムのしきい値を無効化します。
• カスタム既定値 - JavaScript または JSON ロジックを使用して、カスタムの既定値を作成します。

ラジオ

ラジオ コンポーネントを使用すると、ユーザーがリストから値を 1 つだけ選択できます。

• 値 - リストに表示する値を入力します。[ラベル] 列は、ユーザーに表示される値です。[値] 列は、データベースに保存される名前です。

ボタン

ボタン コンポーネントを使用すると、ユーザーがフォーム内でさまざまな操作を実行できます。

• アクション - ボタンで実行するアクションを選択します。

  • 送信 - フォームを送信し、[実行] ブロックを実行します。
  • クリック - クリック操作を実行し、[実行] ブロックを実行します。
  • フォームをリセット - フォームのフィールドをリセットします。
  • イベント - ユーザーがボタンをクリックしたときに、特定のイベントの実行を開始します。[イベント] を選択した場合、[Button Event] フィールドにイベントを入力する必要があります。
• [実行] ブロックのデータをリセット - 種類が [クリック] のボタンでオンにした場合、[実行] ブロックから受け取ったデータを設定します。これは、他のページにあるデータが現在のページに存在しない場合にパフォーマンスを向上させるのに役立ちます。
• テーマ - ドロップダウン リストからボタンの配色テーマを選択します。
• サイズ - ドロップダウン リストからボタンのサイズを選択します。
• ブロック ボタン - 境界コンテナーの全幅に伸縮します。
• 左アイコン/右アイコン - 特定のアイコンを表示するための完全なアイコン クラス文字列を追加します。たとえば、fa fa-plus を追加できます。

詳細設定コンポーネント

HTML 要素

HTML 要素を使用すると、1 つの HTML 要素をフォームに表示し、ユース ケースに基づいて設定できます。

注: [フォームを作成] アクティビティ内で [サニタイズを無効化] プロパティを有効化すると、HTML 要素内の安全でないコンテンツをすべて表示できます。

• HTML タグ - HTML 要素のタグです。
• CSS クラス - この HTML 要素に追加できる CSS クラスです。複数のクラスを単一スペースで区切って入力できます。
• 属性 - HTML 要素の属性です。使用できるのは src、href、title などの安全な属性のみです。
• コンテンツ - HTML 要素のコンテンツです。
• 変更時に更新 - フォームの値が変更された場合に、常に HTML 要素を再レンダリングします。

フォーム内に画像ファイルや PDF ファイルを表示するには、HTML 要素コンポーネントを使用する必要があります。以下のチュートリアルをご覧ください。

• 画像を表示する
• PDF ファイルを表示する

コンテンツ

コンテンツ コンポーネントを使用すると、情報をフォームに表示専用で追加できます。コンポーネントの値はサーバーに返されません。

• 変更時に更新 - フォームの値が変更されるたびにコンテンツ コンポーネントをレンダリングします。

メール

メール コンポーネントを使用すると、メール アドレスを入力するためのフィールドを追加できます。

電話番号

電話番号コンポーネントを使用すると、電話番号を入力するためのフィールドを追加できます。

• 定型入力 - あらかじめ定義された電話番号形式を提供します。電話番号フィールドの既定の形式は [phone] です。
• 9 - 数値
• a - アルファベット
• \* - 英数字
• InputMask のプレースホルダー文字 - フィールド内で文字をプレースホルダーとして使用できます。

注: マスク内でプレースホルダーを使用した場合は、空白に置換されます。

日付/時刻

日付/時刻コンポーネントを使用すると、日付、時刻、またはその両方を入力できます。

• 形式 - 日付/時刻の値を表示する形式です。
• 日付の入力を有効化 - ユーザーがこのフィールドに日付を入力することを許可します。
• 日付の最小値を設定する moment.js を入力 - ユーザーはカレンダーから選択する代わりに、minDate moment 関数を入力できます。
• カレンダーを使用して最小日付を設定 - ユーザーはカレンダーを使用して minDate を設定できます。
• 日付の最大値を設定する moment.js を入力 - ユーザーはカレンダーから選択する代わりに、maxDate moment 関数を入力できます。
• カレンダーを使用して最大日付を設定 - ユーザーはカレンダーを使用して maxDate を設定できます。
• 特定の日付または特定の範囲内の日付を無効化 - 禁止する日付を追加します。例: 2027-08-11
• ユーザー定義の無効な日付 - カスタマイズした関数を使用して特定の日付を禁止できます。
• 週末を無効化 - 週末を禁止できます。
• 平日を無効化 - 平日を禁止できます。
• 時刻の入力を有効化 - ユーザーがこのフィールドに時刻を入力することを許可します。
• 時間ステップ サイズ - 時刻の選択時に増減する時間数です。
• 分ステップ サイズ - 時刻の選択時に増減する分数です。
• 12 時間制 (AM/PM) - AM または PM を使用して時刻を 12 時間制で表示します。
• 既定の日付 - Moment.js 関数を使用して、既定値を特定の日付に設定します。たとえば、moment().substract(10, 'days') 関数を使用できます。
  
  

  

  
  

Day (日)

日付コンポーネントを使用すると、数値型フィールドまたは選択型フィールドのいずれかを使用して、日、月、年の入力を求めることができます。

• 種類/入力の種類 - 日にち、月、年の入力方法として、数値を入力するか、それともドロップダウン リストからオプションを選択するかを選択します。

最小の年/最大の年 - 入力できる最小/最大の年を選択します。

• 日にちの入力必須 - フォームを表示するには、[日にち] フィールドに入力する必要があります。
• 月の入力必須 - フォームを表示するには、[月] フィールドに入力する必要があります。
• 年の入力必須 - フォームを表示するには、[年] フィールドに入力する必要があります。
• 最大日付 / 最小日付 - 入力できる最小/最大の日付を選択します。Moment.js 関数も使用できます。たとえば、moment().add(10, 'days') を使用できます。
  
  

  

  
  

Time

時刻コンポーネントを使用すると、さまざまな形式で時刻を入力できます。

• 入力の種類 - 時間の入力に使用するウィジェットの種類を選択します。HTML5 Time Input では、ユーザーは表示されるパネルから時刻を選択できます。Text Input with Mask では、ユーザーは手動で時刻を入力できます。

通貨

通貨コンポーネントを使用すると、特定の通貨を使用して金額を表示できます。このコンポーネントには、通貨アイコンを表示し、ユーザーが入力した数に基づいて自動的にコンマを追加する定型入力機能があります。小数点以下 2 桁の値を入力できます。

• 通貨 - ドロップダウン リストから特定の通貨を選択します。

アンケート

アンケート コンポーネントを使用すると、ユーザーがリストから値を 1 つだけ選択して複数の質問に回答できます。

• 質問 - ユーザーが回答する必要がある質問を追加します。
• 値 - ユーザーが各質問で選択できるオプションを追加します。

レイアウト コンポーネント

列

列コンポーネントを使用すると、他のコンポーネントを並べて表示し、列としてグループ化できます。

• 列のプロパティ - コンポーネントに列を追加し、[幅]、[オフセット]、[プッシュ]、[プル] プロパティを調整して設定します。列のレイアウトを設定したら、他のコンポーネントを列コンポーネント内にドラッグ アンド ドロップできます。
• 列を自動調整 - 入れ子になった非表示のコンポーネントがある場合、列を自動的に調整します。

パネル

パネル コンポーネントを使用すると、コンポーネントをグループ化して、指定したパネル内に追加できます。

• テーマ - ドロップダウン リストからパネルのテーマを選択します。Bootstrap クラスが wrapper div に追加されます。
• 折りたたみ可能 - パネルを折りたたむことができます。
• Initially Collapsed - このプロパティは、[折りたたみ可能] をオンにした場合にのみ使用できます。フォームの読み込み時にパネルを折りたたみます。

表

表コンポーネントを使用すると、表を作成して、表の列と行の中に他のフォーム コンポーネントを格納できます。

• 行数/列数 - 表に表示する行または列の数を入力します。
• 行のコンポーネントを複製 - 行内のコンポーネントを複製し、残りの行にも追加します。複数行の表を作成し、各行に同じ内容を含める場合に使用できます。
• セルの配置 - 表内のセルの水平方向の配置を選択します。
• ストライプ - 行にストライプの網かけを追加します。
• 境界付き - 表に罫線を追加して表示します。
• ホバー - 行の上にマウスをホバーしたときに行を強調表示します。
• 縮小 - 表のサイズを縮小します。

タブ

タブ コンポーネントを使用すると、コンポーネントをタブにグループ化できます。フォームのレンダリング時には、一度に 1 つのタブを表示できます。

[タブ] 設定では、タブを追加、設定、並べ替え、削除できます。

データ

非表示

非表示コンポーネントを使用すると、フォーム内でカスタム設定できるリソース プロパティを作成できます。このコンポーネントは、レンダリングされたフォームには表示されません。

コンテナ―

コンテナー コンポーネントを使用すると、コンテナー キーを使用して一連のフィールドをオブジェクトにラップできます。キーが financialPerformance のコンテナーは、次のように送信されます。

{
    data: {
      financialPerformance {
        grossProfitMargin: "0.83",
      netProfitMargin: "0.43"
      }
   }
}

データ グリッド

データ グリッド コンポーネントを使用すると、データ テーブルと同様に複数行のデータをレンダリングできます。ユース ケースに合わせて、複数のコンポーネントをデータ グリッドにドラッグ アンド ドロップできます。

[フォーム レンダラー] ウィンドウで、データ グリッド コンポーネント内の行を追加または削除できます。

• 行の追加/削除を無効化する - フォームの表示時に、行を追加または削除できるボタンを非表示にします。
• 並べ替えを許可 - 行をドラッグ アンド ドロップで並べ替えます。
• 段の幅をすべて同じにする - 列の幅をすべて同じにします。
• 行グループを有効化する - 行をグループに分けることができます。グループを追加し、ラベル付けして、各グループの行を選択します。
• 初期化時に非表示 - 初期化すると、データ グリッドの行がすべて非表示になります。

編集グリッド

編集グリッド コンポーネントを使用すると、データ テーブルと同様に複数行のデータをレンダリングできます。複数のフォーム コンポーネントを編集グリッドにドラッグ アンド ドロップして、大量のデータをキャプチャできます。

フォームのレンダリング時に、[さらに追加] をクリックして編集グリッドの複製を追加できます。

• 空の場合最初の行を開く - 編集グリッドが空である時に最初の行を開きます。
• 行の追加/削除を無効化する - フォームの表示時に、行を追加または削除できるボタンを非表示にします。
• 別のテキストを追加 - [さらに追加] ボタンの名前を変更します。
• 行テキストを保存 - 行の保存ボタンのテキストを変更します。
• 行テキストを削除 - 行の削除ボタンのテキストを変更します。

[テンプレート] タブは、編集グリッド コンポーネント専用です。ヘッダー、行、フッター テンプレートにより、JavaScript を使用してグリッドをカスタマイズできます。グリッド内の行に表示するコンポーネントの種類や、ヘッダー/フッターの外観を変更できます。

ヘッダー テンプレート

編集グリッド コンポーネントのヘッダーのレンダリングに使用される Lodash テンプレートです。

重要: ヘッダー テンプレートはフォーム アクションでは使用できません。

以下の 2 つの変数を使用できます。

• value - 行データの配列です。
• components - グリッド内のコンポーネントの配列です。

行テンプレート

編集グリッド コンポーネントの各行のレンダリングに使用される Lodash テンプレートです。

重要: 行テンプレートはフォーム アクションでは使用できません。

以下の 3 つの変数を使用できます。

• row - 1 つの行のデータのオブジェクトです。
• components - グリッド内のコンポーネントの配列です。
• state - 現在の行のステートです (下書き/保存済み)。

種類がクリックのイベントを追加するには、クラス editRow と removeRow を要素に追加します。

フッター テンプレート

編集グリッド コンポーネントのフッターのレンダリングに使用される Lodash テンプレートです。

以下の 2 つの変数を使用できます。

• value - 行データの配列です。
• components - グリッド内のコンポーネントの配列です。

グリッド

グリッド コンポーネントを使用すると、データ テーブルと同様に複数行のデータをレンダリングできます。グリッドは、大量のデータを表示するために使用できる読み取り専用のコンポーネントです。複数のフォーム コンポーネントをグリッド コンポーネントにドラッグ アンド ドロップできます。

• Sortable - 列内のデータを昇順または降順に並べ替えます。データの並べ替えは、実行時にフォーム レンダラーで行います。
• Filterable - 各列内のデータをフィルター処理します。データのフィルター処理は、実行時にフォーム レンダラーで行います。
• Column(s) Resizable - 実行時に フォーム レンダラーで列の幅を変更します。[Column(s) Resizable] 機能を使用すると、列内のデータを見やすく表示できます。

• ページネーション - グリッド (プレビュー) コンポーネントのデータを、番号付きのページに分割表示します。[ページネーション] 機能では、1 ページあたりに表示する項目数を設定することもできます。

  
  

  

  
  

グリッド コンポーネントの使用方法の詳細については、「グリッド コンポーネントを使用する」をご覧ください。

グリッド コントロール コンポーネントの比較

以下の表は、フォーム デザイナーで利用可能なグリッド コントロールの機能を比較したものです。この表では、グリッド、データ グリッド、および編集グリッドの各グリッド コントロール コンポーネントを使用する場合の推奨シナリオも示します。

凡例: = 利用不可。

機能	グリッド	データ グリッド	編集グリッド
推奨シナリオ	大量のデータを読み取り専用用途で表示する (読み取り専用機能)。	ユーザーが編集する必要のある一連の小さなデータを表示する (インライン編集機能)。	ユーザーが編集する必要のある一連の小さなデータを表示する (サブフォームのインライン編集機能)。
推奨行数	無制限 (100 行のページネーションのサポート)。	100 行以下。推奨数を超えるとパフォーマンス低下のリスク。	100 行以下。推奨数を超えるとパフォーマンス低下のリスク。
推奨列数	無制限。	100 行に対して最大 7 列。パフォーマンス低下のリスク	100 行に対して最大 7 列。パフォーマンス低下のリスク。
編集可能
ページネーション
並べ替え可能
フィルター設定可能
実行時に列のサイズを変更可能
行のグループ化
論理と条件
テンプレートを使用した広範なカスタマイズ
グローバル検索