この記事の内容は？
本稿では UiPath フォーム アクティビティ パッケージを使用してフォームを開発する上でのヒントをいくつかご紹介します。
UiPath フォーム アクティビティ パッケージは UiPath Studio 上の GUI 操作で簡単に、デザイン性に優れかつ高度なデータ入力フォームを作成することができる非常に便利なコンポーネントです。
UiPath フォーム アクティビティ パッケージは V23.4.3 で大きな変更が行われ、当該バージョン以降では「新しいフォーム エクスペリエンス」を備えたものとなっています。
本稿の内容は UiPath.Form.Activities V23.10.5 で検証しており、「新しいフォーム エクスペリエンス」を前提とします。
すでに公式ドキュメントに様々なユースケースを実現する方法がまとめられているため、本稿の内容はこれらを補完する内容となります。
https://docs.uipath.com/ja/activities/other/latest/workflow/form-how-to-guides
本アクティビティのコア部分は form.io というJavaScriptライブラリをカスタムしたものであるため、デバッグにはフロントエンド（JavaScript, HTML, CSS）の知識が必要になります。
また、UiPath の公式ドキュメントに記載がない部分については form.io 側のドキュメントあるいは実装を辿ることも助けになることがあります。
デバッグ
開発者ツール
フォームを表示した後にフォーム内を右クリックして表示されるメニューから、[開発者ツール]を開くことができます。
この機能の使い方の例が次の公式ドキュメントに記載されています。
開発者ツール > コンソール
[開発者ツール] > [コンソール]画面でできることについて補足します。
JavaScript 要素の操作
次のように formio と入力すると上位に formio, Formio, FormioUtils という候補が表示されます。
それぞれ次のようなものになります。
| 名前 | 説明 |
|---|---|
| formio | FormIoHostControllerクラスのインスタンス |
| Formio | formio.full.min.jsで定義されているクラス |
| FormioUtils | FormIoUtil.jsで定義されているクラス |
必要に応じ、上記に対して『フォームのスクリプトを実行』アクティビティを使用して操作を行うことができます。
formio
デバッグやJavaScriptからの操作でアクセスする対象は主に次のようなformioの子孫のオブジェクトです。
| 名前 | 説明 |
|---|---|
| formio | フォームのインスタンス |
| formio.activeForm.data | GUI でフォームを編集する際に JavaScript コードからアクセスする data 変数 |
| formio.activeForm.components | フォームのコンポーネントが格納されている |
| formio.form | 『フォームを表示』アクティビティが表示するウィンドウのデータ（例: top, leftなど） |
Formio
通常は Formio を直接使用することはないため、紹介は割愛します。
FormioUtils
formio を便利に扱うためのユーティリリティクラスです。
このクラスを使用することで、例えば次のように指定したラベルを持つコンポーネントを検索するなどの処理が簡単に行なえます。
FormioUtils.searchComponents(formio.activeForm.components, {label: 'Close'})
このクラスが提供する関数の詳細については次のガイドを参照してください。
エラーの出力
フォーム アクティビティ内で生じたエラーは通常[開発者ツール] > [コンソール]画面に出力されます。
例えば次のようにコンポーネントの [条件] > [高度な条件] にJavaScriptコードを記述したとします。
このとき、data.targetFileが存在しなければ当然エラーが発生しますが、GUI 上や Studio のログにはエラーの出力は行われません。このようなエラーは [開発者ツール] の [コンソール] で確認する必要があります。
ちなみにこのエラーは次のように formio.activeForm.data.targetFile が undefined であることを確かめられるので、
コンポーネントの構成を確認して、targetFile は containerの下に存在するようだ、などと確かめられます。
論理 > 高度な論理 > トリガー を発火させる方法
次のような設定を行ったとき、closeLogicTrigger を発火させたいとします。
ボタン コンポーネントの[ボタン イベント]として設定することでボタンのクリック時にイベントを発火させることができます。
イベントは JavaScript からも発生させることができます。
formio.activeForm.events.emit("formio.closeLogicTrigger")
この方法でもトリガーを発火できますが、公式ドキュメントに明確に記述されている方法ではないため、将来または過去のバージョンでも同様に動作するかは断言ができません。
あるコンポーネントがどのようなトリガーに反応するかは次のように調べることができます。
FormioUtils.searchComponents(formio.activeForm.components, {label: 'Close'})[0].events.eventNames()
[HTML 要素]コンポーネント内の要素をコントロールする
[HTML 要素]コンポーネント内には任意の要素を配置することがあります。（デフォルトでは安全な要素のみ）
[HTML 要素]コンポーネント内に配置した要素の値はワークフロー側とは連携されません。
例えば[HTML 要素]コンポーネント内にInput要素を配置し、そのInput要素に入力された値をワークフローから取得することは想定されていません。この動作は仕様であり、ガイドの次の箇所に記載があります。
コンポーネントを使用すると、情報をフォームに表示専用で追加できます。コンポーネントの値はワークフローに返されません。
https://docs.uipath.com/ja/activities/other/latest/workflow/forms-advanced-components#content
既存のコンポーネントと同様にこの「[HTML 要素]コンポーネント内のInput要素」の値を data として扱いたい場合、次のように『フォームのスクリプトを実行』アクティビティを使って設定を行うことで実現できます。
document.getElementById('inputField').addEventListener('change', (event) =>
{
formio.activeForm.data.inputFieldValue = event.target.value;
});
この例では対象のInput要素のIdが inputField、データの格納先が data.inputFieldValue です。
この要素の値が変更されるたびに、変更後の値が data.inputFieldValue に保存されます。
おわりに
本稿の内容がUiPath フォーム アクティビティ パッケージを使いこなす上での一助となりましたら幸いです。