Apps (アプリ)

カスタム HTML

[カスタム HTML] コントロールは上級ユーザー向けです。HTML、CSS、JavaScript のプログラミング言語の柔軟性を利用し、ビジネスニーズに応じてカスタムの対話型コントロールを作成できます。このコントロールには、HTML、CSS、JavaScript のコード専用のエディターが含まれているため、外部でホストされている CSS ファイルや JavaScript ファイルを URL を介して組み込めるという利点もあります。

全般

コードエディターを開く - 3 つのパネルで構成されるエディターを開いて、HTML、CSS、JavaScript のコードを追加できます。
アクセシブルラベル - コントロールの説明です。このプロパティはスクリーンリーダーによって使用され、アクセシビリティを向上できます。
非表示 - true の場合、実行時にコントロールが非表示になります。
無効化 - true の場合、実行時にこのコントロールを非アクティブにします。HTML、CSS、JavaScript のコンテンツは読み込まれますが、クリックなどのユーザーの操作には応答しません。

イベント

イベントはありません。

スタイル

コントロールの配置 - 既定では、親の配置を継承します。親とは異なる配置を設定することもできます。既定の親の配置に戻すには、現在優先されているオプションの選択を解除します。

注: 配置は、親に対して選択したレイアウト ([縦方向]/[横方向]) によって異なります。
枠線 - コントロールの枠線です。枠線の太さと半径を設定できます。
マージン - コントロールのマージンです。既定では 4px のマージンが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティの組み合わせは、[マージン] セクションの右側にある [リンク] ボタンをクリックして解除できます。
サイズ - コントロールの幅と高さです。既定では、サイズは [auto] に設定されています。最小値または最大値を設定するには、3 点リーダーメニューのアイコン (...) をクリックします。

カスタム HTML 用のコードエディター

[カスタム HTML] コントロールのコードエディターには 3 つのパネルがあり、HTML、CSS、JavaScript のプログラミング言語でコードを入力できます。各エディターでは、IntelliSense (コードの自動補完機能) と構文の強調表示機能がサポートされています。

このパネルから入力したコードはプロジェクトにコンパイルされ、プレビュー用に App Studio でレンダリングされます。コントロールの機能を確認するには、アプリをプレビューします。

重要:

各エディターのコンテンツの最大サイズは 5 MB です。コンテンツがこのサイズを超えると、変更を保存できなくなります。
IntelliSense は、HTML エディター内に記述した CSS と JavaScript コードでは機能しません。

外部リソースを追加する

定義済みのスタイルやスクリプトが既にある場合は、それらをこのコントロール内で参照できます。対応する CSS パネルや JavaScript パネルでコードを記述する必要はありません。

既存の .css または .js ファイルを参照するには、以下の手順に従います。

[カスタム HTML] コントロールのコードエディターで、[外部リソース] タブに切り替えます。
[CSS] セクションで、外部 CSS ファイルを追加します。相互運用性を確保し、アプリが実行される場所で確実にファイルを利用できるようにするため、ファイルはネットワークでアクセス可能な URL でホストされている必要があります。
[JavaScript] セクションで、外部スクリプトファイルを追加します。相互運用性を確保し、アプリが実行される場所で確実にファイルを利用できるようにするため、ファイルはネットワークでアクセス可能な URL でホストされている必要があります。
外部リソースをすべて追加し終わったら、[保存] をクリックします。

Tab キーのアクセシビリティのショートカットキー

既定では、Tab キーを押すと、現在のエディター内にタブスペースが追加されます。Tab キーの動作をカスタマイズするには、次のショートカットキーを使用します。

OS	ショートカットキー	動作
Windows	Ctrl + M	パネル間を移動し、エディターに表示されているボタンにフォーカスを変更するよう Tab キーに指示します。Ctrl + M キーをもう一度押すと、Tab キーの既定の動作に戻ります。
macOS	Ctrl + Shift + M	パネル間を移動し、エディターに表示されているボタンにフォーカスを変更するよう Tab キーに指示します。Ctrl + Shift + M キーをもう一度押すと、Tab キーの既定の動作に戻ります。

HTML エディター

このパネルではコントロールの構造を入力できます。通常は HTML コードブロックの <body></body> タグ内に含まれています。

たとえば、対話型の円グラフのコンテナー要素をアプリに追加するには、次の HTML スニペットを使用します。

