フォーム コントロール

フォーム コンポーネントを選択すると、複数の設定タブがあるウィザードが開き、さまざまな機能をさらにカスタマイズできます。ウィザードのプレビュー ペインで進行状況を確認します。

目的どおりにコンポーネントをデザインした後、[保存] を選択します。

ウィザードに共通のタブで使用できる設定とコントロールを、以下の表に示します。

ウィザードのタブ	説明	特記事項
表示	フォーム コンポーネントの表示方法を設定します。	必須の [ラベル] フィールドで設定した名前が、[フィールド キー] タブのプロパティ名になります。
データ	テキスト フィールドでエンド ユーザーに表示される既定値を設定します。	ここでは、複数の項目 (セレクト ボックス、タブなど) を含むコンポーネントを定義できます。
検証	他の UI コンポーネントを有効化するための検証要件を設定します。	NA
フィールド キー	ワークフローで使用するコンポーネントのプロパティ名を設定します。	既定では、この値は [表示] タブの [ラベル] フィールドから渡されます。
条件	コンポーネントの条件を設定します。	Javascript や JSON などの高度な条件を設定できます。
論理	条件をトリガーするロジックを設定します。	NA

一部のフォーム コンポーネントには、次のような特定のタブがあります。

コンポーネント	ウィザードのタブ	説明
日付/時刻	日付	選択可能な最小日付と最大日付を設定します。
	Time	時刻の時と分のインクリメントを設定します。
Day (日)	Day (日)	ビジネス ユーザーが日にちを選択する方法を設定します (インクリメンタルまたはドロップダウン リストから)。
	Month (月)	ビジネス ユーザーが月を選択する方法を設定します (インクリメンタルまたはドロップダウン リストから)。
	Year (年)	ビジネス ユーザーが年を選択する方法 (インクリメンタルまたはドロップダウン リストから)、および選択可能な最小年と最大年を設定します。
編集グリッド	テンプレート	編集グリッド データのヘッダーと行をカスタマイズします。
データ マップ	レイアウト	レイアウトのマージンの変更をデータ マップに適用します。

表示

ラベル - コンポーネントのタイトルです。

ラベル位置 - フィールドのラベルの位置です。

説明 - 入力フィールドの下に表示されるテキストです。

ツールチップ - アイコンの横にツールチップ アイコンを追加します。ツールチップのテキストを入力します。

カスタム CSS クラス - コンポーネントにカスタム CSS クラスを追加します。複数のクラスをスペースで区切って追加できます。

非表示 - フォームを表示するときにコンポーネントを非表示にします。

注: コンポーネントは JSON ファイルには引き続き表示されます。

ラベルを非表示 - コンポーネントのラベルを非表示にします。

無効 - フォームのフィールドを無効化します。

プレースホルダー - フィールドが空の場合に表示されるテキストです。

プレフィックス - フィールドの前に表示されるテキストです。

サフィックス - フィールドの後に表示されるテキストです。

一意 - オンにすると、フィールドはフォームで一意と見なされます。

保護 - オンにすると、フィールドが入力専用になります。

永続性 - オンにすると、フィールドがデータベースに保存されます。フィールドをデータベースに保存しない場合は、[永続性] をオフにします。

表ビュー - オンの場合、送信内容の表ビュー内にこの値を表示します。編集グリッド コンポーネント内に追加した子コンポーネントに使用すると、子コンポーネントを行内に表示できます。オフのままにすると、データは編集グリッドの折りたたまれた行に表示されません。データが表示されなくても、行の編集中にコンポーネントを設定できます。

定型入力 - 定型入力を使用すると、あらかじめ定義された形式を提供できます。たとえば、電話番号フィールドの場合、既定の定型入力の形式は [phone] です。定型入力の要素は次のとおりです。

• 9 - 数値
• a - アルファベット
• * - 英数字

データ

既定値 - ユーザーが操作する前のフィールドの値です。プレースホルダー テキストは既定値で上書きされます。

複数値 - オンにすると、複数の値をフィールドに追加できます。値は配列として API に出力され、フィールドに [さらに追加] ボタンが表示されます。

コンテンツ - コンポーネントのコンテンツを入力するセクションです。

データ形式 - このフィールドの保存に使用する moment.js の形式です。例: HH:mm:ss

変更時に再描画 - フォーム内の別のコンポーネントが変更された場合にこのコンポーネントを再描画します。コンポーネントを再描画するイベントをドロップダウン リストから選択します。既定で選択するイベントは、[変更時] と [送信] です。

検証

必須 - オンにすると、このフィールドでは値が必須になります。

検証実行 - このコンポーネントがフロントエンド検証をトリガーするタイミングを指定します。ドロップダウン リストからイベント ([変更] または [ぼかす]) を選択します。

最小の長さ - このフィールドの長さの最低要件です。

最大の長さ - このフィールドの長さの最長要件です。

最小の単語の長さ - このコンポーネントに追加可能な最小の語数です。

