HTML 面板

简介

HTML 面板是一个灵活的元素，可用于向应用程序添加自定义可视元素。

在图表和流程图等其他可视化效果旁边，仪表板通常需要显示说明性文本、图像或简单的 KPI。 这可以通过使用 HTML 面板来完成。

有关在仪表板上显示 KPI 的 HTML 面板示例，请参见下图。

请按照以下步骤创建 HTML 面板。

步骤	操作
1	转到“ 仪表板 ” 选项卡，然后右键单击“仪表板” 项目列表。
2	选择 “新建 HTML 面板” ，然后在“HTML”面板中选择要使用其数据的表格。 新 HTML 面板随即添加到仪表板项目列表中。
3	转到“ HTML 面板 ”选项卡，然后单击“ 常规 ”面板中的expression 。
4	输入包含所需 HTML 代码的表达式，然后单击“ 确定”。 有关示例，请参见下图。

表达式的结果必须是 文本 值，该值将成为 HTML 面板的内容。 要将数据中的信息（例如发票数量）获取到 HTML 面板中，需要使用 displaytext函数将其转换为文本表单。

注意： 评估 HTML 面板中表达式的计算类似于在表格的根级别计算值的聚合表达式。

内联样式标签

由于从 HTML 面板生成的 HTML 将插入到整个网页的 HTML 中，因此表达式不应是完整的 HTML 文档，而应是 innerHTML 属性。 使用内联样式标签自定义外观，以将唯一样式应用于每个 HTML 元素。

例如，将“样式”属性与其中定义的任何 CSS 属性一起使用。

<div style="font-size:20px;color:HotPink">
This text is Hot Pink.
</div>

重要提示： HTML 面板中使用的任何（非内联）CSS 都可能影响页面上的其他元素。 不建议且不支持在 HTML 面板之外自定义页面元素。

使用内联样式时，您可以使用 UiPath Process Mining 平台指定的默认样式，例如 UiPath Process Mining 平台使用的自定义字体。 这使您可以创建一个适合平台外观的 HTML 面板，并自动适应 UiPath Process Mining 主题的更改。

工具提示

可以使用data-tooltip属性标签将自定义工具提示添加到 HTML 面板中。 数据工具提示中的文本会自动设置为 HTML 安全文本，即“<”或“&”等特殊字符将替换为其对应的 HTML； “<”或“&”。

如果要在工具提示中包含 HTML 格式，请改用data-tooltip-html 。

转义

在编写需要大量转义的 HTML 或其他文本时，您可以使用<<<<和>>>>减少转义次数。 在表达式编辑器中，放置在四个尖括号之间的任何文本都将被视为文本值，包括任何换行符。

具有数据 URL 的 iframe

使用内联样式的另一种方法是使用带有数据 URL 的 iframe。

注意： 如果使用<iframe>选项，则 UiPath Process Mining 平台指定的默认样式不可用。

可选文本

如果要使 HTML 面板中的文本可选，则应添加user-select: text ；在要选择的文本样式中。 不要使用 class="enableTextSelection" ，因为这是一个软件内部类。