コンポーネント一覧

ページ内目次

テキストフィールド
テキストエリア
数値
パスワード
チェックボックス
選択ボックス
選択
ラジオボタン
ボタン

◯テキストフィールド

[表示タブ]
No.項目説明用途
1ラベルこのフィールドの隣に表示されるラベル
必須項目
入力項目の概要を説明する
2ラベルの位置このフィールドのラベルの位置ラベルの位置を決める
入力項目の上下左右のいずれかを設定可能
左右の場合、入力項目の可視範囲が狭まるので注意
3ラベルの幅行のラベルの幅(%)
・「ラベルの位置」が”左”もしくは”右”の時に設定可能
・デフォルト値は30
ラベルの幅を調整したい場合に設定する
4ラベルの余白行のラベルマージンの幅をパーセントで指定します
・「ラベルの位置」が”左”もしくは”右”の時に設定可能
・デフォルト値は3
ラベルと入力項目の間を少し空けたい場合に設定する
5プレースホルダーこのフィールドが空のときに表示されるプレースホルダテキスト入力項目にはどのような値を入力するのかを説明するのに利用
サンプルを設定しておくとわかりやすい
6説明入力フィールドの下に表示されるテキスト入力項目に対する説明を表示
注意を引きたいときや入力内容を間違ってほしくないときに設定する
7ツールチップフィールドの横に表示されるツールチップ説明文を画面に表示せずに❔にマウスカーソルを当てたときだけ表示させたい場合に設定する
8接頭文字入力項目の先頭に付与される文字列入力項目に固定の文字列を付与したい場合
例)「西暦」としておくと”2023年9月26日”と入力しても”西暦2023年9月26日”のように表示される
9接尾文字入力項目の最後に付与される文字列入力項目に固定の文字列を付与したい場合
例)「について」としておくと”xxxxの問題”と入力しても”xxxxの問題について”で表示される
10ウィジェットフィールドの値を入力するための表示UI
“入力フィールド”、”カレンダーピッカー”のいずれかが設定可能
通常は”入力フィールド”を設定する
日時を文字列として格納したい場合は”カレンダーピッカー”を選択する
11ウィジェットの設定・「ウィジェット」が”カレンダーピッカー”の時に設定可能
・JSON形式で設定するがデフォルト値は下記の通り
{
  “type”: “calendar”,
  “altInput”: true,
  “allowInput”: true,
  “clickOpens”: true,
  “enableDate”: true,
  “enableTime”: true,
  “mode”: “single”,
  “noCalendar”: false,
  “format”: “yyyy-MM-dd hh:mm a”,
  “dateFormat”: “yyyy-MM-ddTHH:mm:ssZ”,
  “useLocaleSettings”: false,
  “hourIncrement”: 1,
  “minuteIncrement”: 5,
  “time_24hr”: false,
  “saveAs”: “text”,
  “displayInTimezone”: “viewer”,
  “locale”: “ja”
}
カレンダーで設定する値を変更したい場合に変更する
例)時刻が不要な場合は”enableTime”を”false”にする
12入力マスクあらかじめ定義された書式にしたがった入力を強制する
9: 数字
a: アルファベット
*: 英数字
電話用マスク例: (999) 999-9999
入力項目の入力形式が決まっている場合に設定する
例)郵便番号の場合は999-9999とする
設定した文字列以外の入力は出来なくなる
上記の場合英字の入力は出来ない
日本語文字列は設定できない
13マスクを表示する表示マスクは、入力を読みやすく表示するのに役立ちますが、保存される値には影響しません(表示と保存の両方に影響を与えるには、表示マスクを削除して入力マスクを使用します)。
9: 数字
a: アルファベット
*: 英数字
電話用マスクの例: (999) 999-9999
入力項目の形式を設定しますが厳密に評価されることはない
14入力マスクフィールド内のプレースホルダーとして使用される文字を指定できます。
例: ˍ
プレースホルダー文字がマスク内で使用される場合、スペースに置き換えられることに注意してください。
ここで入力した文字がプレースホルダーとして設定した入力マスクの桁数分、表示される
プレースホルダーが設定されている場合はそちらが優先される
・ここに設定した値は入力できなくなるので注意すること
・12.の入力マスクに値を設定すると表示される
15複数のマスクを許可する複数の入力形式を設定したい場合に利用
例)固定電話と携帯電話(桁数が異なるため、マスク方法も異なる)
16カスタムCSSクラスこのコンポーネントに追加するカスタムCSSクラス見た目を変更するためのCSSクラス名を設定する。
CSSはフォーム上に記述するほか、CSSファイルをフォームに適用させることも出来る
予約語もあり、例えば「nodisp」と設定すると非表示に設定される。
17タブインデックスフォームのタブ順序を上書きするために、このコンポーネントのtabindex属性を設定しますフォームデータの入力時にタブキーを押したときに移動するコンポーネントの順番を設定する
0-32767の間で設定可能
ただし、0はタブキーを押しても移動されないので注意
18オートコンプリートinput要素の値が、デフォルトでブラウザによって自動的に補完されるかどうかを指定しますブラウザで過去に入力したことがある内容を自動で設定できるようにする機能で、同じような内容を何度も入力する場合に利用する
例)氏名や住所など
デフォルトでは有効になっていて、無効化させたい場合は”off”と入力する
19非表示隠しフィールドはまだフォームの一部ですが、視界から隠されています画面上で非表示にしたい場合に設定
計算用の項目にしたいときに利用する
20ラベルを隠すこのコンポーネントのラベル(ラベルがない場合はタイトル)を非表示にします。これにより、フォームビルダーでラベルを表示することはできますが、レンダリング時には表示されません入力項目のラベルを非表示にする
21ワードカウンターの表示単語数のライブカウントを表示する空白(全角半角問わず)で区切られた文字列がいくつあるのかをコンポーネントの下にリアルタイムで表示する
22文字数カウンターの表示文字数をライブで表示する入力した文字数をコンポーネントの下にリアルタイムで表示する
全角文字(日本語文字列等)も1とカウントする
・半角文字もカウントするのでワードカウンターとは併用しない方が良い
23入力を隠すブラウザの入力を非表示にします。サーバー上では暗号化されません。パスワードには使用しないでください入力時の値を”・”で表示する
・暗号化されるわけではないのでパスワード用には利用しないこと
24初期フォーカスこのフィールドをこのフォームの最初にフォーカスされる要素にしますデータ作成時に最初にこのフィールドにマウスカーソルがあたるようにする
・チェックを付けるとタブインデックスが利用できなくなる
25スペルチェックを許可する入力値のスペルチェックを行えるようにする
・スペルチェックが可能なのは英単語のみ
26無効にするフォーム入力を無効にするフィールドに入力できなくする
計算結果の値を格納しておくときに利用する
27テーブルビュー投稿のテーブルビュー内でこの値を表示します編集グリッド内に格納したときにヘッダー行にこのコンポーネントを表示するときにチェックを付ける
・編集グリッド内に多くのコンポーネントを配置した場合に表示する項目を絞り込む際に利用する
28モーダル編集このコンポーネントの値を編集するためのモーダルが表示されますコンポーネントに直接入力するのではなくダイアログを表示して入力するときにチェックを付ける
・初期フォーカスのチェックやタブインデックスの値は無効になる
[データタブ]
No.項目説明用途
1複数値フィールドに複数の値を入力できるようにする複数の値を入力する場合にチェックする
2デフォルト値ユーザーとのインタラクションの前に、このフィールドに設定される値
デフォルト値を指定すると、プレースホルダーのテキストがオーバーライドされる
フィールドの初期値を設定する
複数値を許可している場合は初期値も複数設定できる
3入力フォーマットフィールドの出力を特定のフォーマットで強制的にサニタイズするプレーン、HTML、生文字列の3種類から選択可能
HTMLの場合、読込モードの時はHTMLを解析した状態で表示される
4テキストケース入力されたアルファベット文字列を強制的に大文字または小文字に変換する大文字または小文字で統一したい場合に設定する
・全角のアルファベットも変換される
5複数のスペースを切り捨てる入力値内の複数の連続したスペースをまとめて一つのスペースにする
6再描画のタイミング他のコンポーネントが変更された場合、このコンポーネントを再描画する。これは、ラベルのようなコンポーネントの一部を補間する場合に有用であるフィールドが計算結果の値として設定されているときに、関連するコンポーネント名をセットする
7非表示時に値をクリアするフィールドが非表示の場合、値をクリアしするフィールドが非表示に設定された場合、入力値をクリアする
条件によって入力内容を変更したい場合にチェックを付ける
8カスタムデフォルト値
(JavaScript)
フィールドの初期値をJavaScriptで設定する
単純な値ではなく他のコンポーネントの値と関連した値も設定可能
必ず
value = ******;
のように記述すること(*****はJavaScriptの式)
9カスタムデフォルト値
(JSONLogic)
フィールドの初期値をJSONLogicで設定する
10計算結果
(JavaScript)
フィールドの値をJavaScriptで設定する
入力させるのではなく他のコンポーネントの値と関連した値を設定するときに利用する
必ず
value = ******;
のように記述すること(*****はJavaScriptの式)
11計算結果
(JSONLogic)
フィールドの値をJSONLogicで設定する
12サーバーで値を再計算チェックすると、サーバー上で計算が実行される
サーバーで計算した値で、送信した値を上書きしたい場合に使用する
画面上で計算した値を保存時にサーバー側で再計算させる場合にチェックを付ける
13計算された値を手動で書き換え可能にするチェックすると、ユーザーが手動で計算値を上書きすることができるようになる計算結果の値を編集可能にする場合にチェックを付ける
[検証タブ]
No.項目説明用途
1検証のタイミングこのコンポーネントがフロントエンド検証をいつトリガーするかを決定するフィールドの入力チェックを行うタイミングを設定する
「変更時」:フィールドの値が変更されたとき
「フォーカスが離れた時」:フィールドからカーソルが移動したとき
2必須必須フィールドは、フォームを送信する前に入力する必要があるフィールドに値を必ず入力させたい場合にチェックする
3ユニークな値このフィールドに送信されるデータが一意であり、以前に送信されたことがないことを確認する
4最小文字数このフィールドが満たすべき最小の長さを入力するフィールドに入力できる文字数を制限したい場合に設定する
設定した文字数よりも少ないとエラーになる
・日本語文字の”あ”も半角英数字の”A”も1文字とカウントする
5最大文字数このフィールドに入力できる最大の長さを入力するフィールドに入力できる文字数を制限したい場合に設定する
設定した文字数よりも多いとエラーになる
0(ゼロ)を設定した場合は無制限となる
・日本語文字の”あ”も半角英数字の”A”も1文字とカウントする
・最小文字数より小さい値を設定してもconsentFlow Designerではエラーにならないが、値が入力できなくなる(どのような長さの文字列でも入力エラーになる)ので注意すること
6最小の単語の長さこのフィールドに追加できる最小限の単語数フィールドに入力した文字列のうち、空白文字で区切られた文字列の最小数を設定する
・空白文字とは半角スペースもしくは全角スペースのことを指す
7最大の単語の長さこのフィールドに追加できる単語の最大量フィールドに入力した文字列のうち、空白文字で区切られた文字列の最大数を設定する
・空白文字とは半角スペースもしくは全角スペースのことを指す
8正規表現パターンフォームを送信する前にフィールドの値が通過しなければならない正規表現のパターン・テストフィールドに入力できる値の規則を正規表現の形式で設定する
9エラーラベルエラーが発生したときに表示される、このフィールドのラベルフィールドの入力チェックがエラーになった場合に表示されるメッセージのラベルの部分を設定する
・カスタムエラーメッセージが設定されている場合は無視される
10カスタムエラーメッセージエラーが発生した場合、エラーメッセージが表示されますフィールドの入力チェックがエラーになった場合に表示されるメッセージを設定する
11カスタムバリデーション入力チェックの式をJavaScriptで記述する
入力チェックになる際のエラーメッセージも設定する
valid = (input === ‘ABCDE’) ? true : ‘入力値はABCDEであること’;
のようにvalidに判断式の結果を入力する
・カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
12JSONLogicの検証入力チェックの式をJSON形式で記述する
・カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
13カスタムエラー入力チェックの式をJSON形式で記述する
入力チェックの形式はキー値とエラーメッセージで構成して、複数の入力チェックを記述することが可能
・カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
[APIタブ]
No.項目説明用途
1プロパティ名APIエンドポイントにおけるこのフィールドの名前フィールドのIDを表し、フォーム内でユニークな値になっている必要がある
・英数字、アンダースコア(_)、ダッシュ(-)、ドット(.)のみが利用できる
・ダッシュ(-)、ドット(.)で終わることは出来ない。
2フィールドタグカスタムロジックで使用するフィールドにタグを付けます
入力したらEnterキーを押すと確定します。
3カスタムプロパティ
(キー)
これにより、このコンポーネントの任意のカスタムプロパティを設定することができます
4カスタムプロパティ
(値)
これにより、このコンポーネントの任意のカスタムプロパティを設定することができます
[条件タブ]
No.項目説明用途
1このコンポーネントの表示条件コンポーネントの表示可否を決めます特定の条件時にフィールドを表示もしくは非表示にしたい場合に設定する
TRUEはフィールドを表示させる、FALSEはフィールドを非表示にする
2以下のフォームコンポーネントがフォーム内のコンポーネントを選択しますフィールドの表示可否を決める他のコンポーネント(フィールド)を選択する
3以下の値の場合コンポーネントの値を入力しますフィールドの表示可否を決める他のコンポーネント(フィールド)の値を入力する
4高度な条件
(JavaScript)
フィールドの表示可否式をJavaScriptで記述する
show = data.Subject == ”;
のようにshowに判断式の結果を入力する
5高度な条件
(JSONLogic)
フィールドの表示可否式をJSON形式で記述する
[ロジックタブ]
No.項目説明用途
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[レイアウトタブ]
No.項目説明用途
1HTML属性
(属性名)
コンポーネントのinput要素のHTML属性のマップを提供するHTMLのinputタグの属性名を設定する
例)maxlength、minlengthなど
・consentFlow Designerで定義されていない値を設定したい場合に利用する
2HTML属性
(属性)
HTMLのinputタグの属性名に該当する値を設定する
例)属性名が”maxlength”の場合、10を設定すると最大入力文字数が10になる
3PDFオーバーレイ
(スタイル)
PDFでレンダリングする際にこのコンポーネントに適用されるべきカスタムスタイル
4PDFオーバーレイ
(ページ)
このコンポーネントを配置するPDFページ
5PDFオーバーレイ
(左)
このコンポーネントを配置するための、ページ内の左マージン
6PDFオーバーレイ
(上)
このコンポーネントを配置するための、ページ内の上部マージン
7PDFオーバーレイ
(幅)
コンポーネントの幅(ピクセル)
8PDFオーバーレイ
(高さ)
コンポーネントの高さ(ピクセル)

