自定义 HTML

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

演示

自定义 HTML：创建图表

简介

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

演示应用程序 - 自行尝试

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

从 GitHub 下载演示应用程序

演示应用程序 - 使用说明

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

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

简介

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

演示应用程序 - 自行尝试

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

从 GitHub 下载演示应用程序

在 Cloud 中预览演示应用程序

演示应用程序 - 使用说明

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

程序

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

• 实体架构
• 工单实体的数据
• 工单来源实体的数据
• 应用程序文件

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

1. 在 UiPath Data Service 中，单击“导入架构” ：

   1. 选择先前下载的ticket_entities_schema.json文件。
   2. 在“实体”选项卡中，选中“工单”和“工单来源”框。
   3. 切换到“选项集”选项卡，然后选中“大陆”和“摩擦级别”框。
   4. 单击“导入”。

2. 在 UiPath Data Service 中，选择“工单来源”实体：

   1. 单击“导入数据” 。
   2. 选择先前下载的ticketsource_entity_data.csv文件，然后单击“打开” 。
   3. 切换到“数据”选项卡以查看上传的记录。

3. 在 UiPath Data Service 中，选择“工单” 实体：

   1. 单击“导入数据” 。
   2. 选择先前下载的tickets_entity_data.csv文件，然后单击“打开” 。
   3. 不会自动导入“关系”和“选项集”类型字段的数据。您需要手动填写这些字段的数据。
   4. 切换到“数据”选项卡。对于每个工单记录，通过随机选择“聊天”、“电话”或“电子邮件”来更新“来源”字段的值。
   5. 在“数据”选项卡中，对于每一个工单记录，通过随机选择 1、2 或 3 来更新“摩擦” 字段的值。

4. 要导入应用程序文件，请按照此步骤操作，然后转到步骤 14。在 UiPath Apps 中，创建一个新的 VB 应用程序：

   1. 单击“从文件导入” 。
   2. 选择先前下载的CustomHTMLPieChart_DemoApp.uiapp文件，然后单击“打开” 。
   3. 要修复错误，请将导入的应用程序中的实体替换为您先前在步骤 2 和 3 中创建的实体。
   4. 在导入的应用程序中，选择名为“自定义筛选器下拉菜单”的下拉控件，打开“列表来源”属性的表达式编辑器，然后保存。

5. 要从头开始创建应用程序，请按照步骤 5 至 14 操作。在 UiPath Apps 中，创建一个新的 VB 应用程序。

6. 在您的应用程序中，引用在步骤 1 至 3 中创建的实体。

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

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

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

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

   2. 在“列表来源”字段中，打开表达式编辑器并编写以下 VB 表达式：

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

   3. 切换到“事件”选项卡，然后单击“创建规则” 。

   4. 添加“设置值”规则，并输入以下内容：

      要设置的项目

      filteredTicketListSource

      值

      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"})})

9. 向应用程序添加一个“标头”控件，并将其重命名为“TicketCountHeader”：

   1. 在“文本”字段中，打开表达式编辑器并写入以下 VB 表达式：

      (filteredTicketListSource.totalRecords).ToString +" Tickets"
      

10. 将一个自定义 HTML控件添加到您的应用程序，并将其重命名为“图表”：

    1. 打开代码编辑器，然后将占位符内容替换为以下代码片段：
    • HTML：从开源库生成模板 JavaScript 图表，并在该图表上应用样式类。

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

    • CSS：定义两个样式类：.chartContainer和.pieChart 。

      .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;
      }
      

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

    2. 单击“保存”。

    3. 切换到“样式”选项卡，然后设置以下尺寸:

       |  |  |
       

       | --- | --- | | Width | 1000 px | | Height | 400 px |

11. 将“标头”控件添加到应用程序，并将其重命名为“sourceTypeHeader”:

    1. 在“文本”字段中，打开表达式编辑器并写入以下 VB 表达式：

       "Tickets created through " & selectedSourceType
       

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

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

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

    1. 添加具有以下输入的“设置值”规则：

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

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

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

