Studio Web 用户指南

常规​

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

Events​

样式​

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

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

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

自定义 HTML 的代码编辑器​

添加外部资源​

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

Tab 键的辅助功能快捷方式​

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 编辑器​

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

JavaScript 编辑器​

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

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

2. 使用以下 JavaScript 代码片段：
   assignment

   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 ​中使用变量

getVariable()​

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

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

setVariable()​

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

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

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

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

变量类型​

应用程序变量类型	变量函数的响应示例
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 元素，并在它们过时时将其删除。
• 对大型数据集使用无限滚动或虚拟滚动，而不是标准滚动。
• 创建并维护干净、优化且无冗余的代码。

功能限制​

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