アクティビティ

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

基本コンポーネント

テキストフィールド

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

テキスト領域

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

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

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 要素コンポーネントを使用する必要があります。以下のチュートリアルをご覧ください。

コンテンツ

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

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

メール

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

電話番号

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

定型入力 - あらかじめ定義された電話番号形式を提供します。電話番号フィールドの既定の形式は (999) 999-9999 です。
- 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 桁の値を入力できます。

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

PDF

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

ファイル

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

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

アンケート

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

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

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

列

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

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

パネル

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

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

表

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

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

タブ

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

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

データ

コンテナ―

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

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

データグリッド

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

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

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

編集グリッド

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

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

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

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

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

凡例: 利用可能 = 利用不可。

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