<canvas id="myChart" class="chart-container" style="width:100%;max-width:600px"></canvas><canvas id="myChart" class="chart-container" style="width:100%;max-width:600px"></canvas>

場所：

id="myChart" は、HTML 要素内に対話型の円グラフを生成する、JavaScript の「myChart」要素を参照します。詳しくは、「JavaScript エディター」をご覧ください。
class="chart-container" は、HTML 要素内に円グラフのスタイルを追加する CSS クラス「chart-container」を参照します。詳しくは、「CSS エディター」をご覧ください。

CSS エディター

このパネルでは、コントロールのスタイルと、そのコントロール内の要素を入力できます。

たとえば、円グラフに色と枠線を追加するには、次の CSS スニペットを使用します。

.chart-container {
    background-color: #f3f7e9;
    border: 1px solid #cccccc;
}.chart-container {
    background-color: #f3f7e9;
    border: 1px solid #cccccc;
}

JavaScript エディター

このパネルでは、コンテンツのタイムリーな更新、マップ、2D/3D グラフィックアニメーションのような、コントロールの対話型の要素を作成できます。

たとえば、Apple 製品の全世界の売上を示す円グラフを作成し、選択したスライスの値を表示するようにデザインするには、以下の手順を実行します。

次の JavaScript 外部リソースを追加します。

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.jshttps://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js

次の JavaScript スニペットを使用します。

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['iPhone', 'iPad', 'MacBook', 'Apple Watch', 'AirPods'],
    datasets: [{
      label: 'Sales',
      data: [120000, 80000, 50000, 40000, 30000],
      backgroundColor: [
        '#5CB85C', // Green
        '#F0AD4E', // Orange
        '#D9534F', // Red
        '#5BC0DE', // Light blue
        '#999',    // Gray
      ],
      borderColor: '#fff',
      borderWidth: 2,
    }],
  },
  options: {
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Apple Products Sales',
      },
    },
  },
});const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['iPhone', 'iPad', 'MacBook', 'Apple Watch', 'AirPods'],
    datasets: [{
      label: 'Sales',
      data: [120000, 80000, 50000, 40000, 30000],
      backgroundColor: [
        '#5CB85C', // Green
        '#F0AD4E', // Orange
        '#D9534F', // Red
        '#5BC0DE', // Light blue
        '#999',    // Gray
      ],
      borderColor: '#fff',
      borderWidth: 2,
    }],
  },
  options: {
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Apple Products Sales',
      },
    },
  },
});

カスタム HTML で変数を使用する

[カスタム HTML] コントロールと、他のコントロールや連携との間の通信を設定するには、変数を作成し、組み込み関数 setVariable()、getVariable()、onVariableChange() を使用することをお勧めします。

getVariable()

既存の変数の値を取得するには、JavaScript エディターでこの関数を使用します。

たとえば、変数の値を internalValue に渡すには、次の JavaScript スニペットを使用します。

async function init() {
  let internalValue = await App.getVariable('<app_variable_name>');
}
init();async function init() {
  let internalValue = await App.getVariable('<app_variable_name>');
}
init();

注:

getVariable() 関数は非同期であるため、await を使用する必要があります。
関数内で getVariable() を呼び出す場合は、その関数は async としてください。この例では init() 関数を作成してすぐに呼び出しました。
getVariable() を最上位レベルで呼び出す場合は、async 関数内に埋め込みます。

無効な変数名などのエラーを処理するには、トライキャッチステートメントを使用します。以下に例を示します。

async function init() {
  try {
    const value = await App.getAppVariable("test");
  } catch (e) {
    console.log("Error in evaluating app variable:", e);
  }
}
init();async function init() {
  try {
    const value = await App.getAppVariable("test");
  } catch (e) {
    console.log("Error in evaluating app variable:", e);
  }
}
init();

setVariable()

既存の変数に値を設定するには、JavaScript エディターでこの関数を使用します。最初の引数は変数名、2 番目の引数は設定する値です。

async function setValue() {
  await App.setVariable('<app_variable_name>', <app_variable_value>);
}
setValue();async function setValue() {
  await App.setVariable('<app_variable_name>', <app_variable_value>);
}
setValue();

注:

設定操作が完了するまで待ってから他のコードを実行するには、await を使用します。

無効な変数名や、変数と設定値の型の不一致などのエラーを処理するには、トライキャッチステートメントを使用します。以下に例を示します。