◯テキストエリア

[表示タブ]
No.項目説明用途
1ラベルこのフィールドの隣に表示されるラベル入力項目の概要を説明するために文字列を設定する
2ラベルの位置このフィールドのラベルの位置ラベルの位置を決める
入力項目の上下左右のいずれかを設定可能
3ラベルの幅行のラベルの幅(%)
「ラベルの位置」が”左”もしくは”右”の時に設定可能
ラベルの幅を調整したい場合に設定する
4ラベルの余白行のラベルマージンの幅をパーセントで指定します
「ラベルの位置」が”左”もしくは”右”の時に設定可能
ラベルと入力項目の間を少し空けたい場合に設定する
5プレースホルダーこのフィールドが空のときに表示されるプレースホルダテキスト入力項目にはどのような値を入力するのかを説明するのに利用
サンプルを設定しておくと良い
6説明入力フィールドの下に表示されるテキスト入力項目に対する説明を表示
注意を引きたいときや入力内容を間違ってほしくないときに設定する
7テキストエリアに表示される行数を制御するテキストエリアの入力領域の行数の初期値を数値で設定する
テキストエリアの行数は手動でも変更できる
行数を超えて入力しても読込モード時は全行数分、表示されるのであくまでデフォルト値としての参考程度と考えて良い
・自動展開にチェックを付けた場合は、行数は手動では変更できなくなる
8ツールチップフィールドの横にツールチップを追加する説明文を画面に表示せずに、?にマウスカーソルを当てたときだけ表示させたい場合に設定する
9接頭文字入力項目に固定の文字列を付与したい場合
例)「西暦」としておくと”2023年9月26日”と入力しても”西暦2023年9月26日”のように表示されるようになる
10接尾文字入力項目に固定の文字列を付与したい場合
例)「について」としておくと”xxxxの問題”と入力しても”xxxxの問題について”で表示されるようになる
11マスクを表示する表示マスクは、入力を読みやすく表示するのに役立ちますが、保存される値には影響しません(表示と保存の両方に影響を与えるには、表示マスクを削除して入力マスクを使用します)。
9: 数字
a: アルファベット
*: 英数字
電話用マスクの例: (999) 999-9999
入力項目の形式を設定しますが厳密に評価されることはない
12入力マスクフィールド内のプレースホルダーとして使用される文字を指定できます。
例: ˍ
プレースホルダー文字がマスク内で使用される場合、スペースに置き換えられることに注意してください。
ここで入力した文字がプレースホルダーとして設定した入力マスクの桁数分、表示される
プレースホルダーが設定されている場合はそちらが優先される
・ここに設定した値は入力できなくなるので注意すること
・マスクを表示するに値を設定すると表示される
13エディタこのテキストエリアで使用するWYSIWYGエディタの種類を選択しますテキストエリアのエディタを設定する
ACE、Quillのいずれかを選択する
・CKEditorは選択しないこと
・Quillエディタを選択した場合、consentFlowアプリケーションの[アプリケーション設定][レイアウト設定][クライアントJavaScriptライブラリ、CSS リソースファイルの読込]の「Quill HTMLエディタの読込」を”はい”に設定する必要がある
14画像のアップロードを有効にする・「エディタ」が”CKEditor”もしくは”Quill”の時に設定可能画像をアップロードさせたい場合はQuillを選択する
・チェックを付ける場合、「画像アップロード用ストレージ」を設定しないと実行時にエラーになるので注意すること
15画像アップロード用ストレージどのストレージにファイルを保存するか。
/
「画像のアップロードを有効にする」にチェックがついている場合に設定可能
画像データをどこに保存するかを設定する
・2023年10月時点では「Base64」のみ選択可能
16画像アップロードディレクトリアップロードされたファイルを格納するディレクトリ名を設定するアップロードされたファイルをフォーム毎に分ける場合に使用する
17名前を付けて保存この設定は、値がどのように入力され、データベースに保存されるかを決定します
「文字列「JSON」「HTML」が選択可能
・「エディタ」が”ACE”もしくは”Quill”の時に設定可能
18エディタの設定WYSIWYGエディタのJSON設定を入力します
・「エディタ」が”ACE”、”CKEditor”もしくは”Quill”の時に設定可能
エディタの設定を変更したい場合にJSON形式で入力する
19自動展開これにより、ユーザーが入力するたびにTextAreaの高さが自動的に拡張されます。チェックを付けるとテキストエリアの入力領域を自動で広がるようにする
どれくらいの内容を入力するのか不明なときにチェックを付けると良い
20カスタムCSSクラスこのコンポーネントに追加するカスタムCSSクラス見た目を変更するためのCSSクラス名を設定する。
CSSはフォーム上に記述するほか、CSSファイルをフォームに適用させることも出来る
予約語もあり、例えば「nodisp」と設定すると非表示に設定される。
21タブインデックスフォームのタブ順序を上書きするために、このコンポーネントのtabindex属性を設定しますフォームデータの入力時にタブキーを押したときに移動するコンポーネントの順番を設定する
0-32767の間で設定可能
ただし、0はタブキーを押しても移動されないので注意
・「エディタ」が”ACE”、”CKEditor”もしくは”Quill”の時は効果がないので注意すること
22オートコンプリートinput要素の値が、デフォルトでブラウザによって自動的に補完されるかどうかを指定します。ブラウザで過去に入力したことがある内容を自動で設定できるようにする機能で、同じような内容を何度も入力する場合に利用する
例)氏名や住所など
デフォルトでは有効になっていて、無効化させたい場合は”off”と入力する
23非表示隠しフィールドはまだフォームの一部ですが、視界から隠されています。画面上で非表示にしたい場合に設定
計算用の項目にしたいときに利用する
24ラベルを隠すこのコンポーネントのラベル(ラベルがない場合はタイトル)を非表示にします。これにより、フォームビルダーでラベルを表示することはできますが、レンダリング時には表示されません。入力項目のラベルを非表示にする
25ワードカウンターの表示単語数のライブカウントを表示する空白(全角半角問わず)で区切られた文字列がいくつあるのかをコンポーネントの下にリアルタイムで表示する
26文字数カウンターの表示文字数をライブで表示する入力した文字数をコンポーネントの下にリアルタイムで表示する
全角文字(日本語文字列等)も1とカウントする
・半角文字もカウントするのでワードカウンターとは併用しない方が良い
27初期フォーカスこのフィールドをこのフォームの最初にフォーカスされる要素にします。データ作成時に最初にこのフィールドにマウスカーソルがあたるようにする
・チェックを付けるとタブインデックスが利用できなくなるので注意すること
28スペルチェックを許可する入力値のスペルチェックを行えるようにする
・スペルチェックが可能なのは英単語のみなので注意すること
29無効にするフォーム入力を無効にするフィールドに入力できなくする
計算結果の値を格納しておくときに利用する
30テーブルビュー投稿のテーブルビュー内でこの値を表示します編集グリッド内に格納したときにヘッダー行にこのコンポーネントを表示するときにチェックを付ける
・編集グリッド内に多くのコンポーネントを配置した場合に表示する項目を絞り込む際に利用する
31モーダル編集このコンポーネントの値を編集するためのモーダルが表示されますコンポーネントに直接入力するのではなくダイアログを表示して入力するときにチェックを付ける
・初期フォーカスのチェックやタブインデックスの値は無効になるので注意すること
[データタブ]
No.項目説明用途
1複数値このフィールドに複数の値を入力できるようにする複数の値を入力する場合にチェックを付ける
2デフォルト値デフォルト値は、ユーザーとのインタラクションの前に、このフィールドに設定される値である。デフォルト値を指定すると、プレースホルダーのテキストがオーバーライドされますフィールドの初期値を設定する
複数値を許可している場合は初期値も複数設定できる
3入力フォーマットこのフィールドの出力を特定のフォーマットで強制的にサニタイズする。プレーン、HTML、生文字列の3種類から選択可能
HTMLの場合、読込モードの時はHTMLを解析した状態で表示される
・通常、生文字列を選択する必要はない
4テキストケースデータが入力されると、値の大文字と小文字を変更することができます。フィールドの入力値を大文字または小文字に変換して保存出来るようにする
・全角文字のアルファベットも変換される
・ひらがなやカタカナは対象外なので注意すること
5複数のスペースを切り捨てる入力値内の複数の連続したスペースをまとめて一つのスペースにする
6再描画のタイミング他のコンポーネントが変更された場合、このコンポーネントを再描画する。これは、ラベルのようなコンポーネントの一部を補間する場合に有用であるフィールドが計算結果の値として設定されているときに、関連するコンポーネント名をセットする
7非表示時に値をクリアするフィールドが非表示の場合、値をクリアします。フィールドが非表示に設定された場合、入力値をクリアする
条件によって入力内容を変更したい場合にチェックを付ける
8カスタムデフォルト値
(JavaScript)
フィールドの初期値をJavaScriptで設定する
単純な値ではなく他のコンポーネントの値と関連した値も設定可能
必ず
value = ******;
のように記述すること(*****はJavaScriptの式)
9カスタムデフォルト値
(JSONLogic)
フィールドの初期値をJSONLogicで設定する
10計算結果
(JavaScript)
フィールドの値をJavaScriptで設定する
入力させるのではなく他のコンポーネントの値と関連した値を設定するときに利用する
必ず
value = ******;
のように記述すること(*****はJavaScriptの式)
11計算結果
(JSONLogic)
フィールドの値をJSONLogicで設定する
12サーバーで値を再計算チェックすると、サーバー上で計算が実行されます。サーバーで計算した値で、送信した値を上書きしたい場合に有効です。画面上で計算した値を保存時にサーバー側で再計算させる場合にチェックを付ける
13計算された値を手動で書き換え可能にするチェックすると、ユーザーが手動で計算値を上書きすることができるようになります。計算結果の値を編集可能にする場合にチェックを付ける
[検証タブ]
No.項目説明用途
1検証のタイミングこのコンポーネントがフロントエンド検証をいつトリガーするかを決定します。フィールドの入力チェックを行うタイミングを設定する
「変更時」はフィールドの値が変更されたとき、「フォーカスが離れた時」はフィールドの外をクリックしてフィールドからマウスカーソルが消えたとき
2必須必須フィールドは、フォームを送信する前に入力する必要があります。フィールドに値を必ず入力させたい場合にチェックを付ける
3ユニークな値このフィールドに送信されるデータが一意であり、以前に送信されたことがないことを確認します。
4最小文字数このフィールドが満たすべき最小の長さの要件です。フィールドに入力できる文字数を制限したい場合に設定する
設定した文字数よりも少ないとエラーになる
・日本語文字の”あ”も半角英数字の”A”も1文字とカウントする
5最大文字数このフィールドが満たすべき最大長要件です。フィールドに入力できる文字数を制限したい場合に設定する
設定した文字数よりも多いとエラーになる
0(ゼロ)を設定した場合は無制限となる
・日本語文字の”あ”も半角英数字の”A”も1文字とカウントする
・最小文字数より小さい値を設定してもconsentFlow Designerではエラーにならないが、値が入力できなくなる(どのような文字列でも入力エラーになる)ので注意すること
6最小の単語の長さこのフィールドに追加できる最小限の単語数。フィールドに入力した文字列のうち、空白文字で区切られた文字列の最小数を設定する
・空白文字は半角スペースもしくは全角スペースのことを指す
7最大の単語の長さこのフィールドに追加できる単語の最大量。フィールドに入力した文字列のうち、空白文字で区切られた文字列の最大数を設定する
・空白文字は半角スペースもしくは全角スペースのことを指す
8正規表現パターンフォームを送信する前にフィールドの値が通過しなければならない正規表現のパターン・テスト。フィールドに入力できる値の規則を正規表現の形式で設定する
9エラーラベルエラーが発生したときに表示される、このフィールドのラベルフィールドの入力チェックがエラーになった場合に表示されるメッセージのラベルの部分を設定する
・カスタムエラーメッセージが設定されている場合は無視される
10カスタムエラーメッセージエラーが発生した場合、エラーメッセージが表示されます。フィールドの入力チェックがエラーになった場合に表示されるメッセージを設定する
11カスタムバリデーション入力チェックの式をJavaScriptで記述する
入力チェックになる際のエラーメッセージも設定する
valid = (input === ‘ABCDE’) ? true : ‘入力値はABCDEであること’;
のようにvalidに判断式の結果を入力する
・カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
12JSONLogicの検証入力チェックの式をJSON形式で記述する
・カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
13カスタムエラー入力チェックの式をJSON形式で記述する
入力チェックの形式はキー値とエラーメッセージで構成して、複数の入力チェックを記述することが可能
・カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
[APIタブ]
No.項目説明用途
1プロパティ名APIエンドポイントにおけるこのフィールドの名前フィールドのIDを表し、フォーム内でユニークな値になっている必要がある
・英数字、アンダースコア(_)、ダッシュ(-)、ドット(.)のみが利用できる。また、ダッシュ(-)、ドット(.)で終わることは出来ない。
2フィールドタグカスタムロジックで使用するフィールドにタグを付けます
入力したらEnterキーを押すと確定します。
3カスタムプロパティ
(キー)
これにより、このコンポーネントの任意のカスタムプロパティを設定することができます
4カスタムプロパティ
(値)
[条件タブ]
No.項目説明用途
1このコンポーネントの表示条件特定の条件時にフィールドを表示もしくは非表示にしたい場合に設定する
TRUEはフィールドを表示させる、FALSEはフィールドを非表示にする
2以下のフォームコンポーネントがフィールドの表示可否を決める他のコンポーネント(フィールド)を選択する
3以下の値の場合フィールドの表示可否を決める他のコンポーネント(フィールド)の値を入力する
4高度な条件
(JavaScript)
フィールドの表示可否式をJavaScriptで記述する
show = data.Subject == ”;
のようにshowに判断式の結果を入力する
5高度な条件
(JSONLogic)
フィールドの表示可否式をJSON形式で記述する
[ロジックタブ]
No.項目説明用途
高度なロジック
1ロジック名ロジックの名前を入力する
2トリガー – 種類ロジックに設定したアクションを実行するためのトリガーを設定する
「シンプル」「JavaScript」「JSONロジック」「イベント名」のいずれかを選択する
3以下のフォームコンポーネントがアクションを実行するためのトリガーとなるコンポーネントを選択する
・「種類」で”シンプル”を選択したときのみ表示される
4以下の値の場合アクションを実行するためのトリガーとなるコンポーネントの値を選択する
・「種類」で”シンプル”を選択したときのみ表示される
5テキストエリアロジックに設定したアクションを実行するためのトリガーの式をJavaScriptで設定する
result = (data[‘mykey’] > 1);
のようにresultに結果を代入する
・「種類」で”JavaScript”を選択したときのみ表示される
6JSONロジックロジックに設定したアクションを実行するためのトリガーの式をJSON形式で設定する
・「種類」で”JSONロジック”を選択したときのみ表示される
7イベント名・「種類」で”イベント名”を選択したときのみ表示される
追加
8アクション名アクションの名前を入力する
9種類アクションの種類を設定する
「プロパティ名」「値」「マージコンポーネントスキーマ」「カスタムアクション」のいずれかを選択する
10コンポーネントのプロパティアクションの内容を設定する
・「種類」で”プロパティ名”を選択したときのみ表示される
11値(JavaScript)値の内容をJavaScriptで記述する
・「種類」で”値”を選択したときのみ表示される
12スキーマの定義
13カスタムアクション(JavaScript)実行するアクションをJavaScriptで記述する
・「種類」で”カスタムアクション”を選択したときのみ表示される
14状態の設定選択したコンポーネントの状態を設定する
TRUEかFALSEが選択可能
・「コンポーネントのプロパティ」が”非表示”、”必須”、”無効にする”の場合にのみ表示される
15テキスト選択したコンポーネントのプロパティに該当する文字列を設定する
・「コンポーネントのプロパティ」が”ラベル”、”タイトル”、”接頭文字”、”接尾文字”、”ツールチップ”、”説明”、”プレースホルダー”、”入力マスク”、”CSSクラス”、”コンテナカスタムクラス”の場合にのみ表示される
[レイアウトタブ]
No.項目説明用途
HTML属性
1属性名コンポーネントのinput要素のHTML属性のマップを提供するHTMLのinputタグの属性名を設定する
例)maxlength、minlengthなど
・consentFlow Designerで定義されていない値を設定したい場合に利用すると良い
2属性HTMLのinputタグの属性名に該当する値を設定する
例)属性名が”maxlength”の場合、10を設定すると最大入力文字数が10になる
PDFオーバーレイ
3スタイルPDFでレンダリングする際にこのコンポーネントに適用されるべきカスタムスタイル
4ページこのコンポーネントを配置するPDFページ
5このコンポーネントを配置するための、ページ内の左マージン
6このコンポーネントを配置するページ内の上部マージン
7コンポーネントの幅(ピクセル)
8高さコンポーネントの高さ(ピクセル)

