LoginSignup
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@KajiitainUiPath

【UiPath】【Apps】デモアプリの実装に学ぶ👓

Last updated at Posted at 2025-06-19

はじめに

  • 本記事は、公式ガイドのAppsのサンプルソースをみて気になった実装をメモしたものです。
  • 記事の内容は、個人の見解または確認結果であり、UiPath の公式見解ではありません。
  • 製品仕様や参考画像は2025年6月15日時点のもので構成しています。

デモアプリの参考ページ

アプリのトピック アプリの概要
外部コンテキストを設定する アプリケーションの起動時に外部コンテキストを設定できます。これは、ロボティック プロセス オートメーション (RPA) プロセスなど、他の場所からアプリを起動するときに特に役立ちます。
カスタム HTML: グラフを作成する このアプリは、d3.js や chart.js などの JavaScript ライブラリを使用して、さまざまな種類のグラフを作成する方法を示しています。
カスタム HTML: 変数の関数を使用して対話型の円グラフを作成する このアプリでは、エンティティ、[カスタム HTML]、および [編集グリッド] コントロールを組み合わせて、対話型の円グラフを表示します。
カスタム HTML: 日付/時刻選択を作成する このアプリは、カスタムの日付時刻ピッカーを作成する方法を示しています。
カスタム HTML: パスワード フィールドを作成する このアプリは、パスワード フィールドを作成する方法を示しています。
カスタム HTML: 署名入力フィールドを作成する このアプリは、署名の入力フィールドを作成する方法を示しています。
アクション アプリを使用する このアプリは、従業員のオンボーディング用の Action Center のフォームを作成する方法を示しています。
メディア: 画像をバインドする このアプリは、メディア ファイルを [画像] コントロールにバインドする方法を示しています。
編集グリッド: エンティティを操作する このアプリでは、[編集グリッド] コントロールを使用してエンティティを操作する方法を示します。
表: エンティティを操作する このアプリでは、[表] コントロールを使用してエンティティを操作する方法を示します。
テキストボックス: 特定のプロパティを検出する このアプリでは、[テキストボックス] コントロールのプロパティを活用する方法を示します。
日付の選択: 日付の検証 このアプリは、複数の日付検証フィールドを作成する方法を示しています。
カスタム リストを使用する このアプリは、カスタム リストを作成する方法を示します。
Web アプリ: ブース アプリ このテンプレートは、Studio Web のワークフローを利用して、エンド ユーザーからデータを収集する Web アプリを示します。
Web アプリ: メール生成アプリ このテンプレートは、Studio Web のワークフローを利用してメールを生成する Web アプリを示します。
レスポンシブでモバイルフレンドリーな埋め込みアプリ この Web ページは、画面サイズの変更に反応する埋め込みアプリを示します。

実装メモ

外部コンテキストを設定する

外部コンテキストの設定.JPG

App.QueryParam() 関数をテキストのプロパティにバインドしておくことで外部引数を渡せるようになります。
（設定例）
App.QueryParam(Of Integer)("intv", 100).ToString

外部コンテキストの設定2.JPG

アプリのURLの末尾（el=vb）の後ろに引数の情報を渡してみます。
「&{引数名}={値}」の形式で指定します。

https://cloud.uipath.com/{組織ID}/apps_/default/run/{省略}?el=vb&intv=250

外部コンテキストの設定3.JPG

カスタム HTML

カスタムHTMLグラフ作成.JPG

チャートのプロパティから「HTML」「CSS」「JAVASCRIPT」の編集が可能です。

カスタムHTMLグラフ作成2.JPG

カスタムHTMLグラフ作成3.JPG

変数の値の操作方法例

  • 変数の値を取得　→　App.getVariable('sampleValue');
  • 変数に値を戻す　→　App.setVariable('sampleValue', ★値);
  • 変数の値が変わったら同期する　→　App.onVariableChange('sampleValue', value => { document.getElementById('asyncnum').value = value; });

具体的に説明するため、入力値を反映させるための入力欄を1つだけ持つカスタムHTMLを配置します。
あとは通常のテキストボックスを2つとボタンを1つ配置します。（下図）

カスタムHTMLグラフ作成7.JPG

コードエディターを開き、次の内容を設定します。

HTML
<div class="textContainer">
  値が変更されたら同期：
  <input type="text" name="asyncnum" id="asyncnum"  value="" style="width:22em" />
</div>
JAVASCRIPT
// 初期値を非同期で取得して input にセット
(async () => {
  const internalValue = await App.getVariable('sampleValue') || "";
  document.getElementById('asyncnum').value = internalValue;
})();

// sampleValue が変更されたら input の値を更新
App.onVariableChange('sampleValue', value => {
  document.getElementById('asyncnum').value = value;
});

ページにアクセスすると、初期値を非同期取得しているため、上段と中段に値が入ります。

カスタムHTMLグラフ作成4.JPG

次に、下段の入力欄（「変更する値」）に値を入れてクリックします。

カスタムHTMLグラフ作成5.JPG

最後に中段の入力欄（「サンプル値1」）の値を変更し、上段と中段のみ変わることを確認します。

カスタムHTMLグラフ作成6.JPG

デモアプリのグラフの値であれば、次の様にして変更できます。