try {
  App.setVariable('<app_variable_name>', <app_variable_value>);
} catch (e) {
  console.log("Error in setting app variable:", e);
}try {
  App.setVariable('<app_variable_name>', <app_variable_value>);
} catch (e) {
  console.log("Error in setting app variable:", e);
}

onVariableChange()

既存の変数の値の変更をリッスンし、変数の最新の値にアクセスするには、JavaScript エディターでこの関数を使用します。

App.onVariableChange('<app_variable_name>', value => {
  console.log("Latest value: ", value);
});App.onVariableChange('<app_variable_name>', value => {
  console.log("Latest value: ", value);
});

次の例では、onVariableChange() によって返される関数を deregister 変数に代入します。次に、変数の変更のリッスンを停止する場合は、deregister() 関数を呼び出すことができます。

const deregister = App.onVariableChange('<app_variable_name>', value => {
  console.log("Latest value: ", value);
});

// To stop listening for value changes, the deregister function can be invoked like below
deregister();const deregister = App.onVariableChange('<app_variable_name>', value => {
  console.log("Latest value: ", value);
});

// To stop listening for value changes, the deregister function can be invoked like below
deregister();

注:

リスナーは、[カスタム HTML] コントロールが完全にレンダリングされた後に開始されます。[カスタム HTML] コントロールが初期化される前に変数の値が変更された場合、更新後の値はキャプチャされません。

最新の変数値を取得するには、onVariableChange() を呼び出す前に getVariable() を呼び出します。
HTML コントロールとその中の関数は、実行時にコントロールが表示された後に初期化されます。

変数の型

アプリの変数の型	変数の関数からの応答のサンプル
Text (String)	"Hello world"
UInt64 (Int)	100
Decimal number	50.25
True/False (Boolean)	True
DateOnly	2024-01-02 (形式: YYYY-MM-DD)
DateTimeOffset	2024-01-06T09:54:41.9170000Z (同等の JS 形式: Date オブジェクトの ISO 文字列)
AppsFile - [ファイルピッカー] コントロールの値	JS File オブジェクト
AppsFile - URL から作成される値例: `new AppsFile("https://image.jpg")`new AppsFile("https://image.jpg")	File オブジェクト: `{FileSize: 0, Name: "", URL: "https://image.jpg", __infoType: "$metadata"}`{FileSize: 0, Name: "", URL: "https://image.jpg", __infoType: "$metadata"}
GUID	"5637F7DB-391D-4C8B-805D-0A918531CA3E"
List(Of string)	["Banana", "Kiwi", "Apple", "Lemon"]
ListSource(Of <Entity>)	`{ data: [{Name: "John", Age: "28", ...},{Name: "Kane", Age: "48", ...}], totalRecords: 2 }`{ data: [{Name: "John", Age: "28", ...},{Name: "Kane", Age: "48", ...}], totalRecords: 2 }
<Entity> (Single entity row)	`{ Name: "John", Age: "28", ... }`{ Name: "John", Age: "28", ... }
ListSource(Of <Choiceset>)	`{ data: [{DisplayName: "Male", Id: "00F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Male", ...}, {DisplayName: "Female", Id: "01F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Female", ...}], totalRecords: 2 }`{ data: [{DisplayName: "Male", Id: "00F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Male", ...}, {DisplayName: "Female", Id: "01F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Female", ...}], totalRecords: 2 }
Datatable	`[{From: 'Ahmedabad', To: 'Azua', ...},{From: 'banglore', To: 'Dominican Republic',...},...]`[{From: 'Ahmedabad', To: 'Azua', ...},{From: 'banglore', To: 'Dominican Republic',...},...]

カスタム HTML のベストプラクティス

[カスタム HTML] コントロールにはクライアント側からアクセスできるため、機密データを含めないでください。
<html> タグと <head> タグは HTML エディター内で使用しないでください。コードは自動的に <body> タグ内に追加されるためです。
[外部リソース] タブには Bootstrap、jQuery、その他の JavaScript SDK などの外部リソースの CDN URL を追加します。
変数の変更のリッスンを停止する場合は、deregister() 関数を使用します。
アプリケーションの速度の低下を防ぎ、コントロールの応答性を維持するために、大きなデータループを回避します。
DOM 要素の使用は可能な限り最小限に抑えます。DOM 要素は必要な場合にのみ作成し、古くなったら削除します。
大規模なデータセットには、標準的なスクロールではなく無限スクロールや仮想スクロールを使用します。
クリーンで最適化された冗長性のないコードを作成・維持します。