◯数値

[表示タブ]
No.項目説明用途
1ラベルこのフィールドの隣に表示されるラベル。入力項目の概要を説明するため
2ラベルの位置このフィールドのラベルの位置ラベルの位置を決める
入力項目の上下左右のいずれかを設定可能
左右の場合、入力項目の可視範囲が狭まるので注意
3ラベルの幅行のラベルの幅(%)ラベルの幅を調整したい場合に設定する
4ラベルの余白行のラベルマージンの幅をパーセントで指定します。ラベルと入力項目の間を少し空けたい場合に設定する
5プレースホルダーこのフィールドが空のときに表示されるプレースホルダテキスト。入力項目にはどのような値を入力するのかを説明するのに利用
サンプルを設定しておくと良い
6説明説明文は、入力フィールドの下に表示されるテキストです。入力項目に対する説明を表示
注意を引きたいときや入力内容を間違ってほしくないときに設定する
7ツールチップこのフィールドの横にツールチップを追加します。説明文を画面に表示せずに?にマウスカーソルを当てたときだけ表示させたい場合に設定する
8接頭文字入力項目に固定の文字列を付与したい場合
例)「¥」としておくと”12345″と入力しても”¥12345″のように表示されるようになる
9接尾文字入力項目に固定の文字列を付与したい場合
例)「番目」としておくと”123″と入力しても”123番目”で表示されるようになる
10マスクを表示する表示マスクは、入力を読みやすく表示するのに役立ちますが、保存される値には影響しません(表示と保存の両方に影響を与えるには、表示マスクを削除して入力マスクを使用します)。
9: 数字
a: アルファベット
*: 英数字
電話用マスクの例: (999) 999-9999
入力項目の形式を設定するが厳密に評価されることはない
数値コンポーネントでは設定しても効果がないので注意すること
11入力マスクフィールドのプレースホルダーとして使用される文字を指定できます。
例:ˍ
プレースホルダーの文字がマスク内で使用された場合、スペースに置き換えられることに注意してください。
ここで入力した文字がプレースホルダーとして設定した入力マスクの桁数分、表示される
プレースホルダーが設定されている場合はそちらが優先される
数値コンポーネントでは設定しても効果がないので注意すること
・ここに設定した値は入力できなくなるので注意すること
・マスクを表示するに値を設定すると表示される
12カスタムCSSクラスこのコンポーネントに追加するカスタムCSSクラス。見た目を変更するためのCSSクラス名を設定する。
CSSはフォーム上に記述するほか、CSSファイルをフォームに適用させることも出来る
予約語もあり、例えば「nodisp」と設定すると非表示に設定される。
13タブインデックスフォームのタブ順序を上書きするために、このコンポーネントのtabindex属性を設定します。フォームデータの入力時にタブキーを押したときに移動するコンポーネントの順番を設定する
0-32767の間で設定可能
ただし、0はタブキーを押しても移動されないので注意
14オートコンプリートinput要素の値が、デフォルトでブラウザによって自動的に補完されるかどうかを指定します。ブラウザで過去に入力したことがある内容を自動で設定できるようにする機能で、同じような内容を何度も入力する場合に利用する
例)氏名や住所など
デフォルトでは有効になっていて、無効化させたい場合は”off”と入力する
15非表示隠しフィールドはまだフォームの一部ですが、視界から隠されています。画面上で非表示にしたい場合に設定
計算用の項目にしたいときに利用する
16ラベルを隠すこのコンポーネントのラベル(ラベルがない場合はタイトル)を非表示にします。これにより、フォームビルダーでラベルを表示することはできますが、レンダリング時には表示されません。入力項目のラベルを非表示にする
17入力を隠すブラウザの入力を非表示にします。サーバー上では暗号化されません。パスワードには使用しないでください。入力時の値を”・”で表示する
・暗号化されるわけではないのでパスワード用には利用しないこと
18初期フォーカスこのフィールドをこのフォームの最初にフォーカスされる要素にします。データ作成時に最初にこのフィールドにマウスカーソルがあたるようにする
・チェックを付けるとタブインデックスが利用できなくなるので注意すること
19無効にするフォーム入力を無効にするフィールドに入力できなくする
計算結果の値を格納しておくときに利用する
20テーブルビュー投稿のテーブルビュー内でこの値を表示します。編集グリッド内に格納したときにヘッダー行にこのコンポーネントを表示するときにチェックを付ける
・編集グリッド内に多くのコンポーネントを配置した場合に表示する項目を絞り込む際に利用する
21モーダル編集このコンポーネントの値を編集するためのモーダルが表示されます。コンポーネントに直接入力するのではなくダイアログを表示して入力するときにチェックを付ける
・初期フォーカスのチェックやタブインデックスの値は無効になるので注意すること
[データタブ]
No.項目説明用途
1複数値このフィールドに複数の値を入力できるようにします。複数の値を入力する場合にチェックを付ける
2デフォルト値デフォルト値は、ユーザーとのインタラクションの前に、このフィールドに設定される値である。デフォルト値を指定すると、プレースホルダーのテキストがオーバーライドされます。フィールドの初期値を設定する
複数値を許可している場合は初期値も複数設定できる
3千区切り文字を使用するローカルデリミターで区切ります。入力した値に対して千の位で区切り文字(通常は「,」)が設定される
4小数点以下の桁数このフィールドが満たすべき最大長要件。入力できる小数点以下の桁数を設定する
例えば、1を設定すると、123.45は123.4までしか入力できなくなる
クリップボードにコピーした値も設定した小数点までしか入力できない
5小数点を要求するゼロが続く場合でも、常に小数点を表示します。チェックを付けると必ず小数点が表示される
デフォルトでは小数点以下は2桁固定となる
小数点以下を2桁以外にしたい場合は「小数点以下の桁数」に値を設定すること
6入力フォーマットこのフィールドの出力を特定のフォーマットで強制的にサニタイズする。プレーン、HTML、生文字列の3種類から選択可能
HTMLの場合、読込モードの時はHTMLを解析した状態で表示される
・通常、生文字列を選択する必要はない
7複数のスペースを切り捨てる入力値内の複数の連続したスペースをまとめて一つのスペースにする
・数値フィールドは0-9の値しか入力できないため、本項目は設定しても効果がない
8再描画のタイミング他のコンポーネントが変更された場合、このコンポーネントを再描画する。これは、ラベルのようなコンポーネントの一部を補間する場合に有用である。フィールドが計算結果の値として設定されているときに、関連するコンポーネント名をセットする
9非表示時に値をクリアするフィールドが非表示の場合、値をクリアします。フィールドが非表示に設定された場合、入力値をクリアする
条件によって入力内容を変更したい場合にチェックを付ける
10カスタムデフォルト値
(JavaScript)
フィールドの初期値をJavaScriptで設定する
単純な値ではなく他のコンポーネントの値と関連した値も設定可能
必ず
value = ******;
のように記述すること(*****はJavaScriptの式)
11カスタムデフォルト値
(JSONLogic)
フィールドの初期値をJSONLogicで設定する
12計算結果
(JavaScript)
フィールドの値をJavaScriptで設定する
入力させるのではなく他のコンポーネントの値と関連した値を設定するときに利用する
必ず
value = ******;
のように記述すること(*****はJavaScriptの式)
13計算結果
(JSONLogic)
フィールドの値をJSONLogicで設定する
[検証タブ]
No.項目説明用途
1検証のタイミングこのコンポーネントがフロントエンド検証をいつトリガーするかを決定します。フィールドの入力チェックを行うタイミングを設定する
「変更時」はフィールドの値が変更されたとき、「フォーカスが離れた時」はフィールドの外をクリックしてフィールドからマウスカーソルが消えたとき
2必須必須フィールドは、フォームを送信する前に入力する必要があります。フィールドに値を必ず入力させたい場合にチェックを付ける
3最小値このフィールドが満たすべき最小の値です。フィールドに入力できる値を制限したい場合に設定する
設定した値よりも小さいとエラーになる
4最大値このフィールドがフォームを送信する前に持つことができる最大値です。フィールドに入力できる値を制限したい場合に設定する
設定した値よりも大きいとエラーになる
・最小値より小さい値を設定してもconsentFlow Designerではエラーにならないが、値が入力できなくなる(どのような値でも入力エラーになる)ので注意すること
5エラーラベルエラーが発生したときに表示される、このフィールドのラベル。フィールドの入力チェックがエラーになった場合に表示されるメッセージのラベルの部分を設定する
・カスタムエラーメッセージが設定されている場合は無視される
6カスタムエラーメッセージエラーが発生した場合、エラーメッセージが表示されます。フィールドの入力チェックがエラーになった場合に表示されるメッセージを設定する
7カスタムバリデーション入力チェックの式をJavaScriptで記述する
入力チェックになる際のエラーメッセージも設定する
valid = (input === ‘ABCDE’) ? true : ‘入力値はABCDEであること’;
のようにvalidに判断式の結果を入力する
・カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
8JSONLogicの検証入力チェックの式をJSON形式で記述する
・カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
9カスタムエラー入力チェックの式をJSON形式で記述する
入力チェックの形式はキー値とエラーメッセージで構成して、複数の入力チェックを記述することが可能
・カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
[APIタブ]
No.項目説明用途
1プロパティ名APIエンドポイントにおけるこのフィールドの名前。フィールドのIDを表し、フォーム内でユニークな値になっている必要がある
・英数字、アンダースコア(_)、ダッシュ(-)、ドット(.)のみが利用できる。また、ダッシュ(-)、ドット(.)で終わることは出来ない。
2フィールドタグカスタムロジックで使用するフィールドにタグを付けます。
・入力したらEnterキーを押すと確定します。
3カスタムプロパティ
(キー)
これにより、このコンポーネントの任意のカスタムプロパティを設定することができます。
4カスタムプロパティ
(値)
[条件タブ]
No.項目説明用途
シンプル
1このコンポーネントの表示条件特定の条件時にフィールドを表示もしくは非表示にしたい場合に設定する
TRUEはフィールドを表示させる、FALSEはフィールドを非表示にする
2以下のフォームコンポーネントがフィールドの表示可否を決める他のコンポーネント(フィールド)を選択する
3以下の値の場合フィールドの表示可否を決める他のコンポーネント(フィールド)の値を入力する
高度な条件
4JavaScriptフィールドの表示可否式をJavaScriptで記述する
show = data.Subject == ”;
のようにshowに判断式の結果を入力する
5JSONLogicフィールドの表示可否式をJSON形式で記述する
[ロジックタブ]
No.項目説明用途
高度なロジック
1ロジック名ロジックの名前を入力する
2トリガー – 種類ロジックに設定したアクションを実行するためのトリガーを設定する
「シンプル」「JavaScript」「JSONロジック」「イベント名」のいずれかを選択する
3以下のフォームコンポーネントがアクションを実行するためのトリガーとなるコンポーネントを選択する
・「種類」で”シンプル”を選択したときのみ表示される
4以下の値の場合アクションを実行するためのトリガーとなるコンポーネントの値を選択する
・「種類」で”シンプル”を選択したときのみ表示される
5テキストエリアロジックに設定したアクションを実行するためのトリガーの式をJavaScriptで設定する
result = (data[‘mykey’] > 1);
のようにresultに結果を代入する
・「種類」で”JavaScript”を選択したときのみ表示される
6JSONロジックロジックに設定したアクションを実行するためのトリガーの式をJSON形式で設定する
・「種類」で”JSONロジック”を選択したときのみ表示される
7イベント名・「種類」で”イベント名”を選択したときのみ表示される
追加
8アクション名アクションの名前を入力する
9種類アクションの種類を設定する
「プロパティ名」「値」「マージコンポーネントスキーマ」「カスタムアクション」のいずれかを選択する
10コンポーネントのプロパティアクションの内容を設定する
・「種類」で”プロパティ名”を選択したときのみ表示される
11値(JavaScript)値の内容をJavaScriptで記述する
・「種類」で”値”を選択したときのみ表示される
12スキーマの定義
13カスタムアクション(JavaScript)実行するアクションをJavaScriptで記述する
・「種類」で”カスタムアクション”を選択したときのみ表示される
14状態の設定選択したコンポーネントの状態を設定する
TRUEかFALSEが選択可能
・「コンポーネントのプロパティ」が”非表示”、”必須”、”無効にする”の場合にのみ表示される
15テキスト選択したコンポーネントのプロパティに該当する文字列を設定する
・「コンポーネントのプロパティ」が”ラベル”、”タイトル”、”接頭文字”、”接尾文字”、”ツールチップ”、”説明”、”プレースホルダー”、”入力マスク”、”CSSクラス”、”コンテナカスタムクラス”の場合にのみ表示される
[レイアウトタブ]
No.項目説明用途
HTML属性
1属性名コンポーネントのinput要素のHTML属性のマップを提供する(他のコンポーネントの設定によって提供された属性やform.ioによって生成された他の属性は、このグリッドの属性よりも優先されます)。HTMLのinputタグの属性名を設定する
例)maxlength、minlengthなど
・consentFlow Designerで定義されていない値を設定したい場合に利用すると良い
2属性HTMLのinputタグの属性名に該当する値を設定する
例)属性名が”maxlength”の場合、10を設定すると最大入力文字数が10になる
PDFオーバーレイ
3スタイル
4ページ
5
6
7
8高さ