JAVASCRIPT
(async () => {
  // App 変数 'sampleValue' の値を取得
  const internalValue = await App.getVariable('sampleValue') || 0;

  const svg = d3.select('#bar-graph')
    .append('svg')
    .attr('width', 800)
    .attr('height', 400);

  const margin = { top: 20, right: 20, bottom: 30, left: 40 };

  const width = svg.attr('width') - margin.left - margin.right;
  const height = svg.attr('height') - margin.top - margin.bottom;

  const x = d3.scaleBand().range([0, width]).padding(0.1);
  const y = d3.scaleLinear().range([height, 0]);

  const data = [
    { date: '1 Jan 2023', value: internalValue },
    { date: '2 Jan 2023', value: 450 },
    { date: '3 Jan 2023', value: 400 },
    { date: '4 Jan 2023', value: 350 },
    { date: '5 Jan 2023', value: 300 },
    { date: '6 Jan 2023', value: 250 },
    { date: '7 Jan 2023', value: 200 },
    { date: '8 Jan 2023', value: 150 },
    { date: '9 Jan 2023', value: 100 },
    { date: '10 Jan 2023', value: 50 }
  ];

  x.domain(data.map(d => d.date));
  y.domain([0, 500]); // Set y-axis domain to match the data values

  const g = svg.append('g')
    .attr('transform', `translate(${margin.left}, ${margin.top})`);

  g.append('g')
    .attr('class', 'axis axis-y')
    .call(d3.axisLeft(y));

  g.append('g')
    .attr('class', 'axis axis-x')
    .attr('transform', `translate(0, ${height})`)
    .call(d3.axisBottom(x));

  g.selectAll('.bar')
    .data(data)
    .enter().append('rect')
    .attr('class', 'bar')
    .attr('x', d => x(d.date))
    .attr('y', d => y(d.value))
    .attr('width', x.bandwidth())
    .attr('height', d => height - y(d.value));
})();

（sampleValueの値を200とした例）
カスタムHTMLグラフ作成8.JPG

画像のバインド

メディアに登録した画像の表示

画像のバインド.JPG

メディアにサンプル画像（face.jpg）を1つ追加します。
画像コンポーネントのソースに「Media.face_jpg」を指定します。

画像のバインド2.JPG

WEB上の画像の表示

プロパティのソースの詳細エディターにて、次の様に記述することでWEB上にアップロードされた画像も簡単に表示できます。（フリーアイコンズさんの画像を拝借）

new AppsFile("https://free-icons.net/wp-content/uploads/2020/09/symbol011.png")

画像のバインド3.JPG

ストレージバケットに登録した画像の表示

ストレージバケットをプロジェクトに追加します。

画像のバインド5.JPG

データ型：AppsFile の変数（sampleImage）を作成した後、
Mainページの読み込みイベントに「ストレージ バケットからファイルを取得]」のルールを設定します。

画像のバインド6.JPG

最後に画像コンポーネントのプロパティに変数（sampleImage）を設定したら完了です。

画像のバインド7.JPG

（読み込み例）
画像のバインド4.JPG

編集グリッドの操作

✔ こちらは Studio Web でアプリ作成した際の手順です。
次のAppsのガイドを参考にしていますが、若干イベントまわりの設定・記述は異なります。
https://docs.uipath.com/ja/apps/automation-cloud/latest/user-guide/use-datatable-with-table-and-edit-grid-controls

説明用に「編集グリッド」「ボタン」「テキスト領域」を配置します。

編集グリッド.JPG

画面左のエクスプローラー ＞ App ＞ 右クリック ＞ アプリの変数より、String と DataTable 型の変数を用意します。

編集グリッド2.JPG

編集グリッド3.JPG

次に、MainPage の読み込みイベント（ワークフロー）を作成します。
「テキストからデータテーブルを生成」アクティビティをもちいて編集グリッドに表示するテーブルデータを用意します。
※出力先に先ほど作成したテーブル変数（tempTable）を設定します。

編集グリッド4.JPG

編集グリッドの全般タブに移り、データソースを設定します。
（例）tempTable.ToListSource

編集グリッド5.JPG

表示したい列はカラム名をソース欄に指定するだけです！

編集グリッド6.JPG

今度は編集グリッドを出力するためのイベント（ワークフロー）を設定します。
「データテーブルをテキストとして出力」を配置し、出力元のテーブルと出力先のテキストを次の様に設定します。
出力元テーブル：Controls.MainPage.EditGrid.DataSource.data.CopyToDataTable
出力先テキスト：tempArg

編集グリッド7.JPG

最後に、編集内容を反映させるためのイベント（ワークフロー）を設定します。

イベントを設定しない限り、編集グリッドで作業後に「✔（更新）」ボタンを押下しても初期値に戻ってしまいます。

編集グリッド8.JPG

（行の変更時の例）
編集グリッド9.JPG

更新対象の変数：AppVariable.tempTable
設定する値：AppVariable.tempTable.UpdateRowAt(MainPage.EditGrid.RowIndex, MainPage.EditGrid.SelectedItem)

（完成動作 - 起動後）
編集グリッド10.JPG

（完成動作 - 編集後）
編集グリッド11.JPG

さいごに

いかがでしたでしょうか。
カスタムHTMLやStudio Webのアプリ開発では、アプリ変数の扱いで結構沼にはまったので、これからAppsに取り組む方の役に立てばと書きました。
読んで助かった方がいたら(・∀・)ｲｲﾈ!!をポチっとお願いします！
最後までお読みいただきありがとうございました(・ω・)ノ

2
0
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
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?