機能制限

カスタム HTML には、制御ルールをトリガーする機能はありません。
コントロールを Apps に接続するには、変数の関数 getVariable()、setVariable()、onVariableChange() を使用する必要があります。
完全なコントロールをコピーして貼り付ける場合、またはコントロールを含むページを複製する場合は、コントロールは、[スタイル] タブのプロパティのみと共に貼り付けられます。HTML、CSS、JavaScript のコードは手動で貼り付ける必要があります。
プロセスまたはキューのデータにアクセスするには、プロセスまたはキューのすべてのプロパティに変数を割り当てる必要があります。
HTML コントロールのサイズは、ポップアップまたはドロップダウンメニューの表示に合わせて動的に調整されないため、これらのメニューに合わせて HTML コントロールのサイズを設定する必要があります。
デザイン時に HTML コントロールを操作することはできません。
setVariable()、getVariable()、および onVariableChange() 関数は、実行時にのみ動作します。
変数名の変更や変数の削除は、コードエディターに自動的に反映されません。現在の変数でコードを手動で更新する必要があります。
HTML コントロールからファイルを格納する変数は、[ストレージバケットへファイルをアップロード] ルールや Data Service のエンティティの File 型フィールドの入力には使用できません。
The control can communicate with other UiPath^® components, such as Processes, Queues, or Storage Buckets, only through the use of variables.
LESS または SCSS を使用して前処理された CSS コードは、HTML コントロールとの互換性がありません。
以下の API は、セキュリティ上の理由により、使用すると警告なしに失敗します。
- download 属性を使用してダウンロードする
- Window.alert()、Window.confirm()、Window.print()、Window.prompt() を使用してモーダルを開ける
- ポインターと向きをロックする
- トップレベルのブラウザコンテキストに移動する
- requestFullscreen() を使用して全画面表示に入る
- MediaDevices.getDisplayMedia() を使用して画面をキャプチャする
- MediaDevices.getUserMedia() を使用してカメラまたはマイクにアクセスする
- 支払いをリクエストする
- navigator.geolocation() を使用して場所にアクセスする
- navigator.share() を使用してデータを共有する

[カスタム HTML] コントロールのコードをデバッグする

[カスタム HTML] コントロールのコンソールログを追加および絞り込む

JavaScript エディターで console.log() を追加します。
App Studio のセッションで F12 を押してブラウザーコンソールを開き、[Console] タブを選択します。
コンソールの設定で、[Selected context only] チェックボックスをオンにします。
コンソールページの上部にある JavaScript コンテキストドロップダウンから、目的の HTML コントロールの html-control-base.html オプションを選択します。

選択したコントロールのログがコンソールに表示されます。

詳しくは、以下のビデオをご覧ください。

ブレークポイントを追加する

JavaScript エディターで console.log() を追加します。
App Studio のセッションで F12 を押してブラウザーコンソールを開き、[Console] タブを選択します。
ログの右側にある VM メッセージをクリックします。

デバッガーが開きます。目的の行番号をクリックしてブレークポイントを選択します。

詳しくは、以下のビデオをご覧ください。

デモ

カスタム HTML: グラフを作成する

はじめに

このアプリは、d3.js や chart.js などの JavaScript ライブラリを使用して、さまざまな種類のグラフを作成する方法を示しています。

デモアプリ (ご自身でお試しください)

対話型のグラフをご自分で試す場合はデモアプリをご利用ください。

デモアプリを GitHub からダウンロード

デモアプリ (使用方法)

In UiPath^® Apps, create a new app and import the downloaded demo app.
アプリをプレビューしてすべてのグラフの種類を操作します。

カスタム HTML: 変数の関数を使用して対話型の円グラフを作成する

はじめに

This app combines entities, Custom HTML, and Edit Grid controls to display an interactive pie chart. The interactivity is activated by selecting an option from a dropdown menu, which changes the pie chart sections and the records in the edit grid. Subsequently, clicking on a chart section updates data in the edit grid.

デモアプリ (ご自身でお試しください)

対話型の円グラフをご自身で試すには、以下のデモアプリを使用するか、手順に従います。

デモアプリを GitHub からダウンロード

デモアプリをクラウドでプレビュー

