【UiPath Studio】UiPath.Form.Activities v23.4.3の開発（基礎編）

【序章】
------
UiPath.Form.Activities v23.4.3のリリースより、フォームの構築や実装等大きく変わりました。
旧バージョンと比べると、より高度で複雑なことができると思います。
が、v23.4.3は.netのデスクトップアプリようなトリガー（イベント）仕組みで作られてます。
ワークフロー処理、フォームレイアウトと各コントロールのトリガー処理（イベント）は別々のファイルとして作られるようになりました。
![Form23.4仕様.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/c261ec73-6a70-1f5a-fea2-b238be17f322.png)

今回はv23.4でフォームアプリを作ってみたいです～～～:boy_tone1:

【環境】
------
Studio：v23.4.0 以上
UiPath.Form.Activities：v23.4.3 以上
こんな感じですね～～～
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/cf1e945d-bd62-eeb8-0021-1a9a69aef40b.png)


【フォーム作成】
------
上で説明したように、フォームレイアウトは完全に独立になりました（独立おめでとうございます！:cherry_blossom::cherry_blossom::cherry_blossom:）
一先ず、画像のようにフォームファイルを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/4a42d5e5-18f2-8f65-07f4-cc286a818c75.png)
ファイルを開くと、以前のデザイナー画面が大きく変わっていませんが、一般のワークフローと同じくStudioのエディターパネルで表示されます。
適当にボタンとテキストボックス（テキストフィールド）を配置しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/a8b6ea6e-a2de-129b-d31d-0ce875d7b2c3.png)

■テキストフィールド
テキストフィールドの値を取得・設定するために、フィールドキーを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/c5df31fb-df67-9b80-b429-99db561cd913.png)

■ボタン
ボタンも１か所を編集する櫃よがあります。
属性：「アクション」に「イベント」を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/d9af4697-b842-de2b-1a54-8d57c966f522.png)


それで、フォームの作成が完成です！:v:

【トリガーの作成】
------
冒頭で説明したように、トリガーはv23.4.3の中に、とても大事な存在です。
早速トリガーファイルを作りましょう。
トリガーファイルの作成方法が二つがあります。
・直接シーケンスファイルを作成
・フォームのデザイナーから作成
今回はデザイナー画面から作成します。
対象コンポーネントをホバーし、「:zap:」からトリガーファイルを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/04c10dc3-db16-98fb-2b98-749c56611cf0.png)
分かりやすいため、ファイル名は「Button1_ClickTrigger」にしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/1a839dec-8413-d527-a636-22ded78acac1.png)
シーケンスの先頭に、「フォーム イベント トリガー」アクティビティが既に配置されております。
これはこのファイルとボタンのクリック処理とバンディング仕組みとなります。
ボタンのクリック処理から作成したトリガーのため、フォームとイベントを既に設定できました。
手動でファイルを作成する場合、フォームの選択とイベントの指定も可能です。
★「フォーム イベント トリガー」アクティビティは必ずシーケンスの一番先頭に配置する必要があります。



【フォームの値の取得】
------
上で作成したトリガーファイルに続けて作業しましょう。
まず、「フォームの値を取得」をワークフローに追加し、作成した「TestForm」を指定します。
その場合、「引数」の編集がロックされて、編集できなくなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/8c7e089b-d7cc-288f-26db-55929860840e.png)
そして、選択した「TestForm」を「×」でクリアし、引数の編集画面を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/48405b6a-732e-92bb-b1f7-7b455881adfb.png)

「キー」の部分はフォーム側のコンポーネントの値となります。右の値の箇所に変数を入れると、フォームの値が設定した変数に渡します。
最初にフォームを選択しないと、「ディクショナリ」画面にキー情報が何もありません。一度フォームを選択したら、キー情報一覧を自動的に取得します。
保存したら、もう一度フォームを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/90bbc6ef-498e-9be0-eb6d-680325d5093c.png)
★「フォームの値の設定」アクティビティの作り方も同様です。

はい、トリガー作成完成！

【ワークフローの実装】
------
Main.xamlファイに順番に以下のアクティビティを追加します。
・「フォームを表示」
・「ローカル トリガーを実行」（アクティビティパネルの「トリガー」フィルターは要チェック）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/c50030db-efff-6849-b0a1-50f45be4d8d9.png)
「ローカル トリガーを実行」は、表示されているフォームのすべてのトリガーを開始します。（すべてのトリガーを監視します。）
実行したら、Mainのワークフローの処理は「ローカル トリガーを実行」で止まります！
トリガーの実行が実装できたら、次はトリガーの停止を実装します。

手動で「フォーム イベント トリガー」を追加し、「ローカル トリガーを停止」を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/ca2e0489-d5cc-b8d7-73b5-3877d4a78bd6.png)
フォームが閉じられた際に、すべてのローカルトリガーの監視は停止となります。

Main処理の最後に「終了」ログを追加し、プロジェクトの作成が完成となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/adf0c041-4089-f1bb-a70e-0855515a31d1.png)


【動作検証】
------
ワークフローを実行すると、最初にTestformが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/3394cde7-e92e-0a3d-c3be-a28bee7ab007.png)

テキストフィールドに文字を入力し、検証ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/5b39aa2c-0b14-5f2b-da3e-b0e138f2e9ff.png)

フォームを閉じて、処理が終了となります。
さて、実行ログを確認しましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467724/f6fd9b69-9ca8-8a49-2a19-145b836cd8a1.png)

想定通り、入力した文字列と処理の最後に「処理終了。」がログに出力されました。
動作検証完了！


【最後】
------
v23.4.3フォームの作り方は今までと相当異なりますので、作り方が分からないとできたプロジェクトを見ても分からない部分が結構あると思います。実際作ってみたら、難しいことでもないし、できたらとても楽しかったです。:grin:
v23.4.3フォームを作ってみませんか。

それでは、またね！