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

基本コンポーネント

テキスト フィールド

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

テキスト領域

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

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

Number

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

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

パスワード

パスワードコンポーネントを使用してパスワードを入力できます。テキストは、機密保持のために入力された実際の値ではなく、アスタリスクとして表示されます。パスワード コンポーネントのオプションは、テキスト フィールド コンポーネントと同じです。

チェックボックス

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

セレクト ボックス

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

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

  

ドロップダウン リスト

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

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

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

  

• 項目テンプレート - ドロップダウン リストでの値の表示方法を制御できる HTML テンプレートです。ドロップダウン リストの値には、item 変数を介してアクセスできます。たとえば、ドロップダウン リストの特定の値にアクセスするには、item.label を使用します。

• オプションの更新条件 - 別のフィールドの変更時にデータを更新します。

• Refresh Options On Blur - 別のフィールドがフォーカスを失った場合にデータを更新します。

• 更新時に値をクリア オプション - [オプションの更新条件] フィールドが変更された場合にコンポーネントの値をクリアします。

• 読み取り専用の値 - 読み取り専用モードの時にのみ値を表示します。

• Choice.js オプション - 選択コンポーネントのオプションとして使用する生の JSON オブジェクトを入力します。

• 完全一致検索を使用 - 検索アルゴリズムのしきい値を無効化します。

• カスタム既定値 - JavaScript または JSON 論理を使用してカスタム既定値を作成します。

ラジオ

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

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

ボタン

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

• アクション - ボタンで実行するアクションを選択します。
  • 送信 - フォームを提出します。
  • クリック - クリック操作を実行します。
  • フォームをリセット - フォームのフィールドをリセットします。
  • イベント - ユーザーがボタンをクリックしたときに、特定のイベントの実行を開始します。[イベント] を選択した場合、[Button Event] フィールドにイベントを入力する必要があります。イベントの名前を使用して、別のコンポーネントをトリガーするカスタム ロジックを作成できるようになりました。

たとえば、2 つのコンポーネントの値を計算して 3 つ目のコンポーネントに出力するボタンが必要な場合、「calculate」という名前のイベントを設定したボタンを作成してから、結果を出力するコンポーネント用の「calculate」という論理を作成できます。

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

詳細設定コンポーネント

HTML 要素

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

注:

安全でないすべての HTML タグと属性は、クロスサイトスクリプティングを防ぐために、フォームのレンダリング時に削除されます。削除されるタグと属性は、 <script>、 <embed>、 <style>、 onmouseover、および onloadです。

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

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

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

コンテンツ

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

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

メール

メール コンポーネントを使用して、メール アドレスを入力するフィールドを追加できます。メール コンポーネントはテキスト フィールド コンポーネントと似ています。

電話番号

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

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

  プレースホルダ文字は、マスク内で使用するとスペースに置き換えられます。

日付/時刻

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

• 形式 - Datetime 値を表示する形式です。

• 日付の入力を有効化 - ユーザーがこのフィールドに日付を入力することを許可します。

• 日付の最小値を設定する moment.js を入力 - ユーザーはカレンダーから選択する代わりに、minDate moment 関数を入力できます。

• カレンダーを使用して最小日付を設定 - ユーザーはカレンダーを使用して minDate を設定できます。

• 日付の最大値を設定する moment.js を入力 - ユーザーはカレンダーから選択する代わりに、maxDate moment 関数を入力できます。

• カレンダーを使用して maxDate を設定 - カレンダーを使用して 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 桁の値を入力できます。

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

PDF

PDF コンポーネントを使用すると、フォーム アクション内に PDF ファイルをレンダリングできます。

ファイル

ファイル コンポーネントを使用すると、ユーザーがフォームにファイルをアップロードしたり、フォームからファイルをダウンロードしたりできます。

• Modal Edit - モーダルを開き、このコンポーネントの値を編集します。
• ディレクトリ - このコンポーネントにアップロードされたすべてのファイルを、指定したディレクトリに配置します。文字列は /で終わります。
• アップロードのみ - ユーザーにファイルのアップロードのみを許可します。オンにすると、ダウンロード オプションが使用できなくなります。
• ファイルの種類 - ユーザーがアップロードするファイルの種類を分類するために、ファイルの種類を指定できます。ユーザーが複数種類のファイルをアップロードする際に、ユーザーにアップロードする各ファイルの種類を指定して欲しい場合に推奨します。
• ファイル パターン - アップロード可能なファイル拡張子を指定できます。指定されていない他のファイル拡張子はアップロードされません。
• ファイルの最小サイズ - アップロードするファイルの最小サイズを設定します。
• ファイルの最大サイズ - アップロードするファイルの最大サイズを設定します。

アンケート

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

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

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

列

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

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

パネル

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

• テーマ - ドロップダウン リストからパネルのテーマを選択します。Bootstrap クラスが wrapper div に追加されます。

• 折りたたみ可能 - パネルを折りたたむことができます。

• Initially Collapsed - このプロパティは、[折りたたみ可能] をオンにした場合にのみ使用できます。フォームの読み込み時にパネルを折りたたみます。

  表

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

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

タブ

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

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

データ

コンテナ―

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

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

データ グリッド

データ グリッド コンポーネントを使用すると、複数のコンポーネントを 1 つのグリッドにインラインで追加できます。ユース ケースに合わせて、 データ グリッド に複数のコンポーネントをドラッグ アンド ドロップできます。データ グリッド コンポーネントを使用すると、重複する複数のフィールドをインラインで 1 つのグリッドに追加できます。

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

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

編集グリッド

編集グリッド コンポーネントを使用すると、データを表形式で表示できます。複数のフォーム コンポーネントを編集 グリッドにドラッグ アンド ドロップして、大量のデータをキャプチャできます。

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

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

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

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

凡例: ✅ = 利用不可。

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