デモアプリ (使用方法)

デモアプリをプレビューします。
[Filter Tickets by Customer Name] ドロップダウンからオプションを選択します。チケットの合計数、円グラフの表現、および編集グリッド内のデータが変わります。
グラフのスライス上にカーソルを合わせます。ツールチップに、カテゴリ名とチケット数が表示されます。
グラフのスライスをクリックします。編集グリッドに、選択したカテゴリのレコードが表示されます。

手順

[カスタム HTML] コントロールでエンティティと変数がどのように使用されているかを確認するには、次のアプリファイルをローカルマシンにダウンロードします。

ダウンロード後、次の手順を実行します。

In UiPath^® Data Service, click Import Schema:
1. 先ほどダウンロードした ticket_entities_schema.json ファイルを選択します。
2. [エンティティ] タブで、[Tickets] と [Tickets Source] のチェックボックスをオンにします。
3. [チョイスセット] タブに切り替え、[Continents] と [Friction Level] のチェックボックスをオンにします。
4. [インポート] をクリックします。
In UiPath^® Data Service, select the Tickets Source entity:
1. [データをインポート] をクリックします。
2. 以前にダウンロードした ticketsource_entity_data.csv ファイルを選択して、[開く] をクリックします。
3. [データ] タブに切り替えて、アップロードされたレコードを表示します。
In UiPath^® Data Service, select the Tickets entity:
1. [データをインポート] をクリックします。
2. 以前にダウンロードした tickets_entity_data.csv ファイルを選択して、[開く] をクリックします。
3. Relationship 型および Choice Set 型のフィールドのデータは、自動的にはインポートされません。これらのフィールドには手動でデータを入力する必要があります。
4. [データ] タブに切り替えます。Tickets レコードごとに、Source フィールドの値をランダムに Chat、Phone、または Email を選択して更新します。
5. [データ] タブの Tickets レコードごとに、Friction フィールドの値をランダムに 1、2、または 3 を選択して更新します。
アプリファイルをインポートするために、以下の手順を実行してから、手順 14 に進みます。
In UiPath^® Apps, create a new VB app:
1. [ファイルからインポート] をクリックします。
2. 以前にダウンロードした CustomHTMLPieChart_DemoApp.uiapp ファイルを選択して、[開く] をクリックします。
3. エラーを修正するには、インポートしたアプリのエンティティを、前の手順 2 と 3 で作成したエンティティに置き換えます。
4. インポートしたアプリで、「CustomFilterDropdown」という名前の [ドロップダウン] コントロールを選択し、[リストのソース] プロパティの [式エディター] を開いて保存します。
アプリを最初から作成するために、手順 5 から 14 を実行します。
In UiPath^® Apps, create a new VB app.
アプリで、手順 1 から 3 で作成したエンティティを参照します。

Data Service のエンティティに基づいて以下の変数を作成します。

変数名	入力	参照されるエンティティ
`allTickets`	ListSource	tickets
`filteredTicketListSource`	ListSource	tickets
`selectedSourceType`	テキスト	-
`ticketSourceTypes`	ListSource	Tickets Source

[ドロップダウン] コントロールをアプリに追加し、名前を「CustomerFilterDropdown」に変更します。

[ラベル] フィールドで、名前を「Filter tickets by customer name (チケットを顧客名でフィルター処理)」に変更します。

[リストのソース] フィールドで式エディターを開き、次の VB 式を書き込みます。

New ListSource(of String)With{.data = allTickets.data.Select(Function(x) x.CustomerName).Distinct.ToList}New ListSource(of String)With{.data = allTickets.data.Select(Function(x) x.CustomerName).Distinct.ToList}

[イベント] タブに切り替えて、[ルールを作成] をクリックします。

[値を設定] ルールを追加して、次の入力値を設定します。

設定する項目

filteredTicketListSourcefilteredTicketListSource

値 (Value)

Fetch(of Tickets)(createFilterGroup(New QueryFilter(){addFilter(If((MainPage.CustomerFilterDropdown.SelectedItem Is Nothing),"","CustomerName"), "=", MainPage.CustomerFilterDropdown.SelectedItem)}, Nothing, 0), Nothing, Nothing, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("Source", New String(){"Id","Source"}), addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})Fetch(of Tickets)(createFilterGroup(New QueryFilter(){addFilter(If((MainPage.CustomerFilterDropdown.SelectedItem Is Nothing),"","CustomerName"), "=", MainPage.CustomerFilterDropdown.SelectedItem)}, Nothing, 0), Nothing, Nothing, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("Source", New String(){"Id","Source"}), addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})