◯パスワード

[表示タブ]
No.項目説明用途
1ラベルこのフィールドの隣に表示されるラベル入力項目の概要を説明するため
2ラベルの位置このフィールドのラベルの位置ラベルの位置を決める
入力項目の上下左右のいずれかを設定可能
左右の場合、入力項目の可視範囲が狭まるので注意
3ラベルの幅行のラベルの幅(%)ラベルの幅を調整したい場合に設定する
4ラベルの余白行のラベルマージンの幅をパーセントで指定しますラベルと入力項目の間を少し空けたい場合に設定する
5プレースホルダーこのフィールドが空のときに表示されるプレースホルダテキスト。入力項目にはどのような値を入力するのかを説明するのに利用
サンプルを設定しておくと良い
6説明説明文は、入力フィールドの下に表示されるテキストです。入力項目に対する説明を表示
注意を引きたいときや入力内容を間違ってほしくないときに設定する
7ツールチップこのフィールドの横にツールチップを追加します。説明文を画面に表示せずに にマウスカーソルを当てたときだけ表示させたい場合に設定する
8接頭文字入力項目の先頭に付与される文字列入力項目に固定の文字列を付与したい場合
9接尾文字入力項目の最後に付与される文字列入力項目に固定の文字列を付与したい場合
10マスクを表示する表示マスクは、入力を読みやすく表示するのに役立ちますが、保存される値には影響しません(表示と保存の両方に影響を与えるには、表示マスクを削除して入力マスクを使用します)。
9: 数字
a: アルファベット
*: 英数字
電話用マスクの例: (999) 999-9999
入力項目の形式を設定しますが厳密に評価されることはない
11入力マスクフィールド内のプレースホルダーとして使用される文字を指定できます。
例: ˍ
プレースホルダー文字がマスク内で使用される場合、スペースに置き換えられることに注意してください。
ここで入力した文字がプレースホルダーとして設定した入力マスクの桁数分、表示される
プレースホルダーが設定されている場合はそちらが優先される
・ここに設定した値は入力できなくなるので注意すること
・「マスクを表示する」に値を設定すると表示される
12カスタムCSSクラスこのコンポーネントに追加するカスタムCSSクラス。見た目を変更するためのCSSクラス名を設定する。
CSSはフォーム上に記述するほか、CSSファイルをフォームに適用させることも出来る
予約語もあり、例えば「nodisp」と設定すると非表示に設定される。
13タブインデックスフォームのタブ順序を上書きするために、このコンポーネントのtabindex属性を設定します。フォームデータの入力時にタブキーを押したときに移動するコンポーネントの順番を設定する
0-32767の間で設定可能
ただし、0はタブキーを押しても移動されないので注意
14オートコンプリートinput要素の値が、デフォルトでブラウザによって自動的に補完されるかどうかを指定します。ブラウザで過去に入力したことがある内容を自動で設定できるようにする機能で、同じような内容を何度も入力する場合に利用する
例)氏名や住所など
デフォルトでは有効になっていて、無効化させたい場合は”off”と入力する
15非表示隠しフィールドはまだフォームの一部ですが、視界から隠されています。画面上で非表示にしたい場合に設定
計算用の項目にしたいときに利用する
16ラベルを隠すこのコンポーネントのラベル(ラベルがない場合はタイトル)を非表示にします。これにより、フォームビルダーでラベルを表示することはできますが、レンダリング時には表示されません。入力項目のラベルを非表示にする
17ワードカウンターの表示単語数のライブカウントを表示する。空白(全角半角問わず)で区切られた文字列がいくつあるのかをコンポーネントの下にリアルタイムで表示する
・パスワードの入力文字数が表示されてしまうので利用は推奨しない
18文字数カウンターの表示文字数をライブで表示する。入力した文字数をコンポーネントの下にリアルタイムで表示する
全角文字(日本語文字列等)も1とカウントする
・半角文字もカウントするのでワードカウンターとは併用しない方が良い
19初期フォーカスこのフィールドをこのフォームの最初にフォーカスされる要素にします。データ作成時に最初にこのフィールドにマウスカーソルがあたるようにする
・チェックを付けるとタブインデックスが利用できなくなるので注意すること
20スペルチェックを許可する入力値のスペルチェックを行えるようにする
・チェックを付けても効果がないので注意すること
21無効にするフォーム入力を無効にするフィールドに入力できなくする
計算結果の値を格納しておくときに利用する
22テーブルビュー投稿のテーブルビュー内でこの値を表示します。編集グリッド内に格納したときにヘッダー行にこのコンポーネントを表示するときにチェックを付ける
・編集グリッド内に多くのコンポーネントを配置した場合に表示する項目を絞り込む際に利用する
23モーダル編集このコンポーネントの値を編集するためのモーダルが表示されます。コンポーネントに直接入力するのではなくダイアログを表示して入力するときにチェックを付ける
・初期フォーカスのチェックやタブインデックスの値は無効になるので注意すること
[データタブ]
No.項目説明用途
1テキストケースデータが入力されると、値の大文字と小文字を変更することができます。フィールドの入力値を大文字または小文字に変換して保存出来るようにする
・入力したパスワードが分からなくなってしまうので設定しないこと
2複数のスペースを切り捨てる入力値内の複数の連続したスペースをまとめて一つのスペースにする
・入力したパスワードが分からなくなってしまうので設定しないこと
3再描画のタイミング他のコンポーネントが変更された場合、このコンポーネントを再描画する。これは、ラベルのようなコンポーネントの一部を補間する場合に有用である。フィールドが計算結果の値として設定されているときに、関連するコンポーネント名をセットする
4非表示時に値をクリアするフィールドが非表示の場合、値をクリアします。フィールドが非表示に設定された場合、入力値をクリアする
条件によって入力内容を変更したい場合にチェックを付ける
5サーバーで値を再計算チェックすると、サーバー上で計算が実行されます。サーバーで計算した値で、送信した値を上書きしたい場合に有効です。画面上で計算した値を保存時にサーバー側で再計算させる場合にチェックを付ける
6計算された値を手動で書き換え可能にするチェックすると、ユーザーが手動で計算値を上書きすることができるようになります。計算結果の値を編集可能にする場合にチェックを付ける
[検証タブ]
No.項目説明用途
1検証のタイミングこのコンポーネントがフロントエンド検証をいつトリガーするかを決定します。フィールドの入力チェックを行うタイミングを設定する
「変更時」はフィールドの値が変更されたとき、「フォーカスが離れた時」はフィールドの外をクリックしてフィールドからマウスカーソルが消えたとき
2必須必須フィールドは、フォームを送信する前に入力する必要があります。フィールドに値を必ず入力させたい場合にチェックを付ける
3最小文字数このフィールドが満たすべき最小の長さの要件です。フィールドに入力できる文字数を制限したい場合に設定する
設定した文字数よりも少ないとエラーになる
4最大文字数このフィールドが満たすべき最大長要件です。フィールドに入力できる文字数を制限したい場合に設定する
設定した文字数よりも多いとエラーになる
0(ゼロ)を設定した場合は無制限となる
 最小文字数より小さい値を設定してもconsentFlow Designerではエラーにならないが、値が入力できなくなる(どのような文字列でも入力エラーになる)ので注意すること
5正規表現パターンフォームを送信する前にフィールドの値が通過しなければならない正規表現のパターン・テスト。フィールドに入力できる値の規則を正規表現の形式で設定する
 パスワードなので正規表現の形式に囚われる必要はないので設定しないこと
6エラーラベルエラーが発生したときに表示される、このフィールドのラベル。フィールドの入力チェックがエラーになった場合に表示されるメッセージのラベルの部分を設定する
 カスタムエラーメッセージが設定されている場合は無視される
7カスタムエラーメッセージエラーが発生したときに表示される、このフィールドのラベル。フィールドの入力チェックがエラーになった場合に表示されるメッセージを設定する
8カスタムバリデーション入力チェックの式をJavaScriptで記述する
入力チェックになる際のエラーメッセージも設定する
valid = (input === ‘ABCDE’) ? true : ‘入力値はABCDEであること’;
のようにvalidに判断式の結果を入力する
 カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
JSONLogicの検証入力チェックの式をJSON形式で記述する
 カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
カスタムエラー入力チェックの式をJSON形式で記述する
入力チェックの形式はキー値とエラーメッセージで構成して、複数の入力チェックを記述することが可能
 カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
[APIタブ]
No.項目説明用途
1プロパティ名APIエンドポイントにおけるこのフィールドの名前。フィールドのIDを表し、フォーム内でユニークな値になっている必要がある
 英数字、アンダースコア(_)、ダッシュ(-)、ドット(.)のみが利用できる。また、ダッシュ(-)、ドット(.)で終わることは出来ない。
2フィールドタグカスタムロジックで使用するフィールドにタグを付けます。
 入力したらEnterキーを押すと確定します。
3カスタムプロパティ
(キー)
これにより、このコンポーネントの任意のカスタムプロパティを設定することができます。
4カスタムプロパティ
(値)
[条件タブ]
No.項目説明用途
シンプル
1このコンポーネントの表示条件コンポーネントの表示可否を決めます特定の条件時にフィールドを表示もしくは非表示にしたい場合に設定する
TRUEはフィールドを表示させる、FALSEはフィールドを非表示にする
2以下のフォームコンポーネントがフォーム内のコンポーネントを選択しますフィールドの表示可否を決める他のコンポーネント(フィールド)を選択する
3以下の値の場合コンポーネントの値を入力しますフィールドの表示可否を決める他のコンポーネント(フィールド)の値を入力する
高度な条件
4JavaScriptフィールドの表示可否式をJavaScriptで記述する
show = data.Subject == ”;
のようにshowに判断式の結果を入力する
5JSONLogicフィールドの表示可否式をJSON形式で記述する
[ロジックタブ]
No.項目説明用途
高度なロジック
1ロジック名ロジックの名前を入力する
2トリガー – 種類ロジックに設定したアクションを実行するためのトリガーを設定する
「シンプル」「JavaScript」「JSONロジック」「イベント名」のいずれかを選択する
3以下のフォームコンポーネントがアクションを実行するためのトリガーとなるコンポーネントを選択する
 「種類」で”シンプル”を選択したときのみ表示される
4以下の値の場合アクションを実行するためのトリガーとなるコンポーネントの値を選択する
 「種類」で”シンプル”を選択したときのみ表示される
5テキストエリアロジックに設定したアクションを実行するためのトリガーの式をJavaScriptで設定する
result = (data[‘mykey’] > 1);
のようにresultに結果を代入する
 「種類」で”JavaScript”を選択したときのみ表示される
6JSONロジックロジックに設定したアクションを実行するためのトリガーの式をJSON形式で設定する
 「種類」で”JSONロジック”を選択したときのみ表示される
7イベント名 「種類」で”イベント名”を選択したときのみ表示される
追加
8アクション名アクションの名前を入力する
種類アクションの種類を設定する
「プロパティ名」「値」「マージコンポーネントスキーマ」「カスタムアクション」のいずれかを選択する
コンポーネントのプロパティアクションの内容を設定する  「種類」で”プロパティ名”を選択したときのみ表示される
値(JavaScript)値の内容をJavaScriptで記述する
 「種類」で”値”を選択したときのみ表示される
スキーマの定義
カスタムアクション(JavaScript)実行するアクションをJavaScriptで記述する
 「種類」で”カスタムアクション”を選択したときのみ表示される
状態の設定選択したコンポーネントの状態を設定する
TRUEかFALSEが選択可能
 「コンポーネントのプロパティ」が”非表示”、”必須”、”無効にする”の場合にのみ表示される
テキスト選択したコンポーネントのプロパティに該当する文字列を設定する
 「コンポーネントのプロパティ」が”ラベル”、”タイトル”、”接頭文字”、”接尾文字”、”ツールチップ”、”説明”、”プレースホルダー”、”入力マスク”、”CSSクラス”、”コンテナカスタムクラス”の場合にのみ表示される
[レイアウトタブ]
No.項目説明用途
HTML属性
1属性名コンポーネントのinput要素のHTML属性のマップを提供するHTMLのinputタグの属性名を設定する
例)maxlength、minlengthなど
consentFlow Designerで定義されていない値を設定したい場合に利用すると良い
2属性HTMLのinputタグの属性名に該当する値を設定する
例)属性名が”maxlength”の場合、10を設定すると最大入力文字数が10になる
PDFオーバーレイ
3スタイルPDFでレンダリングする際にこのコンポーネントに適用されるべきカスタムスタイル
4ページこのコンポーネントを配置するPDFページ
5このコンポーネントを配置するための、ページ内の左マージン
6このコンポーネントを配置するページ内の上部マージン
7コンポーネントの幅(ピクセル)
8高さコンポーネントの高さ(ピクセル)
[アドオンタブ]
No.項目説明用途
1名前
2強度レベル
3更新日
ルール
4名前
5エラーメッセージ
6必須
カスタムルール
7名前
8Check
文字プールのサイズを大きくする
必須
ブラックリスト
カスタムブラックリスト語群
ブラックリストに登録された単語を無効にする
ロケーション
セレクタ
テンプレート