最大の単語の長さ - このフィールドに追加可能な最大の語数です。

正規表現パターン - フォームの送信前にコンポーネントが合格する必要がある正規表現パターンです。

エラー ラベル - 検証エラー メッセージが表示されるときに表示するラベルです。

カスタム エラー メッセージ - エラーが発生した場合に表示される、カスタマイズされたエラー メッセージです。

利用可能な値のみ許可 - オンにすると、選択した値が利用可能なオプションであることを確認するための検証チェックが実行されます。

フィールド キー

プロパティ名 - 引数コレクションにおける、コンポーネントに対応する引数名です。

プロパティ名を使用して、フォーム内で引数を渡したり ([フォームの値を設定] アクティビティを使用)、フォーム外で値を取得したりできます ([フォームの値を取得] アクティビティを使用)。

条件

フォーム ビルダーの [条件] タブでは、フォーム内のコンポーネントに条件を設定して、コンポーネントを表示または非表示にすることができます。

[条件] タブには、次の 2 つのセクションがあります。

• Simple
• 高度な条件

シンプルな条件

[条件] タブの [シンプル] セクションでは、コンポーネントを、別のコンポーネントの値に基づいて表示または非表示にすることができます。

[シンプル] セクションは、次の 3 つのフィールドで構成されます。

1. このコンポーネントを表示 - このドロップダウン リストから以下を選択します。

   • コンポーネントを表示する条件を設定する場合は [True] を選択します。
   • コンポーネントを非表示にする条件を設定する場合は [False] を選択します。
2. 条件として使用するフォーム コンポーネント - このドロップダウン リストから、条件として機能させるフォーム内のコンポーネントを選択します。

3. 条件として使用する値 - コンポーネントを表示または非表示にする条件となる値を入力します。

   
   

   

   
   

高度な条件

[高度な条件] セクションでは、JavaScript コードまたは JSON 論理を使用して複数の条件を組み合わせることができます。

注: 高度な論理は、[シンプル] の条件ロジックの結果を上書きします。

[JavaScript コード] セクションに、カスタムの JavaScript コードを入力します。

show 変数には、true または false のいずれかの値を指定する必要があります。data 変数は、フォーム内の他のコンポーネントに API キーを使用してアクセスするために使用されます。

条件付きコンポーネントの使用方法については、条件付きコンポーネントのチュートリアルをご覧ください。

論理

フォーム ビルダーの [論理] タブでは、条件や高度な論理スクリプトを作成し、それによって、選択したフォーム コンポーネントのステートや動作を変更できます。

高度な論理を使用すると、フォーム コンポーネントのコントロール、外観、操作感を動的に変更できます。

フォームの論理は、トリガーとアクションの 2 つの部分で構成されます。

トリガー

論理のトリガーは、アクションが発生する条件です。たとえば、チェックボックス オプションが選択されている場合にのみ、特定のフォーム フィールドを表示できます。この場合、チェックボックス オプションがトリガーになり、フォーム フィールドの表示がアクションになります。

論理トリガーには次の 4 種類があります。

トリガーの種類	説明	例
Simple	論理で使用するトリガーの種類を選択します。
JavaScript	フォーム コンポーネントまたはフォーム データの JavaScript 論理を指定します。 ループや動的な動作など、複雑なロジックを作成するには、JavaScript 構文を使用します。
JSON 論理	フォーム コンポーネントまたはフォーム データの JSON 論理を指定します。 JavaScript を使用できない場合に推奨されます。 ループや動的な動作をサポートすることはできません。
イベント	コンポーネント イベントを定義します。対応するコンポーネントによってこのイベントが生成されると、目的のアクションがトリガーされます。

操作

論理アクションは、設定した論理条件 (トリガー) に基づいて発生させるフォーム コンポーネントの動作です。たとえば、特定の年齢のユーザーに対してボタンをアクティブ化できます。この場合、年齢範囲がトリガーになり、ボタンのアクティブ化がアクションになります。

論理アクションには、次の 4 種類があります。

アクションの種類	説明	例
プロパティ	トリガーは、利用可能なコンポーネントのプロパティ (ツールチップ、説明、CSS クラスなど) のいずれかを変更します。 利用可能なプロパティは、トリガー コンポーネントの種類によって異なります。
値 (Value)	トリガーによって、対応するコンポーネントの値を変更します。 アクションは JavaScript 構文を使用して定義する必要があります。
コンポーネント スキーマをマージ	トリガーによって、コンポーネント JSON で見つかったコンポーネント スキーマ パラメーターを変更します。 変更できるスキーマ パラメーターを確認するには、対応するコンポーネント上でホバーして [JSON を編集] をクリックします。 1 つのアクション内で複数のパラメーターを変更できます。
カスタム アクション	JavaScript のトリガーの種類を定義する場合と同じように、JavaScript 構文を使用してカスタム アクションを定義します。	NA