【UiPath Studio】Formアクティビティについて、調べながら使ってみた。（UiPath.Form.Activities v1系）


# はじめに
当記事では __Formアクティビティで何ができるか、利用する際の注意事項など__ を調査しながら、まとめていきます。

UiPath Studioやワークフロー（プロセス）をトリガーとして __「画面を描画したい」「人間の操作を介入したい」__ というニーズがあった場合にformアクティビティの利用が１つの選択肢になります。
画面を用意することで、自動化プロセスに対してインタラクティブに人の操作や判断を介入させる仕組みを作ることができます。

:::note info 
Formアクティビティの正式名は __UiPath.Form.Activities__ （以下Form）です。 
:::

# ドキュメントでFormの注意事項を確認します。
引用元のUiPathのFormアクティビティのページはこちら。
https://docs.uipath.com/ja/activities/other/latest/user-guide/about-the-form-activities-pack

:::note
以下、いくつか重要と思われる内容を抜粋して確認していきます。
:::

### 注意１： 同じマイナーバージョン間のみで下位互換がある。（←1.3.0以降）

:::note warn
無計画にFormをアップグレードしてしまうと動作しなくなる可能性があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/3306a121-f5ca-f87e-3bd9-6f8962068bf6.png)
:::

この点はかなり注意が必要です。

### 注意２： 互換性のないバージョン間でのダウングレード時は、ワークフローを中断させる必要がある。

:::note warn
バージョンを変更する場合はドキュメントの確認と、念入りに実機の検証をしたほうが良さそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/b6fa4609-8f9a-265e-4d5f-d45c41fec0d3.png)
:::


### 注意３： Studio v2021.4ではUiPath.Form.Activities v1.1.11以上を使用する必要がある。

:::note warn
その他の依存関係、バージョン固有の問題なども記載があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/eb6e1ee9-b8f0-d6ea-9212-5c9c9ed3db2e.png)
:::

### 注意４： クロスプラットフォーム（Studioで選ぶプロジェクトOSの種類）では使えない。

:::note warn
クロスプラットフォームでしか使えない機能もあったりするので、機能の組み合わせにも注意が必要です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/863adfdb-baf4-fa07-bd4b-392da1994563.png)
:::

この他にも何点か記載があります。
記載内容はそれほど多くありませんが、個人的には意外と制約があるように感じました。
利用する際は念のためドキュメントに一通り目を通すと想定外のトラブルを防げそうです。


### 余談：Formのプレビューバージョン（2023.4-preview）でも大きな変化がありそう…。

:::note warn
プレビュー版ではナンバリングがv23.4.1となっており、アクティビティの内容が大きく変わっていました。
正式はリリースは不明です。
- 現行：UiPath.Form.Activities v2.0.3で利用できるアクティビティ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/d2c46408-a2b5-d2fe-756b-7187580a8321.png)
- __プレビュー版：UiPath.Form.Activities v23.4.1-プレビュー版__ で利用できるアクティビティ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/1d4eafa3-be12-be04-bcad-4837b335e64b.png)
（この詳細はまたの機会に…）
:::

## Formのアクティビティは３つしかない。（ただしForm v1、v2の場合）
ドキュメントをみると関連アクティビティは以下の３つしかないようです。

:::note
- フォームを作成
- フォームアクティビティを開始（Start Form Activity）
- フォームのボタンをトリガー（Trigger Form Button）
:::

アクティビティは少ないですが、デザイナーを使って画面を作り込みながら様々な要件を実現するイメージでしょうか。
「フォームを操作する」というタイトルで30個弱のさまざまな実装例が紹介されています。
各事例ページの下部にサンプルワークフローへのリンクもあるので参考になります。
https://docs.uipath.com/ja/activities/other/latest/user-guide/working-with-forms

（ただし、上記の通りプレビュー版だとこのあたりの仕組みが大きく変わるようでアクティビティ数も変わりそうです）

## フォームを作る仕組みはform.ioという外部サービスを利用しているようです。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/9b377d5e-8a11-265a-0970-ea0dce047876.png)
ドキュメントに記載されている通りカスタマイズされているか、またはform.ioが更新されているようで、
Formアクティビティのデザイナーのメニューとform.ioのヘルプに記載のメニューと一致しません。この点は注意が必要です。

:::note
より作り込みたいニーズがある場合はform.ioの仕様も確認すると良いです。
基本としてUiPathの公式ドキュメントを参考にしつつ、form.ioの情報を補完する、といった感じが良さそうです。
:::