◯チェックボックス

[表示タブ]
No.項目説明用途
1ラベルこのフィールドの隣に表示されるラベル。チェックボックスの値を表示するのに利用する
2ラベルの幅行のラベルの幅(%)。
 デフォルト値は30
 設定しても効果がないので注意すること
3ラベルの余白行のラベルマージンの幅をパーセントで指定します。
 デフォルト値は3
 設定しても効果がないので注意すること
4説明説明文は、入力フィールドの下に表示されるテキストです。チェックボックスに対する説明を表示
注意を引きたいときやチェックするかどうかを間違ってほしくないときに設定する
5ツールチップこのフィールドの横にツールチップを追加します。説明文を画面に表示せずに にマウスカーソルを当てたときだけ表示させたい場合に設定する
6ショートカットこのコンポーネントのショートカットです。キーボード入力でチェックボックスを設定させたい場合に設定する
 A-Zを選択可能
 CtrlとAltを押しながら設定した値を押すことでチェックを付けたり外したり出来る
 一カ所で設定すると他のチェックボックスやラジオボタン、選択コンポーネントではその値で設定できない
7入力タイプこれは、このチェックボックスに使用する入力タイプです。入力形状をチェックボックスまたはラジオボタンのどちらにするか選択する
8ラジオキーラジオボタンのトグルに使用されるキー。
 「入力タイプ」が”ラジオボタン”の時に設定可能
複数のチェックボックスコンポーネントで同じラジオキーを設定している場合、一つのラジオボタングループとして認識させられる
このときラジオバリューはそれぞれのチェックボックスコンポーネントで別々の値に設定する必要がある
 この項目に値を設定した場合「ラジオバリュー」にも値を設定する必要がある
ラジオバリューこのラジオボタンで使用される値です。
 「入力タイプ」が”ラジオボタン”の時に設定可能
複数のチェックボックスコンポーネントで同じラジオキーを設定している場合、一つのラジオボタングループとして認識させられる
このときラジオバリューはそれぞれのチェックボックスコンポーネントで別々の値に設定する必要がある
 この項目に値を設定した場合「ラジオキー」にも値を設定する必要がある
カスタムCSSクラスこのコンポーネントに追加するカスタムCSSクラス。見た目を変更するためのCSSクラス名を設定する。
CSSはフォーム上に記述するほか、CSSファイルをフォームに適用させることも出来る
予約語もあり、例えば「nodisp」と設定すると非表示に設定される。
タブインデックスフォームのタブ順序を上書きするために、このコンポーネントのtabindex属性を設定します。フォームデータの入力時にタブキーを押したときに移動するコンポーネントの順番を設定する
0-32767の間で設定可能
ただし、0はタブキーを押しても移動されないので注意
 「入力タイプ」を”ラジオボタン”にしている場合、複数のチェックボックスコンポーネントで一つの項目と見なされるのでタブインデックスはそのうちの一つのみが有効になるので注意すること
非表示隠しフィールドはまだフォームの一部ですが、視界から隠されています。画面上で非表示にしたい場合に設定
計算用の項目にしたいときに利用する
ラベルを隠すこのコンポーネントのラベル(ラベルがない場合はタイトル)を非表示にします。これにより、フォームビルダーでラベルを表示することはできますが、レンダリング時には表示されません。チェックボックスのラベルを非表示にする
初期フォーカスこのフィールドをこのフォームの最初にフォーカスされる要素にします。データ作成時に最初にこのフィールドにマウスカーソルがあたるようにする
チェックを付けるとタブインデックスが利用できなくなるので注意すること
無効にするフォーム入力を無効にするチェックボックスにチェックできないようにする
計算結果の値を格納しておくときに利用する
テーブルビュー投稿のテーブルビュー内でこの値を表示します。編集グリッド内に格納したときにヘッダー行にこのコンポーネントを表示するときにチェックを付ける
編集グリッド内に多くのコンポーネントを配置した場合に表示する項目を絞り込む際に利用する
モーダル編集このコンポーネントの値を編集するためのモーダルが表示されます。コンポーネントに直接チェックするのではなくダイアログを表示してチェックできるようにするときにチェックを付ける
初期フォーカスのチェックやタブインデックスの値は無効になるので注意すること
[データタブ]
No.項目説明用途
1デフォルト値デフォルト値は、ユーザーとのインタラクションの前に、このフィールドに設定される値である。デフォルト値を指定すると、プレースホルダーのテキストがオーバーライドされます。デフォルトでチェックを付けておくかどうかを選択する
2再描画のタイミング他のコンポーネントが変更された場合、このコンポーネントを再描画する。これは、ラベルのようなコンポーネントの一部を補間する場合に有用である。フィールドが計算結果の値として設定されているときに、関連するコンポーネント名をセットする
3非表示時に値をクリアするフィールドが非表示の場合、値をクリアします。フィールドが非表示に設定された場合、入力値をクリアする
条件によって入力内容を変更したい場合にチェックを付ける
4カスタムデフォルト値フィールドの初期値をJavaScriptで設定する
単純な値ではなく他のコンポーネントの値と関連した値も設定可能
必ず
value = *; のように記述すること(はJavaScriptの式)
5カスタムデフォルト値フィールドの初期値をJSONLogicで設定するフィールドの初期値をJSONLogicで設定する
6計算結果フィールドの値をJavaScriptで設定する
入力させるのではなく他のコンポーネントの値と関連した値を設定するときに利用する
必ず
value = *; のように記述すること(はJavaScriptの式)
7計算結果フィールドの値をJSONLogicで設定する
8計算結果チェックすると、サーバー上で計算が実行されます。サーバーで計算した値で、送信した値を上書きしたい場合に有効です。画面上で計算した値を保存時にサーバー側で再計算させる場合にチェックを付ける
計算結果チェックすると、ユーザーが手動で計算値を上書きすることができるようになります。計算結果の値を編集可能にする場合にチェックを付ける
[検証タブ]
No.項目説明用途
1必須必須フィールドは、フォームを送信する前に入力する必要があります。必ずチェックを付けさせたい場合にチェックを付ける
 「入力タイプ」を”ラジオボタン”にした場合は同じラジオキーのもののいずれかにチェックを付ければ必須と見なされる
2エラーラベルエラーが発生したときに表示される、このフィールドのラベル。フィールドの入力チェックがエラーになった場合に表示されるメッセージのラベルの部分を設定する
 カスタムエラーメッセージが設定されている場合は無視される
3カスタムエラーメッセージエラーが発生した場合、エラーメッセージが表示されます。フィールドの入力チェックがエラーになった場合に表示されるメッセージを設定する
4カスタムバリデーション入力チェックの式をJavaScriptで記述する
入力チェックになる際のエラーメッセージも設定する
valid = (input === ‘ABCDE’) ? true : ‘入力値はABCDEであること’;
のようにvalidに判断式の結果を入力する
 カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
5JSONLogicの検証入力チェックの式をJSON形式で記述する
 カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
6カスタムエラー入力チェックの式をJSON形式で記述する
入力チェックの形式はキー値とエラーメッセージで構成して、複数の入力チェックを記述することが可能
 カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
[APIタブ]
No.項目説明用途
1プロパティ名APIエンドポイントにおけるこのフィールドの名前。フィールドのIDを表し、フォーム内でユニークな値になっている必要がある
 英数字、アンダースコア(_)、ダッシュ(-)、ドット(.)のみが利用できる。また、ダッシュ(-)、ドット(.)で終わることは出来ない。
2フィールドタグカスタムロジックで使用するフィールドにタグを付けます。
3カスタムプロパティこれにより、このコンポーネントの任意のカスタムプロパティを設定することができます。
4カスタムプロパティ
[条件タブ]
No.項目説明用途
シンプル
1このコンポーネントの表示条件コンポーネントの表示可否を決めます特定の条件時にフィールドを表示もしくは非表示にしたい場合に設定する
TRUEはフィールドを表示させる、FALSEはフィールドを非表示にする
2以下のフォームコンポーネントがフォーム内のコンポーネントを選択しますフィールドの表示可否を決める他のコンポーネント(フィールド)を選択する
3以下の値の場合コンポーネントの値を入力しますフィールドの表示可否を決める他のコンポーネント(フィールド)の値を入力する
高度な条件
4JavaScriptフィールドの表示可否式をJavaScriptで記述する
show = data.Subject == ”;
のようにshowに判断式の結果を入力する
5JSONLogicフィールドの表示可否式をJSON形式で記述する
[ロジックタブ]
No.項目説明用途
高度なロジック
1ロジック名ロジックの名前を入力する
2トリガー – 種類ロジックに設定したアクションを実行するためのトリガーを設定する 「シンプル」「JavaScript」「JSONロジック」「イベント名」のいずれかを選択する
3以下のフォームコンポーネントがアクションを実行するためのトリガーとなるコンポーネントを選択する
 「種類」で”シンプル”を選択したときのみ表示される
4以下の値の場合アクションを実行するためのトリガーとなるコンポーネントの値を選択する
 「種類」で”シンプル”を選択したときのみ表示される
5テキストエリアロジックに設定したアクションを実行するためのトリガーの式をJavaScriptで設定する
result = (data[‘mykey’] > 1);
のようにresultに結果を代入する
 「種類」で”JavaScript”を選択したときのみ表示される
6JSONロジックロジックに設定したアクションを実行するためのトリガーの式をJSON形式で設定する
 「種類」で”JSONロジック”を選択したときのみ表示される
7イベント名 「種類」で”イベント名”を選択したときのみ表示される
追加
8アクション名アクションの名前を入力する
種類アクションの種類を設定する
「プロパティ名」「値」「マージコンポーネントスキーマ」「カスタムアクション」のいずれかを選択する
コンポーネントのプロパティアクションの内容を設定する
 「種類」で”プロパティ名”を選択したときのみ表示される
値(JavaScript)値の内容をJavaScriptで記述する
 「種類」で”値”を選択したときのみ表示される
スキーマの定義
カスタムアクション(JavaScript)実行するアクションをJavaScriptで記述する
 「種類」で”カスタムアクション”を選択したときのみ表示される
状態の設定選択したコンポーネントの状態を設定する
TRUEかFALSEが選択可能
 「コンポーネントのプロパティ」が”非表示”、”必須”、”無効にする”の場合にのみ表示される
テキスト選択したコンポーネントのプロパティに該当する文字列を設定する
 「コンポーネントのプロパティ」が”ラベル”、”タイトル”、”接頭文字”、”接尾文字”、”ツールチップ”、”説明”、”プレースホルダー”、”入力マスク”、”CSSクラス”、”コンテナカスタムクラス”の場合にのみ表示される
[レイアウトタブ]
No.項目説明用途
HTML属性
1属性名コンポーネントのinput要素のHTML属性のマップを提供するHTMLのinputタグの属性名を設定する
例)maxlength、minlengthなど
consentFlow Designerで定義されていない値を設定したい場合に利用すると良い
2属性HTMLのinputタグの属性名に該当する値を設定する
例)属性名が”disabled”の場合、”true”を設定するとチェックが出来ない(無効化)状態になる
PDFオーバーレイ
3スタイルPDFでレンダリングする際にこのコンポーネントに適用されるべきカスタムスタイル。
4ページこのコンポーネントを配置するPDFページ
5このコンポーネントを配置するための、ページ内の左マージン。
6このコンポーネントを配置するページ内の上部マージン。
7コンポーネントの幅(ピクセル)
8高さコンポーネントの高さ(ピクセル)

◯選択ボックス

[表示タブ]
No.項目説明用途
1ラベルこのフィールドの隣に表示されるラベル。チェックボックスの概要を説明するため
2ラベルの位置このフィールドのラベルの位置ラベルの位置を決める
入力項目の上下左右のいずれかを設定可能
左右の場合、入力項目の可視範囲が狭まるので注意
3ラベルの幅行のラベルの幅(%)
 「ラベルの位置」が”左”もしくは”右”の時に設定可能
デフォルト値は30
ラベルの幅を調整したい場合に設定する
4ラベルの余白行のラベルマージンの幅をパーセントで指定します
 「ラベルの位置」が”左”もしくは”右”の時に設定可能
デフォルト値は3
ラベルと入力項目の間を少し空けたい場合に設定する
5オプションラベルの位置このフィールドのオプションのためのラベルの位置。チェックボックスの選択肢のラベルの位置を決める
6説明説明文は、入力フィールドの下に表示されるテキストです。入力項目に対する説明を表示
注意を引きたいときや入力内容を間違ってほしくないときに設定する
7ツールチップこのフィールドの横にツールチップを追加します。説明文を画面に表示せずに にマウスカーソルを当てたときだけ表示させたい場合に設定する
8カスタムCSSクラスこのコンポーネントに追加するカスタムCSSクラス。見た目を変更するためのCSSクラス名を設定する。
CSSはフォーム上に記述するほか、CSSファイルをフォームに適用させることも出来る
予約語もあり、例えば「nodisp」と設定すると非表示に設定される。
タブインデックスフォームのタブ順序を上書きするために、このコンポーネントのtabindex属性を設定します。フォームデータの入力時にタブキーを押したときに移動するコンポーネントの順番を設定する
0-32767の間で設定可能
ただし、0はタブキーを押しても移動されないので注意
インラインレイアウトチェックボックス/ラジオを水平に表示する。チェックを付けると、チェックボックスを横並びにして表示する
非表示隠しフィールドはまだフォームの一部ですが、視界から隠されています。画面上で非表示にしたい場合に設定
計算用の項目にしたいときに利用する
ラベルを隠すこのコンポーネントのラベル(ラベルがない場合はタイトル)を非表示にします。これにより、フォームビルダーでラベルを表示することはできますが、レンダリング時には表示されません。チェックボックスのラベルを非表示にする
初期フォーカスこのフィールドをこのフォームの最初にフォーカスされる要素にします。データ作成時に最初にこのフィールドにマウスカーソルがあたるようにする
 チェックを付けるとタブインデックスが利用できなくなるので注意すること
無効にするフォーム入力を無効にするフィールドに入力できなくする
計算結果の値を格納しておくときに利用する
テーブルビュー投稿のテーブルビュー内でこの値を表示します。編集グリッド内に格納したときにヘッダー行にこのコンポーネントを表示するときにチェックを付ける
 編集グリッド内に多くのコンポーネントを配置した場合に表示する項目を絞り込む際に利用する
モーダル編集このコンポーネントの値を編集するためのモーダルが表示されます。コンポーネントに直接入力するのではなくダイアログを表示して入力するときにチェックを付ける
 初期フォーカスのチェックやタブインデックスの値は無効になるので注意すること
