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

## UiPath.Form.Activitiesとは

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

| 実装パターン | メリット | デメリット | イメージ | 
| --- | --- | --- | --- | --- |
| [入力ダイアログ(Input Dialog)]アクティビティを使用する | 簡単・任意のタイミングでユーザー入力を受け付けられる | 1項目ずつしか入力を受け付けられない |  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/571cbda9-7bcf-99fe-548a-2d2f6817af72.png) |
| [カスタム入力(Custom Input)アクティビティを使用する] | 複数項目読み取れる・任意のタイミングでユーザー入力を受け付けられる | 難しい・HTMLを理解していないと使えない | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/aee4273f-5f7e-934d-39af-e8515afd85d2.png) | 
| Excel設定ファイルから設定値を読み込む | 簡単・複数項目読み取れる | 事前に設定しておく必要あり。パスワードなどの秘匿性の高いものは管理ポリシーに適さない場合もある | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/dca997b3-d9e7-98f2-d35e-8d0f4b00b8cf.png) |
| OrchestratorのAssetを利用する | 簡単・複数項目読み取れる・データを統括管理できる | 事前に設定しておく必要あり・UiPath Orchestratorの導入が必要 | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/4c0b9532-d3bf-4fd0-df4c-bb02a7c342e8.png)
 |
 
ただし、セキュリティ観点からデータをファイルなどで永続的に保持したくないケース(例えばID/PWの入力)、実行頻度が多く、都度設定ファイルを書き換えるのは手間すぎるケースなど、実行時にデータをユーザーから受け取りたいケースに対して、いまいちよい方法はありませんでした。

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

| Formアクティビティテンプレート※2 | イメージ |
| --- | --- |
| 自作：以下で紹介 | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/6eaffb44-bb08-d043-0abf-63864e686439.png) |
| Contact Information | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/eab073eb-fdf7-18cc-e328-1356323f939e.png) |
| Credit Card Order Form | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/0a9d2d15-1a08-0579-0818-1f81da6c6aff.png) |
| CRM Support Ticket Form | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/44ccccfb-c6ee-438c-9bf1-626e1999d941.png) |
| Feedback Form | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/891444b9-ff47-ff3a-2052-f23df4417d68.png) |
| IT Service Ticket | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/923e38b6-06d2-d78a-b420-74a46cabf0fa.png) |
| Supplier Invoice Submission Form | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/07ec8165-fc12-ffb5-19ba-c9bfa87a94a0.png) |

> ※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
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/8db863a9-5959-5d1a-a501-7936362adcc5.png)

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

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

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

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

パッケージの管理から、「UiPath.Form.Activities」と検索し、インストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/59f5f2f1-2a82-a505-19b9-3afc5279c249.png)

## フォームの作成

今回は、ID,PWの入力を受け付けるフォーム画面を作成します。以下が完成画面です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/6eaffb44-bb08-d043-0abf-63864e686439.png)

アクティビティの検索欄で、「フォームを作成」と検索し、ワークフローに追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/77622a00-d69e-5baa-e64b-6d48934a6c30.png)

「フォームデザイナーを開く」をクリックすると、UiPath フォームデザイナーが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/1ee1e0e3-24c0-d9f7-8306-90791e5b972b.png)

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

まず、idの入力を受け付けるため、「テキストフィールド」コンポーネントをドラッグアンドドロップします。テキストフィールドの設定画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/4391aa6e-f825-5ce7-ba60-7ea915f1fcd9.png)

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

| タブ | 項目 | 説明 | 今回の設定値 | イメージ |
| --- | --- | --- | --- | --- |
| 表示 | ラベル | 項目の見出し名として表示されます | id | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/32a23ec7-b84f-7a7f-ce1c-9cbab737e83d.png) |
| バインド | プロパティ名 | 入力結果を受け取るプロパティ名として使用します。 | prop_id | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/42984acb-83ca-63ad-7400-349212bea9fe.png) |
 
つづいて、passwordの入力を受け付けるため、「パスワード」コンポーネントをid下の領域にドラッグアンドドロップします。パスワードの設定画面が表示されます。

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

| タブ | 項目 | 説明 | 今回の設定値 | イメージ |
| --- | --- | --- | --- | --- |
| 表示 | ラベル | 項目の見出し名として表示されます | パスワード | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/bc849348-4c11-231d-5e0f-82954a877999.png) |
| バインド | プロパティ名※3 | 入力結果を受け取るプロパティ名として使用します。 | prop_password | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/26f4e015-ca95-0fc5-9808-d28db50e404d.png) |


> ※3 現時点(2019/11/04)では、プロパティ名に日本語は使えないようです。
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/07c6aff8-4a44-9f18-e691-0a3c457ed971.png)

フォームデザイナー左上の保存ボタンを押して、フォーム作成を完了します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/b8146d0f-26e8-d3e9-6910-a4582e357b7b.png)

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

変数パネルで以下を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/495cd0d9-f83c-212d-681a-018d2be76cc6.png)

「フォームを作成」アクティビティを選択し、プロパティパネルから、「フォームフィールドコレクション」の設定画面を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/b9150697-2076-d822-c86d-c40835b681d6.png)

「フォームフィールドコレクション」の詳細画面で、以下を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/fb6b0062-9a8a-c744-767a-c68cb08c4c99.png)

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

## 動作確認

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/2c3c37f4-b36a-f698-08be-dabcacb110be.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/751d52d8-3fe7-233c-053f-6860e3a00e1a.png)

以下を入力してみます。

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

実行が正常に完了したら、出力パネルを確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/9a6ba8c6-7799-4b60-ade9-18badd4fdced.png)

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

## あとがき

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

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

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

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