フォームの作成は、わりと簡単でシンプルです。すべてのフォームがリストアップされているフォームページ (管理者用ドロップダウンまたはフォームページ(例: http://localhost.openiap.io/#/Forms))に移動し、ネイビーブルーの「 フォームを追加」ボタンをクリックします。
OpenFlowのFormsページ。
さて、フォームの編集画面では、多くのフォームコンポーネントがあり、その中から選択することができます。ここでは、一般的な目的のために、最もよく使われるものだけを取り上げます。テキストフィールドコンポーネントです。他のコンポーネントについては、それぞれのセクションで詳しく説明します。
OpenFlowのフォーム作成ページ。
基本」カテゴリにある「テキストフィールドコンポーネントフォーム」を「フォーム」ワークスペースにドラッグします。その直後、フォームコンポーネントを設定するためのすべてのパラメータを含むウィンドウが表示されます。
OpenFlowのForms starterの設定タブ。
以下は、フォームコンポーネント（この例ではTextField）を適切に設定するために必要な手順です。
フォームのラベルを変更する
フォームのラベル、つまりエンドユーザーに表示されるタイトルを変更するには、「表示」タブをクリックし、「ラベル」というタイトルの入力フォームを変更するだけです。変更内容はリアルタイムで表示されます。
OpenFlowの「フォーム表示」設定タブ。
入力変数の割り当て
OpenFlowにマッピングしたOpenRPAワークフロー内で設定した変数に入力フォームを割り当てるには、APIタブでProperty Nameの中に変数名を入れて、saveを押すだけです。これで、次回このワークフローが呼び出されたときに、新しいパラメータが表示されるようになります。
OpenFlowのForm APIの設定タブ。
Node-REDワークフローにフォームを割り当てる
ここで、Node-RED のワークフローにフォームを割り当てる必要があります。これを行うには、Node-RED に移動し、フォームを割り当てたい
Workflow Outノードを 2 回クリックします。Edit workflow out node」タブが表示されるので、「Userform」ドロップダウンで先ほど作成したフォームを選択します。
Node-REDワークフローにフォームを割り当てる。
Form Componentの設定方法については、「OpenFlow Forms」の項を参照してください。
このセクションでは、ほとんどのコンポーネントで提供されている一般的な設定のリストが表示されます。後のセクションでは、特定のフォームのための特定の設定のみが表示されます。
ディスプレイ
このフォームコンポーネントの表示方法および使用方法に関する一般的なプロパティです。
ラベル
ラベル位置
プレースホルダー
このプロパティは、フィールドが空のときに表示されるプレースホルダーテキストを設定する。
プレースホルダープロパティ
プレースホルダープロパティセット
商品説明
このプロパティは、入力フィールドの下に表示される説明文を設定する。
説明 プロパティ
説明 プロパティセット
プリフィクス
このプロパティは、入力フィールドに挿入されるテキストと共に渡されるプレフィックステキストを設定する。
プリフィクスプロパティ
プリフィクスプロパティセット
サフィックス
このプロパティは、入力フィールドに挿入されるテキストと一緒に渡されるサフィックステキストを設定する。
サフィックスプロパティ
サフィックスプロパティセット
ウィジェット
このプロパティは、
入力 フィールドとカレンダーピッカーのどちらかを選択することができる。ウィジェットプロパティ
入力マスク
このプロパティは、ユーザーが入力データを検証するために1つ以上の入力マスクを挿入することができます。 この意味がわからない場合、または特別なカスタマイズをしたい場合は、Inputmask
(https://github.com/RobinHerbots/Inputmask)を参照してください。このオプションを「文字数を表示」または「単語数を表示」のいずれかと同時に有効にした場合、後者のいずれも正しく機能しません。
入力マスクのプロパティ
また、ユーザーは複数のマスクを許可することができます。このオプションをチェックすると、入力フィールドに接頭辞のドロップダウンが生成され、どのマスクから入力を選択するか選択できるようになります。
複数のマスクの設定
カスタムCSSクラス
このプロパティは、Input グループ
（https://getbootstrap.com/docs/4.0/components/input-group/）で定義されているように、Bootstrap の入力テキストフィールドのためのカスタム CSS クラスの1つを利用することを可能にします。
カスタムCSSのプロパティ。
タブインデックス
0に設定すると、このプロパティは、ユーザーが{TAB}キーを使用して入力フィールドを移動できるようにします。一方、1に設定すると、{TAB}キーを使用して入力フィールドを移動できなくなります。このプロパティが分かりにくい場合は、MSDN – tabindex(https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)に詳細が記載されています。
タブインデックス プロパティ」。
ヒドゥン
チェックした場合、このプロパティは、フォームが呼び出されたときに、ユーザーがフォームを隠すことを可能にします。コンポーネントは、まだフォームの一部となります。
ラベルを隠す
このオプションにより、フォームのレンダリング時にこのコンポーネントのラベルを非表示にすることができます。 フォームビルダーではまだ表示されたままです。
ワードカウンター表示
チェックした場合、コンポーネント内の単語数をライブで表示します。
キャラクターカウンターを表示する
チェックした場合、コンポーネント内の文字数をライブで表示する。
入力を隠す
このオプションは、ブラウザでの入力を隠します。しかし、サーバ側では入力を暗号化しないので、パスワードと一緒に使うべきではありません。
初期フォーカス
このオプションは、フォームの中で最初にフォーカスされるコンポーネントになります。
スペルチェックを許可する
このオプションは、このコンポーネントのスペルチェックを有効にします。
使用不可
このオプションは、フォームのコンポーネントを無効にします。
常に有効
このオプションは、フォーム自体が無効になっている場合でも、コンポーネントを常に有効にします。
テーブルビュー
チェックした場合、このオプションは投稿のテーブルビュー内に入力値を表示します。
データ
マルチバリュー
このオプションでは、このフィールドに複数の値を入力することができます。
デフォルト値
チェックした場合、ユーザーとの対話の前に、このフィールドにデフォルト値が設定されます。この値はプレースホルダーのテキストを上書きする。
持続性
このオプションは、フォームが送信されたときに、データベースに永続的なフィールドを保存しました。使用可能なオプションは以下の通りです。None、Server、Clientです。これらは、チェックした場合、情報が保存される場所に対応します。
入力フォーマット
このオプションは、このフィールドの出力を特定のフォーマットでサニタイズすることを強制します。利用可能なオプションは以下の通りです。Plain、HTML、Rawです。最後のオプション(“Raw”)は安全でないと考えられていることに注意してください。
プロテクト
チェックした場合、このフィールドはAPIによる問い合わせの際に返されません。
データベース・インデックス
このオプションは、このフィールドをデータベース内のインデックスとして設定します。これにより、投稿クエリのパフォーマンスが向上します。
テキストケース
このオプションで、ユーザーはフィールド内のテキストの大文字と小文字を制御することができます。このオプションには次のようなものがあります。混合(テキストに大文字と小文字を混在させる)、大文字と小文字を混在させる。最後の2つのオプションは、テキスト全体を特定の大文字と小文字にします。
暗号化（企業向けのみ）
このオプションは、サーバーにあるフィールドの入力を暗号化します。双方向の暗号化なので、パスワードには推奨されないことに注意してください。
再描画オン
このオプションは、他のコンポーネントが変更された場合、このコンポーネントを再描画します。ラベルのようなコンポーネントの一部を補間する場合に便利です。
非表示時のクリア値
フィールドが非表示になると、その値はクリアされる。
カスタムデフォルト値
このオプションは、ユーザーがデフォルト値をカスタマイズするためのJavaScriptテキストフィールドを開きます。 ユーザーが処理できるように、利用可能なすべての変数がリストアップされています。例に示すように、システム内の情報を使って、エンドユーザーのために提案としてフィールドに入力することができます。
算出された値
Custom Default Valueと同様に、エンドユーザはこのフィールドのために既に計算された値を提供されるかもしれない、ということである。JavaScriptのテキストフィールドが開かれ、ユーザーが希望するように情報を処理することができます。この場合も、利用可能なすべての変数がリストアップされます。
計算値の手動オーバーライドを許可する。
チェックした場合、エンドユーザーが手動で計算値を上書きすることができるオプションです。
バリデーション
バリデートオン
このオプションは、このコンポーネントがいつフロントエンドの検証を開始するかを決定します。利用可能なオプションはChangeとBlurです。
必須
チェックした場合、このフィールドが空の場合、フォームを送信できません。
ユニーク
このオプションは、このフィールドの入力を一意にします。つまり、あるエンドユーザーは、このフィールドのテキストが他のエンドユーザーと同じである場合、フォームを送信することができません。
最小の長さ
入力に必要な最小の長さ。文字数を表す整数値でなければならない。
最大長
入力に必要な最大長。文字数を表す整数値でなければならない。
最小ワード長
このフィールドに入力可能な最小ワード数。
最大ワード長
このフィールドに入力可能な最大語数です。
正規表現パターン
フォームを送信する前に、このフィールドの入力をテストする必要がある正規表現パターン。
エラーラベル
エラー発生時にこのフィールドに表示するラベル。
カスタムエラーメッセージ
エラーが発生した場合に表示されるエラーメッセージ。
カスタムバリデーション
JavaScriptの構文に基づいたカスタマイズ可能なバリデーション。利用可能なすべての変数が表示されます。サーバサイドのみで検証を行いたい方のために、シークレットバリデーションオプションが用意されています。検証のロジックを非公開にすることができます。
JSONLogicの検証
このオプションにより、ユーザーはJSONLogicの構文を使用して検証を入力することができます。
エーピーアイ
物件名
APIエンドポイントにおけるこのフィールドの名前。
フィールドタグ
カスタムロジックで使用するフィールドのタグ。
カスタムプロパティ
このオプションにより、ユーザーはこのフィールドの任意のカスタムプロパティを設定することができます。
条件付
どのようなフォームコンポーネントでも、条件付きロジックを使用して、自身をいつ隠したり表示したりするかを決定することができます。条件付きフィールドの設定は、コンポーネント自身で設定され、 コンポーネントの設定内の「条件」タブで確認できます。条件付きコンポーネントを正しく機能させるためには、APIキーが必要であることに注意してください。
アドバンスト
Simple Conditionalロジックに加え、Advanced Conditionalロジックを使用することで、条件の組み合わせに関わらず、実際のJavaScriptを使用することができます。JavaScriptの条件付きロジックでは、showの値をtrueかfalseのどちらかに設定することが必要です。フォームコンポーネントの現在の値には、データオブジェクトとコンポーネントのAPIキーでアクセスできます。 高度な条件付きロジックは、シンプルな条件付きロジックがまだ定義されていない場合にのみ機能します。
ロジック
このオプションにより、ユーザーはトリガーに基づいた条件付きアクションをフォームに設定することができます。このロジックと前のタブ(“Conditional”)との違いは、ここではコンポーネントを表示するかしないか以外のアクションがユーザに提示される点です。例えば、このロジックに基づいて、ユーザーはフィールドの値、プロパティ（Label、Title、Placeholderなど）、あるいはバリデーションを設定することができます。
レイアウト
HTML 属性
このオプションは、コンポーネントの input 要素の HTML 属性のマップを提供します。他のコンポーネントの設定によって提供される属性や、 form.io によって生成される属性は、 このオプションの属性よりも優先されることに注意してください。
PDFオーバーレイ
このコンポーネントをPDFでレンダリングするためのオプション。
基本フォームコンポーネントには、最も基本的な入力タイプが含まれています。
テキストフィールドコンポーネントは、インライン入力フィールド内にテキストを挿入することができます。
このフォームコンポーネントを使用するには、テキストフィールドコンポーネントを構築するフォームにドラッグするだけです。
フォームデザイナーにドラッグすると、新しいウィンドウが表示され、このフォームコンポーネントの設定ウィンドウが表示されます。このウィンドウはセクションごとに分かれています。表示、データ、バリデーション、API、条件、ロジック、レイアウトです。これらのセクションとそのプロパティについては、後ほど詳しく説明します。
テキストエリアは、テキストフィールドフォームコンポーネントと同じオプションを持っています。違いは、より長いテキストを入力できる複数行の入力フィールドになることです。テキストエリアは、エンドユーザーのためのCK Editor WYSIWYGとしても利用できます。これはコンポーネントの設定で設定します。
ディスプレイ
数値フィールドは、フィールドが数値の種類に限定されるべき場合に使用されるべきである。
データ
千のセパレータを使用
このオプションは、ローカルデリミタで千単位を区切ります。
小数点以下の桁数
このフィールドの値の小数点以下の桁数の最大値。
小数を必要とする
このフィールドには、ゼロが後続する場合でも常に小数を表示する。
パスワードフィールドは、テキストフィールドコンポーネントと同じオプションを持っています。テキストフィールドと異なるのは、htmlの<input>タイプがテキストではなくパスワードになることです。これにより、フィールドには入力された値の代わりにアスタリスクが表示されます。
チェックボックスは、ブーリアン値の入力フィールドです。オンかオフのどちらかになります。
バリデーション
- 必須
チェックされている場合、そのフィールドはチェック必須となります。必須である場合、フォームが送信されたときにチェックされたと見なされるか、または送信されないので、値を永続化する必要がない場合があります。
Check BoxesフォームコンポーネントはRadioコンポーネントと同様に機能しますが、ユーザーが複数の値をチェックすることができます。
ディスプレイ
インラインレイアウト
このフィールドをチェックすると、チェックボックスが垂直方向ではなく水平方向にレイアウトされます。
バリデーション
必須
チェックした場合、そのフィールドには少なくとも1つのボックスがチェックされていることが要求されます。必須である場合、フォームが送信されたときにチェックされたと見なされるか、または送信されないので、値を永続化する必要はないかもしれません。
セレクトフィールドは、ユーザーにドロップダウン・リストで値のリストを表示します。ユーザーはその中から1つの値を選択することができます。
ディスプレイ
ウィジェットタイプ
このオプションでは、使用するウィジェットの種類を選択することができます。選択できるのは、ChoicesJSとHTML 5です。
データ
データソースの種類
オプションが引き出されるデータの種類を選択します。
価値観
これらは、このフィールドで選択される値です。Valueカラムはデータベースに保存されるもので、Labelはユーザーに表示されるものです。
ストレージタイプ
データを格納するタイプ。autotype “を選択すると、URLから取得したデータの型を使用することが推奨されます。
アイテムテンプレート
結果データ項目用のHTMLテンプレートです。
静的検索を有効にする
チェックすると、Selectドロップダウンで提供される静的なリスト内で検索することができます。
検索しきい値
0から1までの数字で、マッチングアルゴリズムがあきらめるポイントを表す。0.0の閾値は完全一致を要求し、1.0の閾値は何でも一致させる。
読み取り専用値
チェックすると、Read Onlyモードの時に値だけを表示します。
Choices.jsのオプション
Selectコンポーネントのオプションとして使用する生のJSONオブジェクト。
生のJSON
使用するJSON Arrayを入力します。プロパティ名を持つオブジェクトの配列としてフォーマットされる必要があります。
URL
データソースのURLをJSON Array形式で入力します。これは、選択リストに外部JSON値を入力するために使用されます。
Lazy Load データ
このオプションを設定すると、このコントロールがフォーカスされるまで、URLへのリクエストを開始しません。フォームに多くの選択ドロップダウンがある場合、パフォーマンスを向上させることができます。
リクエストヘッダ
URLへのリクエストと一緒に送信されるべきヘッダーです。認証に役立つことがあります。
データパス
項目が反復可能である場合、ソースデータ内のプロパティ。
リミッティングレスポンスを無効にする
このオプションを有効にすると、リクエストのクエリ文字列に limit と skip オプションが含まれなくなります。
検索クエリ名
リクエストを送信する際に、結果をフィルタリングするために使用される検索クエリストリングパラメータの名前です。URLのサーバーがこのクエリパラメータを処理する必要があります。
フィルタークエリ
このフィルタは、クエリパラメータを使用する際に、追加のフィルタリングを行うために使用される。
ソートクエリ
このオプションは、クエリパラメータを使用する際にソートを行うために使用されます。
制限
このオプションは、要求または閲覧するアイテムの数を制限するために使用されます。
リフレッシュオプションオン
チェックすると、他のフィールドが変更されたときにデータをリフレッシュします。
リフレッシュオプションの値をクリアする
Refresh Options Onがオンの場合、コンポーネントはその値がクリアされます。
Formio Authenticate
リクエストにFormio認証が必要な場合、ユーザーはこのオプションにチェックを入れる必要があります。
ラジオフォームコンポーネントは、選択肢のリストを表示し、その中から1つを選択する場合に使用します。
フォーム内でさまざまなアクションを実行するためのボタンを追加することができます。
ディスプレイ
アクション
ボタンが実行するアクションを指定します。
提出
submitアクションは、form.ioサーバーまたは事前に設定されたカスタムコールバックURLのいずれかにフォームを送信します。
状態での保存
このボタンが押されたときに、ユーザーが投稿を保存したい状態を指定します。
イベント
ボタンがクリックされたときに発生するイベント。イベント名は、ユーザーが入力する必要があります。
バリデーションを表示する
ボタンが押されると、フォーム上のあらゆるバリデーションエラーを表示します。
カスタム
ボタンがクリックされたときに評価するカスタムロジックです。
リセット
フォームのフィールドをリセットして、元の状態に戻します。
オーパーツ
OAuth認証を行う。
URLへのPOST
送信先となるURL。
ヘッダー
リクエストのヘッダープロパティと値。
テーマ
ボタンのカラーテーマです。
サイズ
ボタンの大きさです。
ブロックボタン
このコントロールは、バウンディングコンテナの全幅に広がる必要があります。
左アイコン
アイコンを表示するためのフルアイコンクラス文字列。
右のアイコン
アイコンを表示するためのフルアイコンクラス文字列。
ショートカット
このコンポーネントのショートカットです。
高度なフォームには、最も高度な入力フォームが含まれています。
電子メールコンポーネントは、テキストフィールドコンポーネントとほぼ同じです。電子メールコンポーネントにはカスタムバリデーション設定があり、正しく設定すれば、入力された値が有効な電子メールアドレスであることを確認できます。また、フォームのメールアクションに簡単に統合することができます。 フォームにメールアドレスフィールドが必要な場合は、このコンポーネントを使用します。
URLコンポーネントは、単純なテキストを受け付けないことを除けば、テキストフィールドコンポーネントとほぼ同じです。
電話番号フォームコンポーネントは、フォームに電話番号を入力するために使用することができます。テキストフィールドは、文章よりも短い一般的なテキストを入力するために使用することができます。入力マスクやバリデーションを定義するオプションがあるので、情報を希望する形式に変換することができます。
タグコンポーネントは、テキストフィールドと非常によく似ていますが、フォームにタグを追加するために使用されます。
データ
デリミタ
タグの区切りに使用するデリミタ。
マックスタグ
追加できるタグの最大量。0を指定すると無制限となります。
ストアアズ
タグを格納するデータ型。文字列（CSV）またはタグの配列の2つのオプションがあります。
アドレスフォームコンポーネントは、入力された住所に対してルックアップを行う特殊なコンポーネントです。フリーフォームで入力でき、住所だけでなく、ジオロケーションなどの情報も保存されます。
ディスプレイ
リージョンバイアス
この検索に使用する地域バイアス。
Google Maps APIキー
Google MapsのAPIキーです。Google MapsのAPIキーの取得方法については、Googleのデベロッパーズサイトのテーマ（https://developers.google.com/maps/documentation/geocoding/get-api-key）をご覧ください。