[データタブ]
No.項目説明用途
1デフォルト値デフォルト値は、ユーザーとのインタラクションの前に、このフィールドに設定される値である。デフォルト値を指定すると、プレースホルダーのテキストがオーバーライドされますデフォルトでどの項目にチェックを付けておくかどうかを選択する
2ラベルこのフィールドで選択可能なラジオボタンの値。値とは、フォームデータと共に送信されるテキストです。ラベルは、フォームのラジオボタンの横に表示されるテキストです。チェックボックスの選択肢のラベルを設定する
 値とショートカットと一緒に設定する
3チェックボックスの選択肢の保存時の値を設定する
 ラベルとショートカットと一緒に設定する
 この項目は必ず設定すること
4ショートカットキーボード入力でチェックボックスを設定させたい場合に設定する
 A-Zを選択可能
 CtrlとAltを押しながら設定した値を押すことでチェックを付けたり外したり出来る
 一カ所で設定すると他のチェックボックスやラジオボタン、選択コンポーネントではその値で設定できない
5再描画のタイミング他のコンポーネントが変更された場合、このコンポーネントを再描画する。これは、ラベルのようなコンポーネントの一部を補間する場合に有用である。フィールドが計算結果の値として設定されているときに、関連するコンポーネント名をセットする
6非表示時に値をクリアするフィールドが非表示の場合、値をクリアします。フィールドが非表示に設定された場合、入力値をクリアする
条件によって入力内容を変更したい場合にチェックを付ける
カスタムデフォルト値フィールドの初期値をJavaScriptで設定する
単純な値ではなく他のコンポーネントの値と関連した値も設定可能
必ず
value = *; のように記述すること(はJavaScriptの式)
7カスタムデフォルト値フィールドの初期値をJSONLogicで設定する
計算結果フィールドの値をJavaScriptで設定する
入力させるのではなく他のコンポーネントの値と関連した値を設定するときに利用する
必ず
value = *; のように記述すること(はJavaScriptの式)
8計算結果フィールドの値をJSONLogicで設定する
サーバーで値を再計算チェックすると、サーバー上で計算が実行されます。サーバーで計算した値で、送信した値を上書きしたい場合に有効です。画面上で計算した値を保存時にサーバー側で再計算させる場合にチェックを付ける
計算された値を手動で書き換え可能にするチェックすると、ユーザーが手動で計算値を上書きすることができるようになります。計算結果の値を編集可能にする場合にチェックを付ける
[検証タブ]
No.項目説明用途
1必須必須フィールドは、フォームを送信する前に入力する必要があります。いずれかの選択肢に必ずチェックを付けさせたい場合にチェックを付ける
2利用可能な値のみを許可する選択した値が利用可能なオプションであることを確認するために、検証チェックを行う場合は、これにチェックを入れます。
3エラーラベルエラーが発生したときに表示される、このフィールドのラベル。フィールドの入力チェックがエラーになった場合に表示されるメッセージのラベルの部分を設定する
 カスタムエラーメッセージが設定されている場合は無視される
4カスタムエラーメッセージエラーが発生した場合、エラーメッセージが表示されます。フィールドの入力チェックがエラーになった場合に表示されるメッセージを設定する
5最小チェック数フォームを送信する前に必要な最小限のチェックボックス。チェックボックスの選択肢で最低限チェックする数を設定する
6チェックした最大数フォームを送信する前に可能な最大チェックボックス。チェックボックスの選択肢でチェックできる最大数を設定する
 手動で設定する場合、ここで設定した項目を超えてチェックすることは出来ない(他の項目が無効化される)
7最低限チェックすべきエラーメッセージ最小限の項目がチェックされていない場合に表示されるエラーメッセージ。チェックした数が「最小チェック数」に満たない場合に表示するメッセージを設定する
8エラーメッセージの最大チェック数最大項目数をチェックするとエラーメッセージが表示されます。「デフォルト値」でチェックした数が「チェックした最大数」を超えている場合に表示するメッセージを設定する
カスタムバリデーション入力チェックの式をJavaScriptで記述する
入力チェックになる際のエラーメッセージも設定する
valid = (input === ‘ABCDE’) ? true : ‘入力値はABCDEであること’;
のようにvalidに判断式の結果を入力する
 カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
JSONLogicの検証入力チェックの式をJSON形式で記述する
 カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
カスタムエラー入力チェックの式をJSON形式で記述する
入力チェックの形式はキー値とエラーメッセージで構成して、複数の入力チェックを記述することが可能
 カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
[APIタブ]
No.項目説明用途
1プロパティ名APIエンドポイントにおけるこのフィールドの名前。フィールドのIDを表し、フォーム内でユニークな値になっている必要がある
英数字、アンダースコア(_)、ダッシュ(-)、ドット(.)のみが利用できる。また、ダッシュ(-)、ドット(.)で終わることは出来ない。
2フィールドタグカスタムロジックで使用するフィールドにタグを付けます。
3カスタムプロパティこれにより、このコンポーネントの任意のカスタムプロパティを設定することができます。
4カスタムプロパティ
[条件タブ]
No.項目説明用途
シンプル
1このコンポーネントの表示条件コンポーネントの表示可否を決めます特定の条件時にフィールドを表示もしくは非表示にしたい場合に設定する
TRUEはフィールドを表示させる、FALSEはフィールドを非表示にする
2以下のフォームコンポーネントがフォーム内のコンポーネントを選択しますフィールドの表示可否を決める他のコンポーネント(フィールド)を選択する
3以下の値の場合コンポーネントの値を入力しますフィールドの表示可否を決める他のコンポーネント(フィールド)の値を入力する
高度な条件
4JavaScriptフィールドの表示可否式をJavaScriptで記述する
show = data.Subject == ”;
のようにshowに判断式の結果を入力する
5JSONLogicフィールドの表示可否式をJSON形式で記述する
[ロジックタブ]
No.項目説明用途
高度なロジック
1ロジック名ロジックの名前を入力する
2トリガー – 種類ロジックに設定したアクションを実行するためのトリガーを設定する
「シンプル」「JavaScript」「JSONロジック」「イベント名」のいずれかを選択する
3以下のフォームコンポーネントがアクションを実行するためのトリガーとなるコンポーネントを選択する
 「種類」で”シンプル”を選択したときのみ表示される
4以下の値の場合アクションを実行するためのトリガーとなるコンポーネントの値を選択する
 「種類」で”シンプル”を選択したときのみ表示される
5テキストエリアロジックに設定したアクションを実行するためのトリガーの式をJavaScriptで設定する
result = (data[‘mykey’] > 1);
のようにresultに結果を代入する
 「種類」で”JavaScript”を選択したときのみ表示される
6JSONロジックロジックに設定したアクションを実行するためのトリガーの式をJSON形式で設定する
 「種類」で”JSONロジック”を選択したときのみ表示される
7イベント名 「種類」で”イベント名”を選択したときのみ表示される
追加
8アクション名アクションの名前を入力する
種類アクションの種類を設定する
「プロパティ名」「値」「マージコンポーネントスキーマ」「カスタムアクション」のいずれかを選択する
コンポーネントのプロパティアクションの内容を設定する
 「種類」で”プロパティ名”を選択したときのみ表示される
値(JavaScript)値の内容をJavaScriptで記述する
 「種類」で”値”を選択したときのみ表示される
スキーマの定義
カスタムアクション(JavaScript)実行するアクションをJavaScriptで記述する
 「種類」で”カスタムアクション”を選択したときのみ表示される
状態の設定選択したコンポーネントの状態を設定する
TRUEかFALSEが選択可能
 「コンポーネントのプロパティ」が”非表示”、”必須”、”無効にする”の場合にのみ表示される
テキスト選択したコンポーネントのプロパティに該当する文字列を設定する
 「コンポーネントのプロパティ」が”ラベル”、”タイトル”、”接頭文字”、”接尾文字”、”ツールチップ”、”説明”、”プレースホルダー”、”入力マスク”、”CSSクラス”、”コンテナカスタムクラス”の場合にのみ表示される
[レイアウトタブ]
No.項目説明用途
HTML属性
1属性名コンポーネントのinput要素のHTML属性のマップを提供するHTMLのinputタグの属性名を設定する
例)maxlength、minlengthなど
 consentFlow Designerで定義されていない値を設定したい場合に利用すると良い
2属性HTMLのinputタグの属性名に該当する値を設定する
例)属性名が”disabled”の場合、”true”を設定するとチェックが出来ない(無効化)状態になる
PDFオーバーレイ
3スタイルPDFでレンダリングする際にこのコンポーネントに適用されるべきカスタムスタイル
4ページこのコンポーネントを配置するPDFページ
5このコンポーネントを配置するための、ページ内の左マージン
6このコンポーネントを配置するページ内の上部マージン
7コンポーネントの幅(ピクセル)
8高さコンポーネントの高さ(ピクセル)

◯選択

[表示タブ]
No.項目説明用途
1ラベルこのフィールドの隣に表示されるラベル。入力項目の概要を説明するため
2ラベルの位置このフィールドのラベルの位置ラベルの位置を決める
入力項目の上下左右のいずれかを設定可能
左右の場合、入力項目の可視範囲が狭まるので注意
3ウィジェットの種類使用したいウィジェットの種類を選択します。
 「ChoicesJS」または「HTML5」が選択できます
選択コンポーネントの表示形式を設定する
ChoicesJSを選択するとよりスタイリッシュなコンボボックス形式で表示させられる
4ラベルの幅行のラベルの幅(%)
 「ラベルの位置」が”左”もしくは”右”の時に設定可能
デフォルト値は30
ラベルの幅を調整したい場合に設定する
5ラベルの余白行のラベルマージンの幅をパーセントで指定します
 「ラベルの位置」が”左”もしくは”右”の時に設定可能
デフォルト値は3
ラベルと入力項目の間を少し空けたい場合に設定する
6プレースホルダーこのフィールドが空のときに表示されるプレースホルダテキスト。入力項目にはどのような値を入力するのかを説明するのに利用
サンプルを設定しておくと良い
7説明説明文は、入力フィールドの下に表示されるテキストです。入力項目に対する説明を表示
注意を引きたいときや入力内容を間違ってほしくないときに設定する
8ツールチップこのフィールドの横にツールチップを追加します。説明文を画面に表示せずに にマウスカーソルを当てたときだけ表示させたい場合に設定する
カスタムCSSクラスこのコンポーネントに追加するカスタムCSSクラス。見た目を変更するためのCSSクラス名を設定する。
CSSはフォーム上に記述するほか、CSSファイルをフォームに適用させることも出来る
予約語もあり、例えば「nodisp」と設定すると非表示に設定される。
タブインデックスフォームのタブ順序を上書きするために、このコンポーネントのtabindex属性を設定します。フォームデータの入力時にタブキーを押したときに移動するコンポーネントの順番を設定する
0-32767の間で設定可能
ただし、0はタブキーを押しても移動されないので注意
非表示隠しフィールドはまだフォームの一部ですが、視界から隠されています。画面上で非表示にしたい場合に設定
計算用の項目にしたいときに利用する
ラベルを隠すこのコンポーネントのラベル(ラベルがない場合はタイトル)を非表示にします。これにより、フォームビルダーでラベルを表示することはできますが、レンダリング時には表示されません。入力項目のラベルを非表示にする
ユニークなオプションユニークなドロップダウン・オプションのみを表示するチェックを付けると選択肢の値に同じものがある場合は重複した選択肢は表示しないようになる(一つだけになる)
初期フォーカスこのフィールドをこのフォームの最初にフォーカスされる要素にします。データ作成時に最初にこのフィールドにマウスカーソルがあたるようにする
 チェックを付けるとタブインデックスが利用できなくなるので注意すること
無効にするフォーム入力を無効にするフィールドに入力できなくする
計算結果の値を格納しておくときに利用する
テーブルビュー投稿のテーブルビュー内でこの値を表示します。編集グリッド内に格納したときにヘッダー行にこのコンポーネントを表示するときにチェックを付ける
 編集グリッド内に多くのコンポーネントを配置した場合に表示する項目を絞り込む際に利用する
モーダル編集このコンポーネントの値を編集するためのモーダルが表示されます。コンポーネントに直接入力するのではなくダイアログを表示して入力するときにチェックを付ける
 初期フォーカスのチェックやタブインデックスの値は無効になるので注意すること
[データタブ](データの種類:値にした場合)
No.項目説明用途
1複数値このフィールドに複数の値を入力できるようにします。複数の項目を選択できるようにする
 「ウィジェットの種類」の値により、コンボボックスの形状が変化するので注意すること
2データソースの種類選択データに使用するソースです。値] には、独自の値やラベルを指定できます。JSON:生のJSONデータを指定します。URL: JSONデータを取得するためのURLを指定します。選択肢の値をどのように設定するかを決める
“値”を選択した場合はコンポーネント内のプロパティで選択肢を設定するが、それ以外の場合は外部から選択肢を取得することになる
3デフォルト値デフォルト値は、ユーザーとのインタラクションの前に、このフィールドに設定される値である。デフォルト値を指定すると、プレースホルダーのテキストがオーバーライドされます。フィールドの初期値を設定する
複数値を許可している場合は初期値も複数設定できる
データソースの値
4ラベルデータソースとして使用する値。ラベルは、選択フィールドに表示されます。値は、投稿と同時に保存された対応する値です。選択肢のラベルを設定する
 値とペアで設定する
 この項目は必ず設定すること
5選択肢の保存時の値を設定する
 ラベルペアで設定する
 この項目は必ず設定すること
6保存方法データを保存するタイプ。autotype以外を選択した場合は、強制的にその型になります。選択した値のデータ型を設定する
7IDパスセレクトオプションIDへのパス。
8項目テンプレート結果データ項目用のHTMLテンプレート選択肢をどのように表示するのかをHTMLで記述する
デフォルト値は
{{ item.label }}
itemは選択コンポーネントのオブジェクトを表す
labelは[データソースの値][ラベル]を表す
[データソースの値][値]はvalue(item.value)となる
 データソースの値は{{}}で囲う必要があるので注意すること
