apps

2023.10

true

重要 :

请注意此内容已使用机器翻译进行了部分本地化。

Apps 用户指南

适用平台：

Automation Cloud Automation Cloud Public Sector Automation Suite

Last updated 2024年4月19日

自定义 HTML

自定义 HTML 控件面向高级用户，并提供 HTML、 CSS 和 JavaScript 编程语言的灵活性，以便其根据业务需求制作自定义交互式控件。该控件包括用于 HTML、 CSS 和 JavaScript 代码的专用编辑器，并具有通过 URL 合并外部托管的 CSS 和 JavaScript 文件的优点。

常规

“打开代码编辑器” - 打开一个三面板编辑器，用于添加 HTML、 CSS 和 JavaScript 代码。
“可访问标签” - 控件的说明。屏幕阅读器使用此属性来增强辅助功能。
隐藏 - 如果为 true，则在 Runtime 隐藏该控件。
已禁用- 如果为 True，则使控件在 Runtime 处于非活动状态。系统会加载 HTML、 CSS 和 JavaScript 内容，但对用户操作（例如单击）无响应。

Events

无事件。

样式

“控件对齐”- 默认情况下，继承父级对齐方式。可以设置与父级对齐方式不同的对齐方式。要默认返回到父级对齐方式，请取消选择覆盖的选项。

注意：对齐方式取决于为父元素选择的布局（垂直与水平）。
“边框” - 控件的边框。可以配置边框粗细和半径。
“边距”- 设置控件的边距。默认情况下，边距设置为 4 像素。“上/下”和“左/右”边距属性结合使用。可以使用“边距”部分右侧的“链接”按钮分离这些属性。
“大小”- 控件的宽度和高度。默认情况下，大小设置为 auto。要设置最小值或最大值，请单击三点图标 (...)。

自定义 HTML 的代码编辑器

自定义 HTML 控件的代码编辑器提供了三个面板，用于以 HTML、 CSS 和 JavaScript 编程语言输入代码。每个编辑器都支持 IntelliSense，即自动代码补全和语法高亮显示。

面板中的代码编译到项目中，并在 Apps Studio 中呈现以供预览。要观察控件的功能，请预览应用程序。

重要提示：

每个编辑器的最大内容大小为 5MB。当内容超过此大小时，您将无法再保存更改。
IntelliSense 不适用于在 HTML 编辑器中编写的 CSS 和 JavaScript 代码。

添加外部资源

如果已定义样式或脚本，则可以在控件中引用它们，而无需在相应的 CSS 或 JavaScript 面板中编写代码。

要引用现有的.css或.js文件，请执行以下操作：

在自定义 HTML 控件的代码编辑器中，切换到“外部资源”选项卡。
在 CSS 部分下，添加外部 CSS 文件。该文件必须托管在可通过网络访问的 URL 中，以确保运行应用程序的兼容性和可用性。
在“JavaScript” 部分下，添加一个外部脚本文件。该文件必须托管在可通过网络访问的 URL 中，以确保运行应用程序的兼容性和可用性。
添加完所有外部资源后，单击“保存” 。

Tab 键的辅助功能快捷方式

默认情况下，Tab 键会在当前编辑器中添加一个制表符空格。要自定义 Tab 键的行为，请使用以下快捷方式：

操作系统	快捷方式	行为
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"引用“图表容器” CSS 类，该类在 HTML 元素中添加饼图样式。有关详细信息，请参阅 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函数中。

要处理诸如无效变量名称之类的错误，请使用 Try-Catch 语句。例如：

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 编辑器中，使用此函数为现有变量设置值。第一个参数是变量名称，第二个参数是要设置的值。

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-Catch 语句。例如：

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 控件之前变量值发生更改，则不会捕获更新的值。