### form.ioのページ。
https://form.io/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/3f06d462-50dd-6d8a-1d8e-5eb813024345.png)
### form.ioのヘルプページ。
https://help.form.io/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/04fbe66e-64d1-a214-d5fe-b4a0b78c4ed2.png)

:::note warn
ちなみにform.ioの仕様の理解はかなり腰を据えないと難しそう…でした。
:::

# 実際にFormアクティビティ使ったサンプルワークフローを動かしてみます。

:::note
リアルタイムフォームの事例からサンプルを取得して実行してみます。
https://docs.uipath.com/ja/activities/other/latest/user-guide/real-time-forms-old
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/bf813159-f5bf-6faa-ecd4-ac590c146507.png)

このサンプルのMain.xamlは顧客情報の入力フォームを表示して、裏でExcelを検索するユースケースになっています。
:::

このサンプルのケースはzipファイルの中に手順を説明する動画も含まれています。（ただし英語です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/4adc8c68-5b4c-4eaa-bc6e-6c266354bf8d.png)
また、動作確認をして発覚しましたが、ワークフローは古いものなのでご利用のStudioに対応するための最低限の修正をしないと動きませんでした。

:::note warn
手元の環境はStudio v2022.10ですが、サンプルワークフローは __Studio v19.12__ で作られた古いものでした。
依存するパッケージのダウンロード等、必要な修正をしています。
:::

:::note
当検証では __UiPath.Form.Activities v1.9.6__ を利用しています。
:::

#### まずは実装を確認していきます。

## ポイント：「フォームを作成（Create Form）」アクティビティにフォームを作成する「フォームデザイナー」を内包している。
このサンプルケースでは「フォームを作成（Create Form）」アクティビティの利用のみでした。
このアクティビティを実行すると定義したフォームが描画されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/89f217e8-02bc-b8e4-641a-a3a5c0ff9013.png)

フォームデザイナーのボタンをクリックすると定義されたフォームが表示されます。
必要であればGUI操作で編集できます。

下図の左メニューに、基本コンポーネントとしてHTML要素のような部品が用意されています。
画面編集は、左メニューから画面要素を選択して、右の描画エリアに定義していく操作イメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/384ee5df-c931-ddf6-fb3f-51b734fabe18.png)

### とりあえず動かすための修正をします。

:::note warn
ワークフローを起動してボタンをクリックすると、フォームがすぐに閉じてしまう事象がありました。


フォームの編集にてボタンを編集します。（アイコンが2重に見えるのはご愛嬌…）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/6599d072-48d7-8456-5300-05c31a82487d.png)

手元ではボタンに対応する「アクション」が「送信」になっていました。
この値を「クリック」にすることで期待する動作になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/51c586c7-f6c1-fb44-0107-790f48e02570.png)
:::

内部で読み込むExcelも修正が必要でした。一度実行すると「customers.xlsx」が作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/419f4a13-91bf-bf6a-5b48-23d7348b9b04.png)
このExcelに値を入力します。

:::note
Main.xamlはA列をキーに同じ行の値を取得する実装になっています。
それを念頭に適当な値を入力し保存しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/7a4963c6-adde-9626-e03b-9420a9a3a7e7.png)
:::

# ではMain.xamlを実行してみます。
Main.xamlを実行すると画面が表示されました。
"名前3"と入力し、"Look Up"ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/8cbd30d5-1265-9d52-0f95-f7314e2c8a88.png)

Excelに入力した情報が検索され画面に値が設定されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/cd196c28-aed4-dfe3-b912-a70421a3e17e.png)

 一旦、概要の理解としてここまでにします。

# まとめ
Studioを使った実装で画面が作れること、実際に画面が起動し、値を入力する流れを実行してみました。
「フォームを作成（Create Form）」アクティビティを使うだけで基本的な画面描画ができることが確認できました。
アクティビティが３つしかない割に奥深い実装パターンがありそうです。

:::note
サンプルワークフローでは使われていませんがHTMLやJavascriptを記述したりすることも可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/559653f8-9282-43c5-50a2-91562c04a083.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3302589/ad9c92d3-d729-5267-fc8b-ab377fc45677.png)
:::

今回は初歩的な挙動のみの確認でしたが、これを応用することで自動化の幅が広がるはず…！

今後もFormアクティビティ単体の可能性はもちろん、応用例なども調査してまとめていきます。