次の時オプションを更新他のフィールドが変更されたときにデータをリフレッシュします。更新のトリガーとなるフィールドを選択する
フォーカスが離れた時にオプションを更新別のフィールドが青くなったときにデータをリフレッシュします。更新のトリガーとなるフィールドを選択する
更新時の値をクリアするオプションRefresh Onフィールドが変更されると、このコンポーネント値をクリアします。チェックを付けると「次の時オプションを更新」及び「フォーカスが離れた時にオプションを更新」で値を設定している場合に、自フィールドの値をクリアする
静的検索を有効にするチェックすると、選択ドロップダウンで、提供された静的なリスト内で検索できるようになります。チェックを付けると選択フィールド内で検索文字列を入力して選択肢を検索できるようになる
検索しきい値マッチングアルゴリズムはどの時点であきらめるのか。0.0の閾値は完全一致を必要とし、1.0の閾値は何でも一致させることができる。検索のしきい値を0~1の間で設定する
1に近くなればなるほどヒットする値の条件は緩くなる
0に近くなればなるほどヒットする値の条件は厳しくなる
 0を設定すると完全一致となっているが、実際には検索結果が取得できないので注意すること
読取り専用値Read Onlyモード時に値のみを表示する場合は、このチェックボックスをオンにします。チェックを付けると、読込モードのときに選択した[データソースの値][値]が表示される
 実際にどのような値が格納されているのかを確認したい場合に利用すると良い
Choices.jsのオプションSelectコンポーネント(Choices JS)のオプションとして使用する生のJSONオブジェクト。Choices.JSのオプションをJSON形式で選択する
サンプルは以下の通り。
{
“allowHTML”: true,
“searchResultLimit”: 20,
“searchPlaceholderValue”: “検索ワード”,
“noResultsText”: “一致する情報は見つかりません”,
“itemSelectText”: “選択”,
“shouldSort”: false
}
完全一致検索を使用する検索アルゴリズムの閾値を無効にする
非表示時に値をクリアするフィールドが非表示の場合、値をクリアします。フィールドが非表示に設定された場合、入力値をクリアする
条件によって入力内容を変更したい場合にチェックを付ける
カスタムデフォルト値フィールドの初期値をJavaScriptで設定する
単純な値ではなく他のコンポーネントの値と関連した値も設定可能
必ず
value = *; のように記述すること(はJavaScriptの式)
カスタムデフォルト値フィールドの初期値をJSONLogicで設定する
計算結果フィールドの値をJavaScriptで設定する
入力させるのではなく他のコンポーネントの値と関連した値を設定するときに利用する
必ず
value = *; のように記述すること(はJavaScriptの式)
計算結果フィールドの値をJSONLogicで設定する
サーバーで値を再計算チェックすると、サーバー上で計算が実行されます。サーバーで計算した値で、送信した値を上書きしたい場合に有効です。画面上で計算した値を保存時にサーバー側で再計算させる場合にチェックを付ける
計算された値を手動で書き換え可能にするチェックすると、ユーザーが手動で計算値を上書きすることができるようになります。計算結果の値を編集可能にする場合にチェックを付ける
[データタブ](データの種類:URLの場合)
No.項目説明用途
1複数値このフィールドに複数の値を入力できるようにします。複数の項目を選択できるようにする
 「ウィジェットの種類」の値により、コンボボックスの形状が変化するので注意すること
2データソースの種類選択データに使用するソースです。値] には、独自の値やラベルを指定できます。JSON:生のJSONデータを指定します。URL: JSONデータを取得するためのURLを指定します。選択肢の値をどのように設定するかを決める
“値”を選択した場合はコンポーネント内のプロパティで選択肢を設定するが、それ以外の場合は外部から選択肢を取得することになる
3デフォルト値デフォルト値は、ユーザーとのインタラクションの前に、このフィールドに設定される値である。デフォルト値を指定すると、プレースホルダーのテキストがオーバーライドされます。フィールドの初期値を設定する
複数値を許可している場合は初期値も複数設定できる
データソースのURLデータソースとして使用するJSON配列を返すURLです。選択肢の値を取得するためのURLを設定する
 「データソースの種類」を”URL”にしたときのみ設定可能
遅延ロードデータ設定すると、このコントロールがフォーカス内になるまで、URL へのリクエストは発行されません。 これにより、コントロールがアクティブ化された場合にのみ API が起動されるフォーム上に多くの選択ドロップダウンがある場合、パフォーマンスが向上する可能性があります。通常はチェックを付けておくこと
 「データソースの種類」を”URL”もしくは”リソース”にしたときのみ設定可能
リクエストヘッダurl へのリクエストと共に送信されるべきヘッダを設定します。これは認証に便利です。「データソースのURL」に渡すリクエストヘッダのキーを設定する
リクエストヘッダ「データソースのURL」に渡すリクエストヘッダの値を設定する
データパスソースデータ内のプロパティで、反復可能な項目が存在します。例:results.itemsまたはresults[0].items
保存方法データを保存するタイプ。autotype以外を選択した場合は、強制的にその型になります。選択した値のデータ型を設定する
7IDパスセレクトオプションIDへのパス。
値のプロパティ選択値として使用する、データソース内の各項目のプロパティ。指定しない場合は、項目そのものが使用されます。「データソースのURL」で取得したJSON値の中から選択肢として使用する値の項目名を設定する
指定しない場合はJSON自体の値が保存される
レスポンスの制限を無効にする有効にすると、リクエストはクエリ文字列に limit および skip オプションを含みません。
検索クエリ名検索結果をフィルタリングするためのリクエストを送信する際に使用する検索クエリストリングパラメータの名前。URL のサーバーがこのクエリパラメータを処理する必要があります。
検索要求の遅延検索フィールドに入力された最後の文字から、検索要求が送信されるまでの遅延時間(秒)。
フィルタークエリクエリパラメータを使用した追加のフィルタリングを行う場合に使用します。「データソースのURL」で取得したJSON値をフィルタリングする際の式を記述する
ソートクエリクエリパラメータを使用して、さらにソートする場合に使用します。
限度額リクエストする項目や表示する項目の数を制限する場合に使用します。
8項目テンプレート結果データ項目用のHTMLテンプレート選択肢をどのように表示するのかをHTMLで記述する
デフォルト値は
{{ item.xxxx }}
itemは選択コンポーネントのオブジェクトを表す
通常、[データソースのURL] で取得されたJSONの値を指す
xxxxはJSONの項目名を設定する
 item.xxxxの値は{{}}で囲う必要があるので注意すること
次の時オプションを更新他のフィールドが変更されたときにデータをリフレッシュします。更新のトリガーとなるフィールドを選択する
フォーカスが離れた時にオプションを更新別のフィールドが青くなったときにデータをリフレッシュします。更新のトリガーとなるフィールドを選択する
更新時の値をクリアするオプションRefresh Onフィールドが変更されると、このコンポーネント値をクリアします。チェックを付けると「次の時オプションを更新」及び「フォーカスが離れた時にオプションを更新」で値を設定している場合に、自フィールドの値をクリアする
静的検索を有効にするチェックすると、選択ドロップダウンで、提供された静的なリスト内で検索できるようになります。チェックを付けると選択フィールド内で検索文字列を入力して選択肢を検索できるようになる
検索しきい値マッチングアルゴリズムはどの時点であきらめるのか。0.0の閾値は完全一致を必要とし、1.0の閾値は何でも一致させることができる。検索のしきい値を0~1の間で設定する
1に近くなればなるほどヒットする値の条件は緩くなる
0に近くなればなるほどヒットする値の条件は厳しくなる
 0を設定すると完全一致となっているが、実際には検索結果が取得できないので注意すること
フォルミオ認証リクエストに Formio Authentication を使用する場合は、これにチェックを入れます。Form.ioの認証サービスを利用する場合はチェックを付ける
読取り専用値Read Onlyモード時に値のみを表示する場合は、このチェックボックスをオンにします。チェックを付けると、読込モードのときに選択した[データソースの値][値]が表示される
 実際にどのような値が格納されているのかを確認したい場合に利用すると良い
Choices.jsのオプションSelectコンポーネント(Choices JS)のオプションとして使用する生のJSONオブジェクト。Choices.JSのオプションをJSON形式で選択する
サンプルは以下の通り。
{
“allowHTML”: true,
“searchResultLimit”: 20,
“searchPlaceholderValue”: “検索ワード”,
“noResultsText”: “一致する情報は見つかりません”,
“itemSelectText”: “選択”,
“shouldSort”: false
}
完全一致検索を使用する検索アルゴリズムの閾値を無効にする
リクエスト結果をキャッシュに保存しないリクエストとその結果をキャッシュに保存したくない場合はチェックを入れます。デフォルトでは、キャッシュは保存され、セレクトが同じURLに同じパレメータでリクエストしようとすると、キャッシュされたデータが返されます。これによりパフォーマンスを向上させることができますが、リモートソースのデータが頻繁に変更され、常に最新の状態に保つ必要がある場合は、このオプションのチェックを外してください。[データソースのURL] で取得されたJSONの値をキャッシュしたくない場合はチェックを付ける
非表示時に値をクリアするフィールドが非表示の場合、値をクリアします。フィールドが非表示に設定された場合、入力値をクリアする
条件によって入力内容を変更したい場合にチェックを付ける
カスタムデフォルト値フィールドの初期値をJavaScriptで設定する
単純な値ではなく他のコンポーネントの値と関連した値も設定可能
必ず
value = *; のように記述すること(はJavaScriptの式)
カスタムデフォルト値フィールドの初期値をJSONLogicで設定する
計算結果フィールドの値をJavaScriptで設定する
入力させるのではなく他のコンポーネントの値と関連した値を設定するときに利用する
必ず
value = *; のように記述すること(はJavaScriptの式)
計算結果フィールドの値をJSONLogicで設定する
サーバーで値を再計算チェックすると、サーバー上で計算が実行されます。サーバーで計算した値で、送信した値を上書きしたい場合に有効です。画面上で計算した値を保存時にサーバー側で再計算させる場合にチェックを付ける
計算された値を手動で書き換え可能にするチェックすると、ユーザーが手動で計算値を上書きすることができるようになります。計算結果の値を編集可能にする場合にチェックを付ける
[データタブ](データの種類:リソースの場合)
No.項目説明用途
1複数値このフィールドに複数の値を入力できるようにします。複数の項目を選択できるようにする
 「ウィジェットの種類」の値により、コンボボックスの形状が変化するので注意すること
2データソースの種類選択データに使用するソースです。値] には、独自の値やラベルを指定できます。JSON:生のJSONデータを指定します。URL: JSONデータを取得するためのURLを指定します。選択肢の値をどのように設定するかを決める
“値”を選択した場合はコンポーネント内のプロパティで選択肢を設定するが、それ以外の場合は外部から選択肢を取得することになる
3デフォルト値デフォルト値は、ユーザーとのインタラクションの前に、このフィールドに設定される値である。デフォルト値を指定すると、プレースホルダーのテキストがオーバーライドされます。フィールドの初期値を設定する
複数値を許可している場合は初期値も複数設定できる
リソースこのフィールドで使用されるリソース。
遅延ロードデータ設定すると、このコントロールがフォーカスされるまで URL へのリクエストは発生しません。これは、フォーム上に多くの Select ドロップダウンがあり、コントロールがアクティブになったときにのみ API が起動するような場合に、パフォーマンスを向上させることができます。チェックを付けるとこのフィールドがフォーカスされたときにデータがロードされるようになり、パフォーマンスの向上に役立つ
保存方法データを保存するタイプ。autotype以外を選択した場合は、強制的にその型になります。選択した値のデータ型を設定する
7IDパスセレクトオプションIDへのパス。
フィールドを選択するオプションの一部として返すリソース上のプロパティ。プロパティ名はカンマで区切ってください。空白のままだと、すべてのプロパティが返されます。
検索クエリ名検索結果をフィルタリングするためのリクエストを送信する際に使用する検索クエリストリングパラメータの名前。URL のサーバーがこのクエリパラメータを処理する必要があります。
検索要求の遅延検索フィールドに入力された最後の文字から、検索要求が送信されるまでの遅延時間(秒)。
フィルタークエリクエリパラメータを使用した追加のフィルタリングを行う場合に使用します。
ソートクエリクエリパラメータを使用して、さらにソートする場合に使用します。
限度額リクエストする項目や表示する項目の数を制限する場合に使用します。
8項目テンプレート結果データ項目用のHTMLテンプレート選択肢をどのように表示するのかをHTMLで記述する
デフォルト値は
{{ item.label }}
itemは選択コンポーネントのオブジェクトを表す
labelは[データソースの値][ラベル]を表す
[データソースの値][値]はvalue(item.value)となる
 データソースの値は{{}}で囲う必要があるので注意すること
次の時オプションを更新他のフィールドが変更されたときにデータをリフレッシュします。
フォーカスが離れた時にオプションを更新別のフィールドが青くなったときにデータをリフレッシュします。更新のトリガーとなるフィールドを選択する
更新時の値をクリアするオプションRefresh Onフィールドが変更されると、このコンポーネント値をクリアします。チェックを付けると「次の時オプションを更新」及び「フォーカスが離れた時にオプションを更新」で値を設定している場合に、自フィールドの値をクリアする
静的検索を有効にするチェックすると、選択ドロップダウンで、提供された静的なリスト内で検索できるようになります。チェックを付けると選択フィールド内で検索文字列を入力して選択肢を検索できるようになる
検索しきい値マッチングアルゴリズムはどの時点であきらめるのか。0.0の閾値は完全一致を必要とし、1.0の閾値は何でも一致させることができる。検索のしきい値を0~1の間で設定する
1に近くなればなるほどヒットする値の条件は緩くなる
0に近くなればなるほどヒットする値の条件は厳しくなる
 0を設定すると完全一致となっているが、実際には検索結果が取得できないので注意すること
フォルミオ認証リクエストに Formio Authentication を使用する場合は、これにチェックを入れます。Form.ioの認証サービスを利用する場合はチェックを付ける
読取り専用値Read Onlyモード時に値のみを表示する場合は、このチェックボックスをオンにします。チェックを付けると、読込モードのときに選択した[データソースの値][値]が表示される
 実際にどのような値が格納されているのかを確認したい場合に利用すると良い