14. 预览应用程序，在下拉列表中选择一个选项，并注意图表的更新情况。 单击图表部分，可以看到编辑网格已更新为所选部分的数据。

自定义 HTML：创建日期时间选取器

简介

此应用程序演示了如何创建自定义日期时间选取器。

演示应用程序 - 自行尝试

要亲自试用日期时间选取器，请使用演示应用程序。

从 GitHub 下载演示应用程序

演示应用程序 - 使用说明

1. 在 UiPath Apps 中，创建一个新应用程序并导入下载的演示应用程序。
2. 预览您的应用程序以与日期时间选取器交互。

自定义 HTML：创建密码字段

简介

此应用程序展示了如何创建密码字段。

演示应用程序 - 自行尝试

要自己尝试密码字段，请使用演示应用程序。

从 GitHub 下载演示应用程序

演示应用程序 - 使用说明

1. 在 UiPath Apps 中，创建一个新应用程序并导入下载的演示应用程序。
2. 预览您的应用程序以与密码字段交互。

自定义 HTML：创建签名输入字段

简介

此应用程序演示了如何创建签名输入字段。

演示应用程序 - 自行尝试

要自行尝试签名输入，请使用演示应用程序。

从 GitHub 下载演示应用程序

在 Cloud 中预览演示应用程序

演示应用程序 - 使用说明

1. 在 UiPath Apps 中，创建一个新应用程序并导入下载的演示应用程序。
2. 您可能会注意到一些错误。 要修复这些问题，请将引用的存储桶“演示应用程序”替换为租户中的存储桶。
3. 预览应用程序以与签名输入字段交互。

常规

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

Events

无事件。

样式

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

  对齐方式取决于为父元素选择的布局（垂直与水平）。

• “边框” - 控件的边框。可以配置边框粗细和半径。
• “边距”- 控件的边距。默认情况下，边距设置为 4 像素。“上/下”和“左/右”边距属性结合使用。可以使用“边距”部分右侧的“链接”按钮分离这些属性。
• “大小” - 控件的宽度和高度。默认情况下，大小设置为auto 。要设置最小值或最大值，请单击三点图标 (...)。
  备注：

  自定义 HTML 控件可以根据其内容动态调整自身大小。这可以通过从 HTML 控件内的 JavaScript 调用App.setHeight(heightInPixels)来完成。

  const height = document.body.scrollHeight;
  App.setHeight(height);
  

自定义 HTML 的代码编辑器

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

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

重要提示：

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

添加外部资源

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

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

1. 在自定义 HTML 控件的代码编辑器中，切换到“外部资源”选项卡。

2. 在 CSS 部分下，添加外部 CSS 文件。 该文件必须托管在可通过网络访问的 URL 中，以确保运行应用程序的兼容性和可用性。

3. 在“JavaScript” 部分下，添加一个外部脚本文件。 该文件必须托管在可通过网络访问的 URL 中，以确保运行应用程序的兼容性和可用性。

4. 添加完所有外部资源后，单击“保存” 。

   

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>

其中：

• id="myChart"引用在 HTML 元素中生成交互式饼图的 JavaScript“myChart”元素。 有关详细信息，请参阅 JavaScript 编辑器。
• class="chart-container"引用“图表容器” CSS 类，该类在 HTML 元素中添加饼图样式。 有关详细信息，请参阅 CSS 编辑器。

CSS 编辑器

在此面板中，您可以输入控件及其中的元素的样式。

例如，要向饼图添加颜色和边框，您可以使用以下 CSS 代码片段：

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

JavaScript 编辑器

在此面板中，您可以创建控件的交互式部分，例如及时的内容更新、地图或 2D/3D 动画图形。

例如，要创建 Apple 产品在全球范围内的销售情况饼图，并将其设计为显示所选扇区的值，您需要执行以下操作：

1. 添加以下 JavaScript 外部资源:

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

2. 使用以下 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',
         },
       },
     },
   });
   