[ヘッダー] コントロールをアプリに追加し、名前を「TicketCountHeader」に変更します。
1. [テキスト] フィールドで式エディターを開き、次の VB 式を書き込みます。
```
(filteredTicketListSource.totalRecords).ToString +" Tickets"(filteredTicketListSource.totalRecords).ToString +" Tickets"
```

[カスタム HTML] コントロールをアプリに追加し、名前を「Chart」に変更します。

コードエディターを開き、プレースホルダーの内容を次のコードスニペットに置き換えます。

エディター	コード	使用状況
HTML	`<script src="https://cdn.jsdelivr.net/npm/chart.js"> </script> <div class="chartContainer"> <canvas class="pieChart" id="myChart"></canvas> </div>`<script src="https://cdn.jsdelivr.net/npm/chart.js"> </script> <div class="chartContainer"> <canvas class="pieChart" id="myChart"></canvas> </div>	オープンソースライブラリからテンプレートの JavaScript グラフを生成し、そのグラフにスタイルクラスを適用します。
CSS	`.chartContainer { height: 100%; background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #526069; display: flex; align-items: center; justify-content: center; } .pieChart { width: 50%; max-width: 400px; max-height: 400px; }`.chartContainer { height: 100%; background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #526069; display: flex; align-items: center; justify-content: center; } .pieChart { width: 50%; max-width: 400px; max-height: 400px; }	`.chartContainer` と `.pieChart` の 2 つのスタイルクラスを定義します。
JavaScript	// Create an object to store counts var counts = {"Email": 0, "Phone": 0, "Chat": 0}; // Mock data to see the chart in designer, You can assign it with empty array if you don't want to see chart in designer var Tickets = [ {Source: { Source: 'Phone' }}, ]; // Function to count the number of tickets per Source function countTickets(tickets) { counts = {"Email": 0, "Phone": 0, "Chat": 0}; // Reset counts to zero for (var i = 0; i < tickets.length; i++) { counts[tickets[i].Source.Source]++; } } countTickets(Tickets); // Count tickets in the initial data // Create a Chart var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ['Email', 'Phone', 'Chat'], datasets: [{ label: '# of Tickets', data: [counts["Email"], counts["Phone"], counts["Chat"]], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)' ], borderWidth: 1 }] }, options: { onClick: function(evt, elements) { if (elements.length) { var chartElement = elements[0]; var label = this.data.labels[chartElement.index]; OutputSource = label; console.log(OutputSource); // You can see the stored value in browser's console on each click App.setVariable('selectedSourceType', OutputSource); } } } }); // Function to update chart's data function updateChart(data) { NewTickets = data; // New data to update the chart countTickets(NewTickets); myChart.data.datasets[0].data = [counts["Email"], counts["Phone"], counts["Chat"]]; myChart.update(); let sourceWithData = Object.keys(counts).find(ticketSource => { return counts[ticketSource] > 0; }); if(sourceWithData) { App.setVariable('selectedSourceType', sourceWithData); } } //Listen for updates to the ticket data and update chart async function registerOnChangeEvent() { App.onVariableChange('filteredTicketListSource',(listSource) => { updateChart(listSource.data); }) const listSource = await App.getVariable('filteredTicketListSource'); if(listSource?.data?.length > 0) { updateChart(listSource.data); } } registerOnChangeEvent();// Create an object to store counts var counts = {"Email": 0, "Phone": 0, "Chat": 0}; // Mock data to see the chart in designer, You can assign it with empty array if you don't want to see chart in designer var Tickets = [ {Source: { Source: 'Phone' }}, ]; // Function to count the number of tickets per Source function countTickets(tickets) { counts = {"Email": 0, "Phone": 0, "Chat": 0}; // Reset counts to zero for (var i = 0; i < tickets.length; i++) { counts[tickets[i].Source.Source]++; } } countTickets(Tickets); // Count tickets in the initial data // Create a Chart var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ['Email', 'Phone', 'Chat'], datasets: [{ label: '# of Tickets', data: [counts["Email"], counts["Phone"], counts["Chat"]], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)' ], borderWidth: 1 }] }, options: { onClick: function(evt, elements) { if (elements.length) { var chartElement = elements[0]; var label = this.data.labels[chartElement.index]; OutputSource = label; console.log(OutputSource); // You can see the stored value in browser's console on each click App.setVariable('selectedSourceType', OutputSource); } } } }); // Function to update chart's data function updateChart(data) { NewTickets = data; // New data to update the chart countTickets(NewTickets); myChart.data.datasets[0].data = [counts["Email"], counts["Phone"], counts["Chat"]]; myChart.update(); let sourceWithData = Object.keys(counts).find(ticketSource => { return counts[ticketSource] > 0; }); if(sourceWithData) { App.setVariable('selectedSourceType', sourceWithData); } } //Listen for updates to the ticket data and update chart async function registerOnChangeEvent() { App.onVariableChange('filteredTicketListSource',(listSource) => { updateChart(listSource.data); }) const listSource = await App.getVariable('filteredTicketListSource'); if(listSource?.data?.length > 0) { updateChart(listSource.data); } } registerOnChangeEvent();	変数の関数を定義し、グラフに対話機能を追加します。

エディター

コード

使用状況

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js">
</script>
<div class="chartContainer">
  <canvas class="pieChart" id="myChart"></canvas>
</div><script src="https://cdn.jsdelivr.net/npm/chart.js">
</script>
<div class="chartContainer">
  <canvas class="pieChart" id="myChart"></canvas>
</div>

オープンソースライブラリからテンプレートの JavaScript グラフを生成し、そのグラフにスタイルクラスを適用します。

CSS

.chartContainer {
  height: 100%;
  background-color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #526069;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pieChart {
  width: 50%;
  max-width: 400px;
  max-height: 400px;
}.chartContainer {
  height: 100%;
  background-color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #526069;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pieChart {
  width: 50%;
  max-width: 400px;
  max-height: 400px;
}

.chartContainer と .pieChart の 2 つのスタイルクラスを定義します。

JavaScript

// Create an object to store counts
var counts = {"Email": 0, "Phone": 0, "Chat": 0};

// Mock data to see the chart in designer, You can assign it with empty array if you don't want to see chart in designer
var Tickets = [
  {Source: { Source: 'Phone' }},
];

// Function to count the number of tickets per Source
function countTickets(tickets) {
  counts = {"Email": 0, "Phone": 0, "Chat": 0};   // Reset counts to zero
  for (var i = 0; i < tickets.length; i++) {
    counts[tickets[i].Source.Source]++;
  }
}

countTickets(Tickets); // Count tickets in the initial data

// Create a Chart
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Email', 'Phone', 'Chat'],
    datasets: [{
      label: '# of Tickets',
      data: [counts["Email"], counts["Phone"], counts["Chat"]],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    onClick: function(evt, elements) {
      if (elements.length) {
        var chartElement = elements[0];
        var label  = this.data.labels[chartElement.index];
        OutputSource = label;
        console.log(OutputSource); // You can see the stored value in browser's console on each click
        App.setVariable('selectedSourceType', OutputSource);
      }
    }
  }
});

