2.3. 初めてアクセスする

OpenFlow のウェブページにアクセスするには、あなたの作業環境で指定された URL にアクセスするだけです(必要であれば、IT 担当者に連絡してください)。ローカルバージョンを実行している場合、デフォルトでは、URLはhttp://localhost.openiap.io

OpenFlowにアクセスできず、ローカルバージョンを実行していない場合は、https://app.openiap.io にある私たち自身の環境を使って実験してみることをお勧めします。

ページにアクセスした後、ユーザーは認証を求められます。サインイン後、ユーザーはOpenFlowホームページのトップページにリダイレクトされます。

備考

OpenFlow環境(https://app.openiap.io)にアクセスする場合、認証情報の入力を求められたら、ユーザー名とパスワードの組み合わせを入力すれば、同じ認証情報でユーザーが自動的に作成されます。ユーザー名とパスワードは必ず控えておいてください。

images/openflow_sign_in_page.png

認証ページ

images/openflow_index_page.png

OpenFlowのホームページ

2.4. 新しいユーザーを作成する

新しいユーザーを作成するには、まず、Adminドロップダウンをクリックし、Usersオプションを選択します。

images/openflow_dropdown_index_page.png

管理者用ドロップダウン

ここで、紺色の「 ユーザーを追加する」ボタンをクリックします。

images/openflow_users_page.png

ユーザーページ

ここで、名前ユーザー名パスワードを入力し、[保存]をクリックします。最近作成されたユーザーには、ロールが割り当てられていないことに注意してください。ロールの詳細については、次のセクションで説明します。

images/openflow_userdetail_page.png

ユーザー作成ページ

2.5. 役割

ここでは、OpenFlowにおけるロールとは何か、それがOpenRPAや Node-REDのアクセス権限にどのような影響を与えるかを説明します。

2.5.1. 役割とは

OpenFlowのロールは、1人以上のユーザーまたはユーザーグループに割り当てることができる特権と許可の単位または集合体です。これらのロールは、OpenRPA内のプロジェクト/ワークフローへのアクセス権や、Node-RED内の特定のフローへのアクセス権を付与するなど、さまざまな目的に使用できます。

OpenFlowでは、人間のユーザーもロボットもユーザーと呼ばれ、ロールはどちらも同じように機能することを忘れないでください。

2.5.2. RPARole (Pool)

ユーザーのプール、例えば “Buyers “を作成して、多くのユーザー(buyer_John, buyer_Maria, buyer_robot1, …)をこのプールに挿入できるようにしたい場合があります。そうすることで、各ユーザーのロールを手動で調整するのに比べ、権限やアクセスの管理が容易になります。

RPARoleはまた、ワークフローやNode-REDフローが、特定のユーザーではなく「Buyers」Poolにタスクを割り当てることを可能にします。この方法では、ワークフローはプールから任意のユーザーに割り当てることができ、フレームワークは自動的に最初に利用可能なリッスンユーザーにタスクを割り当てます。

したがって、RPARoleは、Roleの編集画面で設定するパラメータで、Roleが代わりにユーザーのPoolになることを可能にするものです。

設定された場合、Roleに追加されたすべてのユーザーは、Role-QueueIDのリッスンを開始します。これで、ユーザーはキューの消費者になります。ユーザはログインすると、自分のUser-QueueIDをネイティブにリスニングします。また、RPARoleパラメータを持つRoleのメンバーであれば、Role-QueueIDを聞くようになります。詳しくはpool(https://cs.stackexchange.com/q/86372)をご覧ください。

2.5.2.1. しかし、消費者とは何でしょうか

コンシューマ」という用語は、文脈によって異なる意味を持ちます。ここでは、コンシューマーとはメッセージを消費するアプリケーション(またはアプリケーション・インスタンス)のことを指します。同じアプリケーションはメッセージを発行することもできるので、同時にパブリッシャーでもあります。この場合、コンシューマーはメッセージ配信のための購読であり、配信が始まる前に登録されなければならず、アプリケーションによってキャンセルすることも可能です。

RabbitMQはメッセージングブローカーです。パブリッシャーからメッセージを受け取り、それをルーティングします。もしルーティングするキューがあれば、それを消費するために保存し、もしあればすぐにコンシューマに配信します。コンシューマはキューからメッセージを消費します。消費するためには、キューが存在しなければなりません。新しい消費者が追加されたとき、キューにすでに準備が整っているメッセージがあると仮定すると、配信は直ちに開始されます。コンシューマ登録時に、対象のキューが空であることも可能です。その場合、新しいメッセージがキューに登録されると、最初の配信が行われます¹。

¹ –コンシューマー(https://www.rabbitmq.com/consumers.html)

2.5.3. 権限の付与(admin、nodered、user)

OpenFlowのパーミッションの変更は、とても簡単です。

ロールを変更するには、ユーザーがAdminであること、すなわちadminsロールに割り当てられていることが必要です。

次に、OpenFlowのWebページ内のAdminドロップダウンをクリックする必要があります。

images/openflow_roles_click_roles_dropdown.png

あとは、OpenFlow のページ内のRolesページに移動して、ユーザーを追加したい Role に対応するPencil/Editアイコンをクリックするだけです。例として、personal nodered usersの Role を変更することにします。

images/openflow_roles_edit_personal_nodered_users_role.png

鉛筆/編集」アイコンをクリックすると、下図のように、ロールの 名前rparoleチェックボックス、追加入力フィールド、およびメンバーリストを含む、ロールページにリダイレクトされます。そのロールに新しいユーザー/ ロールを追加するには、追加入力フィールドにそのユーザー /ロールの名前を入力するだけです。その後、ドロップダウンリストが表示され、ユーザーはそのロールに追加するユーザー/ロールを選択します。

images/openflow_roles_add_user.png

必要な値を選択すると、追加ボタンがクリックできるようになります。クリックすると、最近選択したユーザー/ロールが メンバーリストに追加されます。 変更を保存しないと、変更は反映されませんので、忘れずに保存してください。

images/openflow_roles_click_save_button.png

2.5.3.1. Node-REDのパーミッション

ワークフローインノードに キュー 名を設定し、そのキューが属するフローをNode-RED内にデプロイするたびに、ロールページ内にNode-REDのサブドメインをプレフィックス(デフォルト:「nodered1」)、中間部にキュー名(ノードのプロパティ内で定義)、サフィックスに「users」を持つ新規ロールが作成されます。例:”nodered1google-vision-apiusers”.

備考

Adminユーザーとしてログインした場合、ワークフローページでそのワーク フローにアクセスし、呼び出すには、そのロールにユーザーを追加する必要があり ます。

2.5.3.2. OpenFlow内部の主な役割の一覧

OpenFlowの中の主なロールとその権限について説明します。

  • filestore users– このロールのメンバーは、OpenFlow にアップロードされたすべてのファイルを見ることができます。

  • ファイルストア管理者– このロールのメンバーは、OpenFlowにアップロードされたすべてのファイルに対して完全な制御(削除、更新、…)を行うことができます。

  • robot users– 現在未使用、全てのロボットを表すと思われる。

  • robot admins– 現在未使用。このロールのメンバーは、ロボットに関するすべてのオブジェクトを完全に制御(削除、更新、…)することができます。

  • personal nodered usersOpenFlow がKubernetes 上で動作している場合、この Role のメンバーは新しいNode-REDインスタンスを作成することができます。

  • nodered users– このロールのメンバーは、すべてのNode-REDインスタンスに読み取り専用でアクセスできます。

  • nodered admins– このロールのメンバーは、すべてのNode-REDインスタンスへのフルアクセスが可能です。

  • nodered api usersapi_allow_anonymoustrue に設定されている場合、このロールのメンバーはすべての Node-RED インスタンスから公開される API を呼び出すことができます。

  • users– すべてのユーザーがこの役割のメンバーです。

  • admins– このロールのメンバーは、システム内のすべてにアクセスすることができます。現時点では、adminsは rootユーザができることをすべて行うことができます。

2.6.1. それは何ですか

Node-REDのワークフローは、主に「フロー」と呼ばれます。これらのフローは、異なるサービス、アプリケーション、ロジック機能を接続するために作られます。グループ化すると、データを処理し、その結果を所定のサービスやファイルに出力するために使用することができます。

OpenFlowのWorkflowsページ(例:http://localhost.openiap.io/#/Workflows)において、これらのフローをリモートで呼び出すことが可能である。

images/openflow_node_red_subflow.png

Node-REDサブフロー例

2.6.2. 呼び出す

ワークフローは、3つのアプリケーションすべてから開始できます。OpenRPA、OpenFlow、Node-REDの3つのアプリケーションのすべてからワークフローを開始できます。ワークフローを起動しても、その内容は変更されず、単にリモートで実行されるだけです。ワークフローは、読み取り専用のプロシージャとお考えください。

  • Node-REDにワークフローをデプロイする

    Node-RED にアクセスすると、デプロイ可能なすべてのフローを含むフロータブが表示されま す。Node-REDのフローを実行するには、Node-REDのサブフロー内の開始ノードをクリックするだけです。Node-REDのフローやサブフローに変更があった場合は、その都度デプロイを行い、変更を反映させる必要があります。

    Node-REDアプリケーションで設定した内容に従ってOpenFlowでワークフローを呼び出したい場合は、さらにいくつかの手順が必要です。

    1. Node-REDページに入り、OpenFlowへの呼び出しが含まれるサブフローを作成したいフロータブを選択します。

    2. Workflow Inノードを始点とするサブフローを作成する。

    3. 作成したいワークフローに対応するWorkflow Inノードを 2 回クリックします。

    4. キュー 名の入力欄を設定して、名前を付けます。

    5. 必要であれば、 ワークフローアウトを使用してユーザーにフォームを返送するようにルーティングします(フォームについては後述します)。

    6. チェックボックスの一方または両方にチェックを入れます。RPA – OpenRPAからこのノードを呼び出すことを有効にする – とWEB – OpenFlowから呼び出すことを有効にする – の両方のチェックボックスをオンにします。

    7. 電流の流れを展開する。

    ワークフローインノードをデプロイすると、OpenFlow 内に “nodered$<Queue name>” というロールが作成され、このロールのメンバーであるユーザのみがワークフローを呼び出すことができることに留意して下さい。次のステップで、リモートからワークフローを呼び出そうとしたときに、ワークフローが見えない場合は、ユーザがそのロールのメンバーであるかどうかを再確認してください。

備考

OpenFlowからNode-REDのフローを呼び出すには、nodered usersのロールが有効である必要があります。

images/openflow_setting_nodered_workflow.png

Node-REDをOpenFlowから呼び出せるようにする

  • OpenFlowでNode-REDのワークフローを呼び出す

    上記の手順が完了したら、ワークフローページ(例:http://localhost.openiap.io/#/Workflows)に移動し、目的のワークフローを直接呼び出します。フォームページが表示され、入力パラメータを選択することができます。

    フォームは、あらかじめ設定された変数に従ってOpenRPAが自動生成するものと、ユーザーがフォームページで手動生成するものがあります(例:http://localhost.openiap.io/#/Forms)

    フォームの送信をクリックすると、パラメータがロボットに送られ、指定されたワークフローが処理・実行されます。

images/openflow_workflows_page.png

ワークフローのページ

images/openflow_form_example.png

フォーム例

2.7.1. それは何ですか

OpenRPAとOpenFlowのワークフローは同じもので、意味のあるタスクを実行するアルゴリズムやステップの連続だ。違いは、OpenFlowでワークフローを呼び出すと、そのワークフローのインスタンスが作成されることです。ワークフロー・タブにアクセスすることで、ワークフローをリモートで呼び出すことができる。つまり、OpenFlow のスタックは、与えられたワークフローを処理し実行するために、利用可能なエージェントにメッセージを送信することになる。

OpenFlowからは、フォームを作成したり、与えられたワークフローに権限を与えたり、最も重要なのは、それを呼び出すことです。

ワークフローのリポジトリはOpenFlowが自動的に管理します。正しく接続されていれば、OpenRPA内にワークフローを保存することで、自動的にワークフローのWebページ内にも表示されます。

ワークフローをダウンロードするには、RPA Workflowsのリンクに移動し、ダウンロードをクリックするだけです。.XAMLファイルをダウンロードした後、他の人と共有したり、OpenRPAクライアントにインポートしたりすることができます。

2.7.2. 呼び出す

  • 呼び出すための方法

    ここでは、OpenFlowを使ったワークフローの起動方法について説明します。

  • OpenFlowのRPAワークフローによる呼び出しページ

    OpenFlowでワークフローを呼び出すには、RPAワークフローのページ(例:http://localhost.openiap.io/#/Workflows)にアクセスし、Invokeをクリックするだけで、特定のワークフローのページが開き、必要なすべてのフォームが表示されます。入力が必要なフォームが表示されますので、入力し、Invokeをクリックします。入力されたデータは、選択されたロボット/エージェントに送信され、ワークフローの処理が開始されます。

    データ処理は双方向です:入力パラメータはロボット/エージェントに送られ、ワークフローの出力も返されます。つまり、異なるアプリケーションを呼び出す多くのワークフローを作ることができる。メッセージは、送信され、読まれ、返信される。 そのメッセージが複数回送信され、読まれ、返信されることを妨げるものは何もない。

備考

OpenFlowを使ってワークフローを呼び出すには、ユーザーが適切なパーミッションを持っている必要があります。 詳しくは、OpenRPAの「ユーザー/ロールへのパーミッションの付与」の章をご覧ください。

images/openflow_rpa_workflows.png

RPAワークフローのページ

2.8. フォームス

フォームとは、OpenFlow の動的なウェブページを作成することで、ワークフローに入力を渡すための使い勝手の良い方法です。一つは、ワークフローをリポジトリに保存したときに自動的に生成されるOpenFlowのフォームを使う方法、もう一つは手動でフォームを作成してNode-REDのワークフローに接続する方法です。

Forms の使い方の詳細については、form.ioIntro(https://help.form.io/userguide/introduction/) を参照してください。この章の大部分は、このガイドに基づいています。

2.8.1. フォームを作成する

フォームの作成は、わりと簡単でシンプルです。すべてのフォームがリストアップされているフォームページ (管理者用ドロップダウンまたはフォームページ(例: http://localhost.openiap.io/#/Forms))に移動し、ネイビーブルーの「 フォームを追加」ボタンをクリックします。

images/openflow_forms_page.png

OpenFlowのFormsページ

さて、フォームの編集画面では、多くのフォームコンポーネントがあり、その中から選択することができます。ここでは、一般的な目的のために、最もよく使われるものだけを取り上げます。テキストフィールドコンポーネントです。他のコンポーネントについては、それぞれのセクションで詳しく説明します。

images/openflow_forms_creation_page.png

OpenFlowのフォーム作成ページ

基本」カテゴリにある「テキストフィールドコンポーネントフォーム」を「フォーム」ワークスペースにドラッグします。その直後、フォームコンポーネントを設定するためのすべてのパラメータを含むウィンドウが表示されます。

images/openflow_form_starter_config_page.png

OpenFlowのForms starterの設定タブ

2.8.2. フォームコンポーネントを設定する

以下は、フォームコンポーネント(この例ではTextField)を適切に設定するために必要な手順です。

  • フォームのラベルを変更する

    フォームのラベル、つまりエンドユーザーに表示されるタイトルを変更するには、「表示」タブをクリックし、「ラベル」というタイトルの入力フォームを変更するだけです。変更内容はリアルタイムで表示されます。

images/openflow_form_label_config_page.png

OpenFlowの「フォーム表示」設定タブ

  • 入力変数の割り当て

    OpenFlowにマッピングしたOpenRPAワークフロー内で設定した変数に入力フォームを割り当てるには、APIタブでProperty Nameの中に変数名を入れて、saveを押すだけです。これで、次回このワークフローが呼び出されたときに、新しいパラメータが表示されるようになります。

images/openflow_text_field_api_config.png

OpenFlowのForm APIの設定タブ

  • Node-REDワークフローにフォームを割り当てる

    ここで、Node-RED のワークフローにフォームを割り当てる必要があります。これを行うには、Node-RED に移動し、フォームを割り当てたいWorkflow Outノードを 2 回クリックします。Edit workflow out node」タブが表示されるので、「Userform」ドロップダウンで先ほど作成したフォームを選択します。

images/openflow_node_red_configure_form.png

Node-REDワークフローにフォームを割り当てる

Form Componentの設定方法については、「OpenFlow Forms」の項を参照してください。

2.8.3. 一般的なフォームの設定

このセクションでは、ほとんどのコンポーネントで提供されている一般的な設定のリストが表示されます。後のセクションでは、特定のフォームのための特定の設定のみが表示されます。

ディスプレイ

このフォームコンポーネントの表示方法および使用方法に関する一般的なプロパティです。

ラベル

このコンポーネントの名前またはタイトル。

images/general_label_property.png

ラベルのプロパティ

images/label_property_set.png

ラベルプロパティセットのデモ

ラベル位置

このフィールドのラベルの位置。Topを選択するとラベルは入力フィールドの上に表示され、Bottomを選択するとラベルは入力フィールドの下に表示されます。

images/general_label_position_property.png

ラベル位置のプロパティ

images/label_position_property_set_to_bottom.png

Label Position PropertyをBottomに設定したデモ。

プレースホルダー

このプロパティは、フィールドが空のときに表示されるプレースホルダーテキストを設定する。

images/general_placeholder_property.png

プレースホルダープロパティ

images/placeholder_property_set.png

プレースホルダープロパティセット

商品説明

このプロパティは、入力フィールドの下に表示される説明文を設定する。

images/general_description_property.png

説明 プロパティ

images/description_property_set.png

説明 プロパティセット

プリフィクス

このプロパティは、入力フィールドに挿入されるテキストと共に渡されるプレフィックステキストを設定する。

images/general_prefix_property.png

プリフィクスプロパティ

images/prefix_property_set.png

プリフィクスプロパティセット

サフィックス

このプロパティは、入力フィールドに挿入されるテキストと一緒に渡されるサフィックステキストを設定する。

images/general_suffix_property.png

サフィックスプロパティ

images/suffix_property_set.png

サフィックスプロパティセット

ウィジェット

このプロパティは、入力 フィールドと カレンダーピッカーのどちらかを選択することができる。

images/general_widget_property.png

ウィジェットプロパティ

入力マスク

このプロパティは、ユーザーが入力データを検証するために1つ以上の入力マスクを挿入することができます。 この意味がわからない場合、または特別なカスタマイズをしたい場合は、Inputmask(https://github.com/RobinHerbots/Inputmask)を参照してください。

このオプションを「文字数を表示」または「単語数を表示」のいずれかと同時に有効にした場合、後者のいずれも正しく機能しません。

images/general_input_mask_property.png

入力マスクのプロパティ

また、ユーザーは複数のマスクを許可することができます。このオプションをチェックすると、入力フィールドに接頭辞のドロップダウンが生成され、どのマスクから入力を選択するか選択できるようになります。

images/general_multiple_masks_property.png
images/multiple_masks_set.png

複数のマスクの設定

カスタムCSSクラス

このプロパティは、Input グループ(https://getbootstrap.com/docs/4.0/components/input-group/)で定義されているように、Bootstrap の入力テキストフィールドのためのカスタム CSS クラスの1つを利用することを可能にします。

images/general_custom_css_property.png

カスタムCSSのプロパティ

タブインデックス

0に設定すると、このプロパティは、ユーザーが{TAB}キーを使用して入力フィールドを移動できるようにします。一方、1に設定すると、{TAB}キーを使用して入力フィールドを移動できなくなります。このプロパティが分かりにくい場合は、MSDN – tabindex(https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)に詳細が記載されています。

images/general_tab_index_property.png

タブインデックス プロパティ」。

ヒドゥン

チェックした場合、このプロパティは、フォームが呼び出されたときに、ユーザーがフォームを隠すことを可能にします。コンポーネントは、まだフォームの一部となります。

ラベルを隠す

このオプションにより、フォームのレンダリング時にこのコンポーネントのラベルを非表示にすることができます。 フォームビルダーではまだ表示されたままです。

ワードカウンター表示

チェックした場合、コンポーネント内の単語数をライブで表示します。

キャラクターカウンターを表示する

チェックした場合、コンポーネント内の文字数をライブで表示する。

入力を隠す

このオプションは、ブラウザでの入力を隠します。しかし、サーバ側では入力を暗号化しないので、パスワードと一緒に使うべきではありません。

初期フォーカス

このオプションは、フォームの中で最初にフォーカスされるコンポーネントになります。

スペルチェックを許可する

このオプションは、このコンポーネントのスペルチェックを有効にします。

使用不可

このオプションは、フォームのコンポーネントを無効にします。

常に有効

このオプションは、フォーム自体が無効になっている場合でも、コンポーネントを常に有効にします。

テーブルビュー

チェックした場合、このオプションは投稿のテーブルビュー内に入力値を表示します。

データ

マルチバリュー

このオプションでは、このフィールドに複数の値を入力することができます。

デフォルト値

チェックした場合、ユーザーとの対話の前に、このフィールドにデフォルト値が設定されます。この値はプレースホルダーのテキストを上書きする。

持続性

このオプションは、フォームが送信されたときに、データベースに永続的なフィールドを保存しました。使用可能なオプションは以下の通りです。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でレンダリングするためのオプション。

2.8.4.1. テキストフィールド

テキストフィールドコンポーネントは、インライン入力フィールド内にテキストを挿入することができます。

このフォームコンポーネントを使用するには、テキストフィールドコンポーネントを構築するフォームにドラッグするだけです。

images/drag_text_field_component.png

フォームデザイナーにドラッグすると、新しいウィンドウが表示され、このフォームコンポーネントの設定ウィンドウが表示されます。このウィンドウはセクションごとに分かれています。表示データバリデーションAPI条件ロジックレイアウトです。これらのセクションとそのプロパティについては、後ほど詳しく説明します。

images/text_field_general_config_page.png

2.8.4.2. テキストエリア

テキストエリアは、テキストフィールドフォームコンポーネントと同じオプションを持っています。違いは、より長いテキストを入力できる複数行の入力フィールドになることです。テキストエリアは、エンドユーザーのためのCK Editor WYSIWYGとしても利用できます。これはコンポーネントの設定で設定します。

ディスプレイ

これにより、テキストエリアに表示される行数を制御することができます。

images/rows_textarea.png

編集部

このテキストエリアで使用するWYSIWYGエディタの種類を選択するためのオプションです。

images/editor_textarea.png

エディター

オートエキスパンド

これにより、ユーザーがテキストエリアに入力する際に、テキストエリアの高さが自動的に拡張されます。