【2023.4対応】UiPath Formsを使ってみる

# UiPath Formsとは
UiPathで有人実行型の自動化業務を開発しているときに、ユーザーが使う入力ボックスや表示画面などのフォームを作りたいときはないでしょうか。簡単なことであれば「入力ダイアログ」アクティビティや「メッセージボックス」アクティビティなどで対応されている方も多いと思いますが、より高度で複雑なことができるのがUiPath Formsです。ベースは[Form.io](https://help.form.io/)というオープンソースの技術が利用されています。
# 前提条件
ここで記載している情報は、UiPath Studio 2023.4.0、UiPath.Form.Activities 23.4.3が前提となっています。
# 注意事項
- UiPath.Forms.Activities 2.0.5以前で作成したフォームを含むワークフローを、新バージョンの23.4.3以降で再利用したい場合、過去のフォームは再作成する必要があります。
- UiPath.Forms.Activitiesは、同じマイナーバージョンのパッチとのみ下位互換性が確保されています。詳しくは以下をご参照ください。
[UiPath.Form.Activities 23.4.3 リリースノート](https://docs.uipath.com/ja/activities/other/latest/user-guide/release-notes-uipath-form-activities#v2343)

# Studio 2023.4における変化点を確認する
UiPath Studioのリリースノートによると、「Trigger-based attended automation」に関連してフォームの機能を向上させ、フォームの構築と使用がさらに簡単になったと書かれています。
[2023.4.0リリースノート](https://docs.uipath.com/ja/studio/standalone/2023.4/user-guide/release-notes-2023-4-0)

今回UiPath Studio 2023.4を使ってフォームを作成し、表示させるという基本の導入部分を動作確認してみたいと思います。

# Studio上の操作

### 事前準備
まずは、Studioで新規プロセスを作成します。今回はUiPath Studio 2023.4のデフォルトであるWindowsプロジェクトで作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/2ebf6865-3b43-05b0-ebfa-a5eb431dd035.png)

### 入力フォームを作成する
UiPath Studio 2023.4では、Studioから直接フォームを新規作成します。UiPath.Form.Activitiesをインストールしていない状態でも、フォームが開発できます。

1. Studioの「新規」から「フォーム」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/00f9c719-d55b-50da-1916-5aea8abae65f.png)
1. フォーム名を「Form1」と設定して「作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/d5c03cd6-7c71-d88c-ecb4-b64f83f3d947.png)
1. フォームデザイナー画面が表示されました。アクティビティを置いて起動する流れより、わかりやすくなったかなと思います。ただし、実際に使うためには、UiPath.Form.Activitiesが必要なので結局インストールすることになります。UiPath.Form.Activitiesがインストールされていない状態でフォームを作成すると、上部に警告メッセージが表示されます。「パッケージをインストール」をクリックしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/11f947c9-9e19-3606-f4f3-a55959eabb1e.png)
UiPath.Form.Activities 23.4.3ををインストールすると、警告表示が消えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/fa76bcdd-a600-9898-7fb0-128864ee394e.png)
UiPath.Form.Activities 23.4.3には以下のような種類の部品が入っていました。詳細は[こちら](https://docs.uipath.com/ja/activities/other/latest/user-guide/form-activities)です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/d69e3697-cc94-d5e3-889c-68dd0dbc037a.png)

1. 何もないフォームだと味気ないので、姓と名を入力するテキストフィールドを作成します。左側の「基本コンポーネント」から「テキストフィールド」をドラッグアンドドロップで配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/7ff25ecf-1319-b96f-73e3-fb8a99ad6ec1.png)
1. 「表示」タブの「ラベル」に「First Name」と入力します。また、「フィールドキー」タブで「プロパティ名」を「firstName」とします。最後にプレビュー画面を確認し、「保存」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/7cc952f0-2cd4-aafd-d50b-44d0bd56dabf.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/88e88a6e-c52b-7792-a01e-36dec9230b09.png)

1. 同様に姓も「Last Name」としてテキストフィールドを追加します。プロパティ名は「lastName」とします。保存すると、フォームの見た目は以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/c6373f77-517a-1492-763b-dd628afce767.png)

### 入力フォームを表示させる
作ったフォームを表示させるには、「フォームを表示」アクティビティを使用します。UiPath.Form.Activitiesをインストールすると、「フォーム」のカテゴリーから選択可能になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/e36ffee6-5aa0-2688-6ceb-5e4ef0b54014.png)

- フォームを選択で「Form1」を選びます。
- 「ワークフローの実行を続行」をオフにします
- 引数のディクショナリ内の2個の項目をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/5b18b3ec-c5d1-635f-753a-efdb556cbf62.png)

- キーには先ほど指定したプロパティ名が設定されています。引数の方向をOutにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/c87f379c-1366-e118-08d7-2bffac349cf3.png)

### 出力フォームを作成する
- フルネーム表示用のフォームをもう1つ作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/d17a4e68-cbc6-8a0b-8d76-a9db055e6810.png)

- 「詳細」から「コンテンツ」をドラッグアンドドロップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/66781a92-392f-9118-a6e8-261fd8d56aec.png)

- ラベルを「Full Name」とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/a20924f0-7381-bbb0-b478-514b0460e5d5.png)

- 「フィールドキー」タブの「プロパティ名」をfullNameとします。コンテンツにはfullNameの値を表示させたいので、{{data.fullName}} を設定します。最後に保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/479d2c43-5d69-4f83-6a4e-c668fe016d7d.png)

### 出力フォームを表示させる
- Form2を表示するための「フォームを表示」を配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/1d528cb1-5f4b-2903-9abe-6ab254e73a1f.png)

- 「ワークフローの実行を続行」をオフにします
- フォームを選択で「Form2」を指定します。
- 引数をクリックします。
- キーに「fullName」、値に「姓 + " " + 名」を設定します。方向はInのままで良いです。
- 保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/cffd1524-1c43-6b37-4302-edf0dc1d2013.png)

最終的には以下のような簡単なワークフローとなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/41524bc2-e662-1351-8d95-5f220ec4cc43.png)

### 実行する
実行すると、最初に1つ目のフォームが起動します。それぞれ名・姓を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/a68ae1d0-0c3b-f33f-c54c-92e5c1bd2d6d.png)

すると、次のフォームで姓＋名の形で表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304259/3a69c7b8-9116-1506-d52b-96ee47afe16c.png)

# まとめ
今回はフォームの導入部分を試してみましたが、簡単なものであればフォームの作成・表示は直感的に行うことができました。今後ももう少し高度なフォーム作成方法、ユースケースなどをご紹介できたらと考えています。