// Function to update chart's data
function updateChart(data) {
  NewTickets = data;
    // New data to update the chart
    countTickets(NewTickets);
    myChart.data.datasets[0].data = [counts["Email"], counts["Phone"], counts["Chat"]];
    myChart.update();

let sourceWithData = Object.keys(counts).find(ticketSource => {
  return counts[ticketSource] > 0;
});
if(sourceWithData) {
  App.setVariable('selectedSourceType', sourceWithData);
}
}

//Listen for updates to the ticket data and update chart
async function registerOnChangeEvent() {
  App.onVariableChange('filteredTicketListSource',(listSource) => {
    updateChart(listSource.data);
  })
  const listSource = await App.getVariable('filteredTicketListSource');
  if(listSource?.data?.length > 0) {
    updateChart(listSource.data);
  }
}

registerOnChangeEvent();// Create an object to store counts
var counts = {"Email": 0, "Phone": 0, "Chat": 0};

// Mock data to see the chart in designer, You can assign it with empty array if you don't want to see chart in designer
var Tickets = [
  {Source: { Source: 'Phone' }},
];

// Function to count the number of tickets per Source
function countTickets(tickets) {
  counts = {"Email": 0, "Phone": 0, "Chat": 0};   // Reset counts to zero
  for (var i = 0; i < tickets.length; i++) {
    counts[tickets[i].Source.Source]++;
  }
}