要获取最新的变量值，请在调用getVariable()之前调用onVariableChange() 。
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 格式: 日期对象 ISO 字符串)
Apps 文件 -文件选取器控件的值	JS 文件对象
Apps 文件 - 从 URL 创建的值例如： `new AppsFile("https://image.jpg")`new AppsFile("https://image.jpg")	文件对象： `{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 编辑器中使用<html>和<head>标签，因为代码会自动附加到<body>标签中。
在“外部资源”选项卡中添加外部资源（例如Bootstrap、jQuery 或其他 JavaScript SDK）的 CDN URL。
如要停止侦听变量更改，请使用deregister()函数。
避免大型数据循环，以防止减慢应用程序的速度，并保持控件的响应能力。
尽可能减少 DOM 元素的使用：仅在必要时创建 DOM 元素，并在它们过时时将其删除。
对大型数据集使用无限滚动或虚拟滚动，而不是标准滚动。
创建并维护干净、优化且无冗余的代码。

功能限制

自定义 HTML 不提供触发控制规则的功能。
只能通过使用变量函数getVariable() 、 setVariable()和onVariableChange()将控件连接到 Apps。
复制粘贴完整控件，或复制带有控件的页面。仅使用“样式”选项卡中的属性来粘贴控件。您需要手动粘贴 HTML、 CSS 和 JavaScript 的代码。
要访问流程或队列数据，您需要为每个流程或队列属性分配一个变量。
HTML 控件的尺寸不会动态调整以显示弹出窗口或下拉菜单，因此您需要设置 HTML 控件的大小以适应这些菜单。
您无法在设计时与 HTML 控件交互。
setVariable() 、 getVariable()和onVariableChange()函数仅在运行时运行。
更改变量名称或删除变量不会自动反映在代码编辑器中。您需要使用当前变量手动更新代码。
来自 HTML 控件的存储文件变量不能用于“将文件上传到存储桶”规则中，也不能用于填充 Data Service 实体的“文件类型”字段。
该控件只能通过使用变量与其他 UiPath^TM 组件（例如流程、队列或存储桶）通信。
使用 LESS 或 S CSS 的预处理 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() 。
在 Apps Studio 会话中，按 F12 打开浏览器控制台，然后选择“控制台”选项卡。
在控制台设置中，选中“仅限选定上下文”复选框。
从控制台页面顶部的 JavaScript 上下文下拉列表中，选择所需 HTML 控件的html-control-base.html选项。

所选控件中的日志将显示在控制台中。

有关更多详细信息，请观看视频：

添加断点

在 JavaScript 编辑器中添加console.log() 。
在 Apps Studio 会话中，按 F12 打开浏览器控制台，然后选择“控制台”选项卡。
在日志右侧，单击虚拟机消息。

调试器将打开。通过单击所需的行号来选择断点。

有关更多详细信息，请观看视频：

演示

自定义 HTML：创建图表

简介

此应用程序演示了如何使用 JavaScript 库（例如 d3.js 或图表.js）创建不同类型的图表。

演示应用程序 - 自行尝试

要亲自试用交互式图表，请使用演示应用程序。

从 GitHub 下载演示应用程序

演示应用程序 - 使用说明

在 UiPath^TM Apps 中，创建一个新应用程序并导入已下载的演示应用程序。
预览您的应用程序以与所有图表类型进行交互。

自定义 HTML：使用变量函数创建交互式饼图

简介

此应用程序组合了实体、自定义 HTML和编辑网格控件，以显示交互式饼图。通过从下拉菜单中选择一个选项来激活交互性，该选项会更改饼图部分和编辑网格中的记录。随后，单击图表部分会更新编辑网格中的数据。

演示应用程序 - 自行尝试

要亲自尝试交互式饼图，请使用演示应用程序或按照以下过程操作。

从 GitHub 下载演示应用程序

在 Cloud 中预览演示应用程序

演示应用程序 - 使用说明

预览演示应用程序。
从“按客户名称筛选工单”下拉列表中，选择一个选项。编辑网格中的工单总数、饼图表示形式和数据应该会发生变化。
悬停在图表切片上方。工具提示将显示类别名称和工单计数。
单击一个图表切片。编辑网格会显示所选类别的记录。

程序

要查看如何在自定义 HTML 控件中使用实体和变量，请将以下应用程序文件下载到本地计算机：

下载后，继续执行以下步骤：

在 UiPath^TM Data Service 中，单击“导入架构”：
1. 选择先前下载的ticket_entities_schema.json文件。
2. 在“实体” 选项卡中，选中“工单” 和“工单来源” 框。
3. 切换到“选项集”选项卡，然后选中“大洲”和“摩擦级别”框。
4. 单击“导入”。
在 UiPath^TM Data Service 中，选择“工单来源”实体：
1. 单击“导入数据” 。
2. 选择先前下载的ticketsource_entity_data.csv文件，然后单击“打开” 。
3. 切换到“数据”选项卡以查看上传的记录。
在 UiPath^TM Data Service 中，选择“工单”实体：
1. 单击“导入数据” 。
2. 选择先前下载的tickets_entity_data.csv文件，然后单击“打开” 。
3. 不会自动导入“关系” 和“选项集”类型字段的数据。您需要手动填写这些字段的数据。
4. 切换到“数据” 选项卡。对于每个工单记录，通过随机选择“聊天”、“电话”或“电子邮件”来更新“来源”字段的值。
5. 在“数据” 选项卡中，对于每个“工单” 记录，通过随机选择 1、2 或 3 来更新“摩擦” 字段的值。
要导入应用程序文件，请按照此步骤操作，然后转到步骤 14。
在 UiPath^TM Apps 中，创建一个新的 VB 应用程序：
1. 单击“从文件导入” 。
2. 选择先前下载的CustomHTMLPieChart_DemoApp.uiapp文件，然后单击“打开” 。
3. 要修复错误，请将导入的应用程序中的实体替换为您先前在步骤 2 和 3 中创建的实体。
4. 在导入的应用程序中，选择名为“自定义筛选器下拉菜单”的下拉控件，打开“列表来源”属性的表达式编辑器，然后保存。
要从头开始创建应用程序，请按照步骤 5 至 14 操作。
在 UiPath^TM Apps 中，创建一个新的 VB 应用程序。
在您的应用程序中，引用在步骤 1 至 3 中创建的实体。

根据 Data Service 实体创建以下变量：

变量名称	类型	引用的实体
`allTickets`	列表来源	工单
`filteredTicketListSource`	列表来源	工单
`selectedSourceType`	文本	-
`ticketSourceTypes`	列表来源	工单来源

将“下拉列表”控件添加到应用程序，并将其重命名为“CustomerFilterDropdown”：

在“标签”字段中，将其重命名为“按客户名称筛选工单”。

在“列表来源” 字段中，打开表达式编辑器并编写以下 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

值

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控件，并将其重命名为“图表”：

打开代码编辑器，并将占位符内容替换为以下代码片段：

编辑者	代码	用法
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` 。
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 。

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();

定义变量函数并向图表添加交互性。

单击“保存”。
切换到“样式”选项卡，然后设置以下“大小” :

Width 1000 px
Height 400 px

向应用程序添加“标头”控件，并将其重命名为“sourceTypeHeader”：
1. 在“文本”字段中，打开表达式编辑器并编写以下 VB 表达式：
```
"Tickets created through " & selectedSourceType"Tickets created through " & selectedSourceType
```

将“编辑网格”控件添加到应用程序，并将其重命名为“按类型分类的票证列表”。

在“数据源”字段中，打开表达式编辑器并编写以下 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"})})

对于“主页”，切换到“事件” 选项卡，然后单击“创建规则” 。

添加具有以下输入的“设置值”规则：
要设置的项目
allTicketsallTickets
值打开查询生成器，选择“工单”实体，然后单击“保存”。

添加第二个“设置值”规则，并输入以下内容：

要设置的项目	`filteredTicketListSource`filteredTicketListSource
值	打开查询生成器，选择“工单”实体，然后单击“保存”。