在自定义 HTML 中使用变量

为了在自定义 HTML 控件与其他控件或集成之间建立通信，我们建议创建变量并使用setVariable() 、 getVariable()和onVariableChange()内置函数。

获取变量 ()

在 JavaScript 编辑器中，使用此函数获取现有变量的值。

例如，要将变量的值传递给internalValue ，您可以使用以下 JavaScript 代码片段：

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.getVariable("test");
  } catch (e) {
    console.log("Error in evaluating app variable:", e);
  }
}
init();

设置变量 ()

在 JavaScript 编辑器中，使用此函数为现有变量设置值。 第一个参数是变量名称，第二个参数是要设置的值。

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

当变量更改时 ()

在 JavaScript 编辑器中，使用此函数侦听现有变量值的更改并访问最新的变量值。

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

备注：

• 侦听器在自定义 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 格式：日期对象 ISO 字符串）
Apps 文件 -文件选取器控件的值	JS 文件对象
Apps 文件 - 从 URL 创建的值例如: new AppsFile("https://image.jpg")	文件对象： {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 }
<Entity> (Single entity row)	{ 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 }
Datatable	[ {From: 'Ahmedabad', To: 'Azua', ...}, {From: 'banglore', To: 'Dominican Republic', ...}, ... ]

自定义 HTML 的最佳实践

• 由于具有客户端访问权限，因此请勿在自定义 HTML 控件中包含敏感数据。
• 不要在 HTML 编辑器中使用<html>和<head>标签，因为代码会自动附加到<body>标签中。
• 在“外部资源”选项卡中添加外部资源的 CDN URL，例如引导程序、jQuery 或其他 JavaScript SDK。
• 如要停止侦听变量更改，请使用deregister()函数。
• 避免大型数据循环，以防止减慢应用程序的速度，并保持控件的响应能力。
• 尽可能减少 DOM 元素的使用：仅在必要时创建 DOM 元素，并在它们过时时将其删除。
• 对大型数据集使用无限滚动或虚拟滚动，而不是标准滚动。
• 创建并维护干净、优化且无冗余的代码。

功能限制

• 自定义 HTML 不提供触发控制规则的功能。
• 该控件只能通过使用变量与其他 UiPath 组件（例如流程、队列或存储桶）通信。
• 要访问流程或队列数据，您必须为每个流程或队列属性分配一个变量。
• 要将控件连接到 Apps，您必须使用变量函数： getVariable() 、 setVariable() 、 onVariableChange() 。
• 不会动态调整 HTML 控件的尺寸以显示弹出窗口或下拉菜单。 您必须手动设置 HTML 控件的大小以适应这些菜单。
• 您无法在设计时与 HTML 控件交互。
• setVariable() 、 getVariable()和onVariableChange()函数仅在运行时运行。
• 更改变量名称或删除变量不会自动反映在代码编辑器中。 您需要使用当前变量手动更新代码。
• 将图像数据从 HTML 控件传输到存储桶或使用数据 URL 的实体时，文件大小不应超过 1 MB。 超过此大小的文件可能会导致性能问题。
• 使用 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 控件的控制台日志

1. 在 JavaScript 编辑器中添加console.log() 。
2. 按 F12 键打开浏览器控制台，然后选择“控制台”选项卡。
3. 在控制台设置中，选中“仅选定的上下文”复选框。
4. 从控制台页面顶部的 JavaScript 上下文下拉列表中，选择所需 HTML 控件的html-control-base.html选项。

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

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

添加断点

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

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

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

VB 属性

VB 属性	数据类型	描述
AccessibleLabel	字符串	对控件的说明，由屏幕阅读器等辅助功能技术使用。
Hidden	布尔值	确定自定义 HTML控件的可见性。如果为 True，则在 Runtime 隐藏该控件。
Disabled	布尔值	确定是否禁用了“自定义 HTML”控件。如果为 True，则禁用在运行时与控件交互。系统会加载 HTML、CSS 和 JavaScript 内容，但对用户操作无响应。