countTickets(Tickets); // Count tickets in the initial data

// Create a Chart
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Email', 'Phone', 'Chat'],
    datasets: [{
      label: '# of Tickets',
      data: [counts["Email"], counts["Phone"], counts["Chat"]],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    onClick: function(evt, elements) {
      if (elements.length) {
        var chartElement = elements[0];
        var label  = this.data.labels[chartElement.index];
        OutputSource = label;
        console.log(OutputSource); // You can see the stored value in browser's console on each click
        App.setVariable('selectedSourceType', OutputSource);
      }
    }
  }
});

// Function to update chart's data
function updateChart(data) {
  NewTickets = data;
    // New data to update the chart
    countTickets(NewTickets);
    myChart.data.datasets[0].data = [counts["Email"], counts["Phone"], counts["Chat"]];
    myChart.update();

let sourceWithData = Object.keys(counts).find(ticketSource => {
  return counts[ticketSource] > 0;
});
if(sourceWithData) {
  App.setVariable('selectedSourceType', sourceWithData);
}
}

//Listen for updates to the ticket data and update chart
async function registerOnChangeEvent() {
  App.onVariableChange('filteredTicketListSource',(listSource) => {
    updateChart(listSource.data);
  })
  const listSource = await App.getVariable('filteredTicketListSource');
  if(listSource?.data?.length > 0) {
    updateChart(listSource.data);
  }
}

registerOnChangeEvent();

変数の関数を定義し、グラフに対話機能を追加します。

[保存] をクリックします。
[スタイル] タブに切り替えて、[サイズ] を次のように設定します。

幅 1000 px
高さ 400 px

[ヘッダー] コントロールをアプリに追加し、名前を「sourceTypeHeader」に変更します。
1. [テキスト] フィールドで式エディターを開き、次の VB 式を書き込みます。
```
"Tickets created through " & selectedSourceType"Tickets created through " & selectedSourceType
```

[編集グリッド] コントロールをアプリに追加し、名前を「TicketsListByType」に変更します。

[データソース] フィールドで式エディターを開き、次の VB 式を書き込みます。

Fetch(of Tickets)(createFilterGroup(Nothing, New FilterGroup(){createFilterGroup(New QueryFilter(){addFilter(MainPage.TicketsListByType.SearchColumn, "contains", MainPage.TicketsListByType.SearchTerm)}, Nothing, 0), createFilterGroup(New QueryFilter(){addFilter("Source.Source", "=", selectedSourceType), addFilter("CustomerName", "contains", MainPage.CustomerFilterDropdown.SelectedItem)}, Nothing, 0)}, 0), New PaginationProps(MainPage.TicketsListByType.PageStart, MainPage.TicketsListByType.PageLimit), New SortOption(){addSortOption(MainPage.TicketsListByType.SortColumn, Not(Not(MainPage.TicketsListByType.isDescending)))}, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("Source", New String(){"Id","Source"}), addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})Fetch(of Tickets)(createFilterGroup(Nothing, New FilterGroup(){createFilterGroup(New QueryFilter(){addFilter(MainPage.TicketsListByType.SearchColumn, "contains", MainPage.TicketsListByType.SearchTerm)}, Nothing, 0), createFilterGroup(New QueryFilter(){addFilter("Source.Source", "=", selectedSourceType), addFilter("CustomerName", "contains", MainPage.CustomerFilterDropdown.SelectedItem)}, Nothing, 0)}, 0), New PaginationProps(MainPage.TicketsListByType.PageStart, MainPage.TicketsListByType.PageLimit), New SortOption(){addSortOption(MainPage.TicketsListByType.SortColumn, Not(Not(MainPage.TicketsListByType.isDescending)))}, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("Source", New String(){"Id","Source"}), addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})

[MainPage] で、[イベント] タブに切り替えて、[ルールを作成] をクリックします。

[値を設定] ルールを追加して、次の入力値を設定します。

設定する項目	`allTickets`allTickets
値 (Value)	クエリビルダーを開き、Tickets エンティティを選択して [保存] をクリックします。

2 つ目の [値を設定] ルールを追加し、次の入力値を設定します。

設定する項目	`filteredTicketListSource`filteredTicketListSource
値 (Value)	クエリビルダーを開き、Tickets エンティティを選択して [保存] をクリックします。