複数項目が入力可能なフォーム画面を作成できるUiPath.Form.Activitiesの使い方(入門編)

UiPath.Form.Activitiesとは

ユーザーからの入力を受け取るには、これまでにも以下の方法がありました。

| 実装パターン | メリット | デメリット | イメージ |
| --- | --- | --- | --- | --- |
| [入力ダイアログ(Input Dialog)]アクティビティを使用する | 簡単・任意のタイミングでユーザー入力を受け付けられる | 1項目ずつしか入力を受け付けられない | |
| [カスタム入力(Custom Input)アクティビティを使用する] | 複数項目読み取れる・任意のタイミングでユーザー入力を受け付けられる | 難しい・HTMLを理解していないと使えない | |
| Excel設定ファイルから設定値を読み込む | 簡単・複数項目読み取れる | 事前に設定しておく必要あり。パスワードなどの秘匿性の高いものは管理ポリシーに適さない場合もある | |
| OrchestratorのAssetを利用する | 簡単・複数項目読み取れる・データを統括管理できる | 事前に設定しておく必要あり・UiPath Orchestratorの導入が必要 |
|

ただし、セキュリティ観点からデータをファイルなどで永続的に保持したくないケース(例えばID/PWの入力)、実行頻度が多く、都度設定ファイルを書き換えるのは手間すぎるケースなど、実行時にデータをユーザーから受け取りたいケースに対して、いまいちよい方法はありませんでした。

今回ご紹介するフォームアクティビティを使用することで、複数項目の入力を受け取るフォーム画面を、簡単に、自由に作成することが可能になります。※1

Formアクティビティテンプレート※2	イメージ
自作：以下で紹介
Contact Information
Credit Card Order Form
CRM Support Ticket Form
Feedback Form
IT Service Ticket
Supplier Invoice Submission Form

※1：確認したのは、UiPath Community Edition beta版の以下バージョンです。
Studio 2019.10.0-beta.477 - 2019/11/01
UiPath.Form.Activities v1.0.0

※2 : UiPath.Form.Activitiesをインストールすると、以下のフォルダにテンプレートが作成され、UiPath フォームデザイナーよりテンプレートを呼び出せます。現時点(2019/11/04)では、上記6つのテンプレートが用意されています。
C:\Users{LOGIN_USER}\Documents\UiPath\Activities\Forms\Templates

パッケージのインストール

以下パッケージをプロジェクトに追加します。

パッケージ名	用途
UiPath.Form.Activities	複数項目が入力可能なフォーム画面の作成に使用

UiPath.Form.Activitiesのインストール

パッケージの管理から、「UiPath.Form.Activities」と検索し、インストールします。

フォームの作成

今回は、ID,PWの入力を受け付けるフォーム画面を作成します。以下が完成画面です。

アクティビティの検索欄で、「フォームを作成」と検索し、ワークフローに追加します。

「フォームデザイナーを開く」をクリックすると、UiPath フォームデザイナーが表示されます。

基本コンポーネントから、任意のコンポーネントをドラックアンドドロップで中央のフォーム領域にドラッグアンドドロップすることができます。

まず、idの入力を受け付けるため、「テキストフィールド」コンポーネントをドラッグアンドドロップします。テキストフィールドの設定画面が表示されます。

最低限設定が必要な以下の項目を入力しましょう。

タブ	項目	説明	今回の設定値	イメージ
表示	ラベル	項目の見出し名として表示されます	id
バインド	プロパティ名	入力結果を受け取るプロパティ名として使用します。	prop_id

つづいて、passwordの入力を受け付けるため、「パスワード」コンポーネントをid下の領域にドラッグアンドドロップします。パスワードの設定画面が表示されます。

最低限設定が必要な以下の項目を入力しましょう。

タブ	項目	説明	今回の設定値	イメージ
表示	ラベル	項目の見出し名として表示されます	パスワード
バインド	プロパティ名※3	入力結果を受け取るプロパティ名として使用します。	prop_password

※3 現時点(2019/11/04)では、プロパティ名に日本語は使えないようです。

フォームデザイナー左上の保存ボタンを押して、フォーム作成を完了します。

フォームから受け取る変数の設定

変数パネルで以下を作成します。

「フォームを作成」アクティビティを選択し、プロパティパネルから、「フォームフィールドコレクション」の設定画面を表示します。

「フォームフィールドコレクション」の詳細画面で、以下を設定します。

「名前」には、フォームデザイナーで指定したプロパティ名を設定します。
「方向」には、フォーム画面で入力された値を受け取る場合、出力を設定します。フォーム画面にデフォルト値などを渡す場合、入力を設定します。
「値」には、ワークフロー側で作成した変数を指定します。

動作確認

動作確認のため、「メッセージをログ」アクティビティを配置し、以下を設定します。

String.Format("id: {0}, password: {1}",id,password)

以上です。では実行してみましょう。

フォーム画面が表示されました。

以下を入力してみます。

項目	入力値
id	user01
パスワード	user01password

実行が正常に完了したら、出力パネルを確認してみましょう。

id変数とpassward変数に、フォームで入力した値が設定されていますね。
簡単に、自由にフォームを作ることができるアクティビティで、非常に使いやすいですね！

あとがき

実行時にフォームのサイズ幅を変えるとエラーが発生したり、まだまだ不安定なところもありそうですので、本番での利用の際には、もう少し検証されたほうがいいと思います。

このほかにも、プルダウンや、ラジオボタン、表など様々なコンポーネントが用意されており、入力チェック、エラーメッセージの表示などの機能も用意されています。
時間ができたら、実践編として、紹介したいと思います☺

また、このフォームデザイナーは、「吹き出しデザイナー」アクティビティや、UiPath Forward Ⅲ Japanでも紹介されていたHuman In the Loop(UnAttendedプロセスの間に、ユーザー操作を介入させる手法)のユーザーインタラクションとしても同様のデザイナーでフォームを作れそうです。

最近アップデートが多く、覚えることが多くて大変ですが、フォーム作成機能についてはユーザーとのインタラクション（対話）における表現の幅が増えるので、覚えておいて損はない機能と思います☺