HTML panels

Introduction

An HTML panel is a flexible element which can be used to add custom visual elements to the application.

Next to other visualizations such as charts and the process graph, a dashboard often needs to display explanatory texts, images, or simple KPIs. This can be done by using HTML panels.

See illustration below for an example of HTML panels displaying KPIs on a dashboard.

Follow these steps to create an HTML panel.

Step	Action
1	Go to the Dashboards tab and right click in the Dashboard item list.
2	Select New HTML panel and then the table you want to use the data from in the HTML panel. A New HTML panel is added to the dashboard item list.
3	Go to the HTML panel tab and click on expression in the General panel.
4	Enter an expression containing the desired HTML-code and click on OK. See illustration below for an example.

The result of the expression must be a Text value, which will become the content of the HTML panel. To get information from the data (such as the number of invoices) into the HTML panel it needs to be converted into a textual form, using for example the displaytext function.

Note: Calculations of expressions in HTML panels are evaluated similar to aggregate expressions where values are calculated at the root level of a table.

Inline style tags

As the HTML generated from the HTML panel will be inserted in the HTML for the complete webpage, the expression should not be a full HTML document, but just the innerHTML property . Use inline style tags to customize the appearance to apply a unique style to each HTML element.

For example by using the "style" attribute with any CSS properties defined within it.

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

Important: Any (non-inline) CSS used in an HTML panel can affect other elements on the page. Customizing elements of the page outside of the HTML panel is not recommended and unsupported.

When using the inline styles you can make use of the default styles specified by the UiPath Process Mining platform, such as the custom font used by the UiPath Process Mining platform. This allows you to create an HTML panel that fits in to the look and feel of the platform, and automatically adapts to changes in the UiPath Process Mining theme.

Tooltip

A custom tooltip can be added to the HTML panel using the data-tooltip attribute tag. Text in the data-tooltip is automatically made HTML safe, i.e. special characters such as ‘<’ or ‘&’ are replaced by their HTML counterparts; ‘<’ or ‘&’.

If you want to include HTML formatting in the tooltip, use data-tooltip-html instead.

Escaping

When writing HTML or other text which requires a lot of escaping, you can reduce the amount of escaping by using <<<< and >>>>. Any text placed between four angle brackets in the expression editor is treated as a text value, including any newlines.

Iframe with a data URL

An alternative to using inline styles is to use an iframe with a data URL.

Note: Default styles specified by the UiPath Process Mining platform are not available if you use the <iframe> option.

Selectable text

If you want to make text in a HTML panel selectable you should add user-select: text ; in the style of the text you want to be selectable. Do not use class="enableTextSelection" since that is a software internal class.