UiPath Appsが今回のアップデートからStudio Webの画面からも作成できるようになりました！Web アプリ プロジェクトという名前での登場です。この機能を利用することでアプリとワークフローの連携が非常に簡単にできるようになりました。
今回はこのWebアプリプロジェクトで、DataServiceではなくExcelをデータテーブルにしたアプリを作ってみようと思います。
今回作成するもの
アプリ上で郵便番号を入力すると住所を返すシンプルなアプリを作成します。事前準備
- 郵便局のサイトから郵便番号と住所がマッピングされたCSVデータをダウンロード
- CSVファイルをAutomation Cloudのストレージバケット上にアップロード
ダウンロードしてきたCSVが文字化けする場合にはCSV UTF-8 (コンマ区切り)(*.csv)で保存すると解決する場合があります
形式をそろえたファイルは以下に格納しているので、検証用でお使いください。
https://drive.google.com/drive/folders/1mufFmUpBOqT5YKr6Pt4zcveL9NP4SgGL?usp=sharing
表示画面の編集
1. Studio Webの画面からWebアプリプロジェクトを作成
Stuio Webを開き、[新しいプロジェクト] から[新しいWebアプリプロジェクト] を選択します。AppsではなくStudio Webの画面からプロジェクトを作成することに注意です。
2. テンプレート画面を選択、編集
今回は画面はテンプレートの[フォームD]を利用します。アプリの表示名を変更してZipの項目と画面下部にあるSubmitボタン以外は削除します。下のスクショではそれぞれのフィールドの項目を日本語に変更したあとのものです。 不要の項目の削除は左の画面から対象の項目を選択したうえで右クリックすると削除のボタンが表示されます。
3. 検索結果の表示フィールドの配置
検索した値を表示するために画面左部の[ツールボックス]から[ラベル]を追加します。
これで画面の準備はできました。
オートメーションの構築
1. ボタンに対するオートメーションを作成
今回は検索ボタンを押したときに入力された郵便番号をキーとしてデータテーブルを検索し、住所を返すオートメーションを作成します。まずはじめに画面下部の検索ボタンを選択した状態で、右側の[イベント]に移動します。[イベント]には[オートメーションを定義]というボタンがあるのでクリックします。Webアプリプロジェクトではオートメーションを各ボタンのイベントごとに作成することができます。例えば編集グリッドだと行の選択時、行の追加時、行の変更時、行の削除時の4つのイベントがあり、それぞれにオートメーションを作成することができます。
2. ダウンロードしてきたCSVを読み込む
最初にストレージバケット上にあげたファイルをダウンロードします。 プラスボタンを押すと追加するアクティビティを選択できるので[ストレージファイルをダウンロード]のアクティビティを選択し配置します。
作成したストレージバケットの情報をもとに各項目を埋めます。下の水色の四角で囲まれた[ファイル]の項目は自動で設定されるので変更の必要性はありません。
同様に[CSVを読み込みアクティビティ]を配置します。
[読み込み元リソースファイル]にはストレージバケットからダウンロードしてきた[ファイル]を選択します。
[先頭行をヘッダーとする]の項目はオフにしてデータの読み込みは完了です。読み込んだ値は[出力先]という自動で作成された変数にデータテーブル型として格納されます。
3. データテーブルを検索する郵便番号でフィルタ
[データテーブルをフィルターアクティビティ]を追加し、データテーブルには[出力先]を入力します。
フィルタの条件を作るために式エディターを開きます。[出力先]の1列目に郵便番号が入っているので、フィルタ条件の左辺を出力先.Columns(0)とします。
式エディターの下部にあるAutopilotの機能を利用することで、自然言語でも同様の式を生成することができます。
右辺は画面上で入力した値をとります。変数を使用からZipの中にあるValueを選択してください。これは画面上のどこのパーツで入力された値を取得するかを選択します。
最後にフィルタされたデータのみが残るように設定を変更します。デフォルトは削除する設定になっているので、[一致する要素のみを保持]に変更することを忘れないようにしてください。
4. 出力用の変数と画面の設定
フィルタされて抽出された行から住所を取り出します。下の図のようにフィルタした結果は行で返されているので、直接、住所を取得することができません。
住所を取得する前に、抽出されたデータを格納するための変数を作ります。
画面左にある[アプリの変数]のプラスボタンから[新しい変数]を作成します。変数名は自由で問題ありません。型はテキストに指定します。
[変数の値を設定]のアクティビティを追加し、[変数]の項目には先ほど作成した変数を入れます。[変数を使用]から探す場合だとAppVariableという項目の下に出てくることに注意です。
[設定する値]の項目は式エディターを開いて編集します。変数を挿入から、フィルターしたデータの[最初の行]を選択します。
今回は3列目の値が欲しいので、最初の行(2).ToStringとしました。
これでオートメーション側の設定は完了です。最後にページの編集に戻り、ラベルの値として先ほど作った変数を追加したら完成です。
実行確認
郵便番号をいれて検索すると2，3秒して出力されました！ 今回はボタンを押すたびにExcelを参照しているので時間はかかりますがページを読み込んだ時にだけ参照するように作りを変更すればもっと早くなりそうです。
※もとのCSVのままだと区までしかでないので、CSVを加工するとより詳細な情報が出せるようになります。
使ってみた感想
使ってみた率直な感想としては、オートメーションとの連携が1つの画面から設定できるので、複雑な処理を手軽に構築できるようになったなという感想です。
既存のイベントルールとの比較すると、イベントルールでは変数に値を設定したり、IntegrationServiceの機能を呼び出すことができましたが、デフォルトで設定されているルールの数は多くなく物足りなさを感じていました。既存Appsからでもオートメーションを呼び出すことで複雑な処理も実現できていましたが、その場合はあらかじめ別にオートメーションを作成しておく必要性があり煩わしさはありました。
処理の速度面の検討は次の記事で言及してみようと思います。
みなさんもぜひ試してみてください！