Go to Qiita Advent Calendar 2024 Top
LoginSignup
12
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@HirotakaTakehana(Hirotaka Takehana)inUiPath

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

Last updated at Posted at 2023-05-09

UiPath Formsとは

UiPathで有人実行型の自動化業務を開発しているときに、ユーザーが使う入力ボックスや表示画面などのフォームを作りたいときはないでしょうか。簡単なことであれば「入力ダイアログ」アクティビティや「メッセージボックス」アクティビティなどで対応されている方も多いと思いますが、より高度で複雑なことができるのがUiPath Formsです。ベースは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 リリースノート

Studio 2023.4における変化点を確認する

UiPath Studioのリリースノートによると、「Trigger-based attended automation」に関連してフォームの機能を向上させ、フォームの構築と使用がさらに簡単になったと書かれています。
2023.4.0リリースノート

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

Studio上の操作

事前準備

まずは、Studioで新規プロセスを作成します。今回はUiPath Studio 2023.4のデフォルトであるWindowsプロジェクトで作成します。
image.png

入力フォームを作成する

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

  1. Studioの「新規」から「フォーム」をクリックします。
    image.png

  2. フォーム名を「Form1」と設定して「作成」をクリックします。
    image.png

  3. フォームデザイナー画面が表示されました。アクティビティを置いて起動する流れより、わかりやすくなったかなと思います。ただし、実際に使うためには、UiPath.Form.Activitiesが必要なので結局インストールすることになります。UiPath.Form.Activitiesがインストールされていない状態でフォームを作成すると、上部に警告メッセージが表示されます。「パッケージをインストール」をクリックしてみます。
    image.png
    UiPath.Form.Activities 23.4.3ををインストールすると、警告表示が消えます。
    image.png
    UiPath.Form.Activities 23.4.3には以下のような種類の部品が入っていました。詳細はこちらです。
    image.png

  4. 何もないフォームだと味気ないので、姓と名を入力するテキストフィールドを作成します。左側の「基本コンポーネント」から「テキストフィールド」をドラッグアンドドロップで配置します。
    image.png

  5. 「表示」タブの「ラベル」に「First Name」と入力します。また、「フィールドキー」タブで「プロパティ名」を「firstName」とします。最後にプレビュー画面を確認し、「保存」をクリックします。
    image.png
    image.png

  6. 同様に姓も「Last Name」としてテキストフィールドを追加します。プロパティ名は「lastName」とします。保存すると、フォームの見た目は以下のようになります。
    image.png

入力フォームを表示させる

作ったフォームを表示させるには、「フォームを表示」アクティビティを使用します。UiPath.Form.Activitiesをインストールすると、「フォーム」のカテゴリーから選択可能になります。
image.png

  • フォームを選択で「Form1」を選びます。

  • 「ワークフローの実行を続行」をオフにします

  • 引数のディクショナリ内の2個の項目をクリックします。
    image.png

  • キーには先ほど指定したプロパティ名が設定されています。引数の方向をOutにします。
    image.png

出力フォームを作成する

  • フルネーム表示用のフォームをもう1つ作成します。
    image.png

  • 「詳細」から「コンテンツ」をドラッグアンドドロップします。
    image.png

  • ラベルを「Full Name」とします。
    image.png

  • 「フィールドキー」タブの「プロパティ名」をfullNameとします。コンテンツにはfullNameの値を表示させたいので、{{data.fullName}} を設定します。最後に保存します。
    image.png

出力フォームを表示させる

  • Form2を表示するための「フォームを表示」を配置します。
    image.png

  • 「ワークフローの実行を続行」をオフにします

  • フォームを選択で「Form2」を指定します。

  • 引数をクリックします。

  • キーに「fullName」、値に「姓 + " " + 名」を設定します。方向はInのままで良いです。

  • 保存します。
    image.png

最終的には以下のような簡単なワークフローとなります。
image.png

実行する

実行すると、最初に1つ目のフォームが起動します。それぞれ名・姓を入力します。
image.png

すると、次のフォームで姓＋名の形で表示されました。
image.png

まとめ

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

12
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?