Choices.jsのオプションSelectコンポーネント(Choices JS)のオプションとして使用する生のJSONオブジェクト。Choices.JSのオプションをJSON形式で選択する
サンプルは以下の通り。
{
“allowHTML”: true,
“searchResultLimit”: 20,
“searchPlaceholderValue”: “検索ワード”,
“noResultsText”: “一致する情報は見つかりません”,
“itemSelectText”: “選択”,
“shouldSort”: false
}
完全一致検索を使用する検索アルゴリズムの閾値を無効にする
リクエスト結果をキャッシュに保存しないリクエストとその結果をキャッシュに保存したくない場合はチェックを入れます。デフォルトでは、キャッシュは保存され、セレクトが同じURLに同じパレメータでリクエストしようとすると、キャッシュされたデータが返されます。これによりパフォーマンスを向上させることができますが、リモートソースのデータが頻繁に変更され、常に最新の状態に保つ必要がある場合は、このオプションのチェックを外してください。[データソースのURL] で取得されたJSONの値をキャッシュしたくない場合はチェックを付ける
非表示時に値をクリアするフィールドが非表示の場合、値をクリアします。フィールドが非表示に設定された場合、入力値をクリアする
条件によって入力内容を変更したい場合にチェックを付ける
カスタムデフォルト値フィールドの初期値をJavaScriptで設定する
単純な値ではなく他のコンポーネントの値と関連した値も設定可能
必ず
value = *; のように記述すること(はJavaScriptの式)
カスタムデフォルト値フィールドの初期値をJSONLogicで設定する
計算結果フィールドの値をJavaScriptで設定する
入力させるのではなく他のコンポーネントの値と関連した値を設定するときに利用する
必ず
value = *; のように記述すること(はJavaScriptの式)
計算結果フィールドの値をJSONLogicで設定する
サーバーで値を再計算チェックすると、サーバー上で計算が実行されます。サーバーで計算した値で、送信した値を上書きしたい場合に有効です。画面上で計算した値を保存時にサーバー側で再計算させる場合にチェックを付ける
計算された値を手動で書き換え可能にするチェックすると、ユーザーが手動で計算値を上書きすることができるようになります。計算結果の値を編集可能にする場合にチェックを付ける
[データタブ](データの種類:リソースの場合)
No.項目説明用途
1
2
3
4
5
6
7
8
[データタブ](データの種類:カスタムの場合)
No.項目説明用途
1
2
3
4
5
6
7
8
[データタブ](データの種類:生のJSONの場合)
No.項目説明用途
1
2
3
4
5
6
7
8
[検証タブ]
No.項目説明用途
1検証のタイミングこのコンポーネントがフロントエンド検証をいつトリガーするかを決定します。フィールドの入力チェックを行うタイミングを設定する
「変更時」はフィールドの値が変更されたとき、「フォーカスが離れた時」はフィールドの外をクリックしてフィールドからマウスカーソルが消えたとき
2必須必須フィールドは、フォームを送信する前に入力する必要があります。フィールドに値を必ず入力させたい場合にチェックを付ける
3利用可能な値のみを許可する選択した値が利用可能なオプションであることを確認するための検証チェックを行う場合は、このチェックボックスをオンにします(同期値のみ)。
4ユニークな値このフィールドに送信されるデータが一意であり、以前に送信されたことがないことを確認します。
5エラーラベルエラーが発生したときに表示される、このフィールドのラベル。フィールドの入力チェックがエラーになった場合に表示されるメッセージのラベルの部分を設定する
 カスタムエラーメッセージが設定されている場合は無視される
6カスタムエラーメッセージエラーが発生した場合、エラーメッセージが表示されます。フィールドの入力チェックがエラーになった場合に表示されるメッセージを設定する
7カスタムバリデーション入力チェックの式をJavaScriptで記述する
入力チェックになる際のエラーメッセージも設定する
valid = (input === ‘ABCDE’) ? true : ‘入力値はABCDEであること’;
のようにvalidに判断式の結果を入力する
 カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
8JSONLogicの検証入力チェックの式をJSON形式で記述する
 カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
カスタムエラー入力チェックの式をJSON形式で記述する
入力チェックの形式はキー値とエラーメッセージで構成して、複数の入力チェックを記述することが可能
 カスタムエラーメッセージが設定されている場合、エラーメッセージはカスタムエラーメッセージの値が適用される
[APIタブ]
No.項目説明用途
1プロパティ名APIエンドポイントにおけるこのフィールドの名前。フィールドのIDを表し、フォーム内でユニークな値になっている必要がある
 英数字、アンダースコア(_)、ダッシュ(-)、ドット(.)のみが利用できる。また、ダッシュ(-)、ドット(.)で終わることは出来ない。
2フィールドタグカスタムロジックで使用するフィールドにタグを付けます
 入力したらEnterキーを押すと確定します。
カスタムプロパティ
3キーこれにより、このコンポーネントの任意のカスタムプロパティを設定することができます。
4
[条件タブ]
No.項目説明用途
シンプル
1このコンポーネントの表示条件コンポーネントの表示可否を決めます特定の条件時にフィールドを表示もしくは非表示にしたい場合に設定する
TRUEはフィールドを表示させる、FALSEはフィールドを非表示にする
2以下のフォームコンポーネントがフォーム内のコンポーネントを選択しますフィールドの表示可否を決める他のコンポーネント(フィールド)を選択する
3以下の値の場合コンポーネントの値を入力しますフィールドの表示可否を決める他のコンポーネント(フィールド)の値を入力する
高度な条件
4JavaScriptフィールドの表示可否式をJavaScriptで記述する
show = data.Subject == ”;
のようにshowに判断式の結果を入力する
5JSONLogicフィールドの表示可否式をJSON形式で記述する
6
7
8
[ロジックタブ]
No.項目説明用途
高度なロジック
1ロジック名ロジックの名前を入力する
2トリガー – 種類ロジックに設定したアクションを実行するためのトリガーを設定する
「シンプル」「JavaScript」「JSONロジック」「イベント名」のいずれかを選択する
3以下のフォームコンポーネントがアクションを実行するためのトリガーとなるコンポーネントを選択する
 「種類」で”シンプル”を選択したときのみ表示される
4以下の値の場合アクションを実行するためのトリガーとなるコンポーネントの値を選択する
 「種類」で”シンプル”を選択したときのみ表示される
5テキストエリアロジックに設定したアクションを実行するためのトリガーの式をJavaScriptで設定する
result = (data[‘mykey’] > 1);
のようにresultに結果を代入する
 「種類」で”JavaScript”を選択したときのみ表示される
6JSONロジックロジックに設定したアクションを実行するためのトリガーの式をJSON形式で設定する
 「種類」で”JSONロジック”を選択したときのみ表示される
7イベント名 「種類」で”イベント名”を選択したときのみ表示される
追加
8アクション名アクションの名前を入力する
種類アクションの種類を設定する
「プロパティ名」「値」「マージコンポーネントスキーマ」「カスタムアクション」のいずれかを選択する
コンポーネントのプロパティアクションの内容を設定する
 「種類」で”プロパティ名”を選択したときのみ表示される
値(JavaScript)値の内容をJavaScriptで記述する
 「種類」で”値”を選択したときのみ表示される
スキーマの定義
カスタムアクション(JavaScript)実行するアクションをJavaScriptで記述する
 「種類」で”カスタムアクション”を選択したときのみ表示される
状態の設定選択したコンポーネントの状態を設定する
TRUEかFALSEが選択可能
 「コンポーネントのプロパティ」が”非表示”、”必須”、”無効にする”の場合にのみ表示される
テキスト選択したコンポーネントのプロパティに該当する文字列を設定する
 「コンポーネントのプロパティ」が”ラベル”、”タイトル”、”接頭文字”、”接尾文字”、”ツールチップ”、”説明”、”プレースホルダー”、”入力マスク”、”CSSクラス”、”コンテナカスタムクラス”の場合にのみ表示される
[レイアウトタブ]
No.項目説明用途
HTML属性
1属性名コンポーネントのinput要素のHTML属性のマップを提供するHTMLのinputタグの属性名を設定する
例)maxlength、minlengthなど
 consentFlow Designerで定義されていない値を設定したい場合に利用すると良い
2属性HTMLのinputタグの属性名に該当する値を設定する
例)属性名が”maxlength”の場合、10を設定すると最大入力文字数が10になる
PDFオーバーレイスタイルPDFでレンダリングする際にこのコンポーネントに適用されるべきカスタムスタイル
3ページこのコンポーネントを配置するPDFページ
4このコンポーネントを配置するための、ページ内の左マージン
5このコンポーネントを配置するページ内の上部マージン
6コンポーネントの幅(ピクセル)
7高さコンポーネントの高さ(ピクセル)
8

◯ラジオボタン

[表示タブ]
No.項目説明用途
1ラベルこのフィールドの隣に表示されるラベル。入力項目の概要を説明するため
2ラベルの位置このフィールドのラベルの位置ラベルの位置を決める
入力項目の上下左右のいずれかを設定可能
左右の場合、入力項目の可視範囲が狭まるので注意
3ラベルの幅行のラベルの幅(%)
 「ラベルの位置」が”左”もしくは”右”の時に設定可能
デフォルト値は30
ラベルの幅を調整したい場合に設定する
4ラベルの余白行のラベルマージンの幅をパーセントで指定します
 「ラベルの位置」が”左”もしくは”右”の時に設定可能
デフォルト値は3
ラベルと入力項目の間を少し空けたい場合に設定する
5オプションラベルの位置このフィールドのオプションのためのラベルの位置。ラジオボタンの選択肢のラベルの位置を決める
6説明説明文は、入力フィールドの下に表示されるテキストです。入力項目に対する説明を表示
注意を引きたいときや入力内容を間違ってほしくないときに設定する
7ツールチップこのフィールドの横にツールチップを追加します。説明文を画面に表示せずに にマウスカーソルを当てたときだけ表示させたい場合に設定する
8カスタムCSSクラスこのコンポーネントに追加するカスタムCSSクラス。見た目を変更するためのCSSクラス名を設定する。
CSSはフォーム上に記述するほか、CSSファイルをフォームに適用させることも出来る
予約語もあり、例えば「nodisp」と設定すると非表示に設定される。
タブインデックスフォームのタブ順序を上書きするために、このコンポーネントのtabindex属性を設定します。フォームデータの入力時にタブキーを押したときに移動するコンポーネントの順番を設定する
0-32767の間で設定可能
ただし、0はタブキーを押しても移動されないので注意
インラインレイアウトチェックボックス/ラジオを水平に表示する。チェックを付けると、ラジオボタンを横並びにして表示する
非表示隠しフィールドはまだフォームの一部ですが、視界から隠されています。画面上で非表示にしたい場合に設定
計算用の項目にしたいときに利用する
ラベルを隠すこのコンポーネントのラベル(ラベルがない場合はタイトル)を非表示にします。これにより、フォームビルダーでラベルを表示することはできますが、レンダリング時には表示されません。入力項目のラベルを非表示にする
初期フォーカスこのフィールドをこのフォームの最初にフォーカスされる要素にします。データ作成時に最初にこのフィールドにマウスカーソルがあたるようにする
 チェックを付けるとタブインデックスが利用できなくなるので注意すること
無効にするフォーム入力を無効にするフィールドに入力できなくする
計算結果の値を格納しておくときに利用する
テーブルビュー投稿のテーブルビュー内でこの値を表示します。編集グリッド内に格納したときにヘッダー行にこのコンポーネントを表示するときにチェックを付ける
 編集グリッド内に多くのコンポーネントを配置した場合に表示する項目を絞り込む際に利用する
モーダル編集このコンポーネントの値を編集するためのモーダルが表示されます。コンポーネントに直接入力するのではなくダイアログを表示して入力するときにチェックを付ける
 初期フォーカスのチェックやタブインデックスの値は無効になるので注意すること
[データタブ]
No.項目説明用途
1デフォルト値デフォルト値は、ユーザーとのインタラクションの前に、このフィールドに設定される値である。デフォルト値を指定すると、プレースホルダーのテキストがオーバーライドされます。デフォルトでどの項目にチェックを付けておくかどうかを選択する
2ラベルこのフィールドで選択可能なラジオボタンの値。値とは、フォームデータと共に送信されるテキストです。ラベルは、フォームのラジオボタンの横に表示されるテキストです。チェックボックスの選択肢のラベルを設定する
 値とショートカットと一緒に設定する
3チェックボックスの選択肢の保存時の値を設定する
 ラベルとショートカットと一緒に設定する
この項目は必ず設定すること
4ショートカットこのオプションのショートカットキー。キーボード入力でチェックボックスを設定させたい場合に設定する
 A-Zを選択可能
 CtrlとAltを押しながら設定した値を押すことでチェックを付けたり外したり出来る
一カ所で設定すると他のチェックボックスやラジオボタン、選択コンポーネントではその値で設定できない
5保存方法データを保存するタイプ。autotype以外を選択した場合は、強制的にその型になります。
6再描画のタイミング他のコンポーネントが変更された場合、このコンポーネントを再描画する。これは、ラベルのようなコンポーネントの一部を補間する場合に有用である。フィールドが計算結果の値として設定されているときに、関連するコンポーネント名をセットする
7非表示時に値をクリアするフィールドが非表示の場合、値をクリアします。フィールドが非表示に設定された場合、入力値をクリアする
条件によって入力内容を変更したい場合にチェックを付ける
カスタムデフォルト値
8JavaScriptフィールドの初期値をJavaScriptで設定する
単純な値ではなく他のコンポーネントの値と関連した値も設定可能
必ず
value = *; のように記述すること(はJavaScriptの式)
JSONLogicフィールドの初期値をJSONLogicで設定する
計算結果
JavaScriptフィールドの値をJavaScriptで設定する
入力させるのではなく他のコンポーネントの値と関連した値を設定するときに利用する
必ず
value = *; のように記述すること(はJavaScriptの式)
JSONLogicフィールドの値をJSONLogicで設定する
サーバーで値を再計算チェックすると、サーバー上で計算が実行されます。サーバーで計算した値で、送信した値を上書きしたい場合に有効です。画面上で計算した値を保存時にサーバー側で再計算させる場合にチェックを付ける
計算された値を手動で書き換え可能にするチェックすると、ユーザーが手動で計算値を上書きすることができるようになります。計算結果の値を編集可能にする場合にチェックを付ける
[検証タブ]
No.項目説明用途
1
2
3
4
5
6
7
8
[APIタブ]
No.項目説明用途
1
2
3
4
5
6
7
8
[条件タブ]
No.項目説明用途
1
2
3
4
5
6
7
8
[ロジックタブ]
No.項目説明用途
1
2
3
4
5
6
7
8
[レイアウトタブ]
No.項目説明用途
1
2
3
4
5
6
7
8

◯ボタン

[表示タブ]
No.項目説明用途
1
2
3
4
5
6
7
8
[APIタブ]
No.項目説明用途
1
2
3
4
5
6
7
8
[条件タブ]
No.項目説明用途
1
2
3
4
5
6
7
8
[ロジックタブ]
No.項目説明用途
1
2
3
4
5
6
7
8
[レイアウトタブ]
No.項目説明用途
1
2
3
4
5
6
7
8