Paneles HTML

Introducción

Un panel HTML es un elemento flexible que se puede utilizar para añadir elementos visuales personalizados a la aplicación.

Junto a otras visualizaciones, como diagramas y el gráfico de proceso, un panel a menudo necesita mostrar textos explicativos, imágenes o KPI simples. Esto se puede hacer mediante paneles HTML.

Consulta la siguiente ilustración para ver un ejemplo de paneles HTML que muestran KPI en un panel.

Siga estos pasos para crear un panel HTML.

Paso	Acción
1	Ve a la pestaña Paneles y haz clic con el botón derecho en la lista de elementos del Panel.
2	Selecciona Nuevo panel HTML y luego la tabla de la que quieres usar los datos en el panel HTML. Se agrega un panel HTML nuevo a la lista de elementos del panel.
3	Ve a la pestaña del panel HTML y haz clic en expression en el panel General .
4	Introduzca una expresión que contenga el código HTML deseado y haga clic en Aceptar. Consulta la siguiente ilustración para ver un ejemplo.

El resultado de la expresión debe ser un valor de Texto , que se convertirá en el contenido del panel HTML. Para obtener información de los datos (como el número de facturas) en el panel HTML, debe convertirlo en una forma textual, utilizando, por ejemplo, la función displaytext .

Nota: Los cálculos de expresiones en paneles HTML se evalúan de forma similar a las expresiones agregadas, donde los valores se calculan en el nivel de raíz de una tabla.

Etiquetas de estilo en línea

Como el HTML generado desde el panel HTML se insertará en el HTML de la página web completa, la expresión no debe ser un documento HTML completo, sino solo la propiedad innerHTML. Usa etiquetas de estilo en línea para personalizar la apariencia y aplicar un estilo único a cada elemento HTML.

Por ejemplo, usando el atributo "estilo" con cualquier propiedad CSS definida en él.

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

Importante: Cualquier CSS (no en línea) utilizado en un panel HTML puede afectar a otros elementos de la página. Personalizar elementos de la página fuera del panel HTML no se recomienda y no es compatible.

Al usar los estilos en línea, puede usar los estilos predeterminados especificados por la plataforma de UiPath Process Mining , como la fuente personalizada utilizada por la plataforma de UiPath Process Mining . Esto te permite crear un panel HTML que se adapta al diseño de la plataforma y se adapta automáticamente a los cambios en el tema de UiPath Process Mining .

Información sobre herramientas

Se puede añadir información sobre herramientas personalizada al panel HTML mediante la etiqueta de atributo data-tooltip . El texto en la información sobre herramientas de datos se convierte automáticamente en HTML seguro, es decir, los caracteres especiales como '<' o '&' se reemplazan por sus contrapartes HTML; '<' o '&'.

Si desea incluir formato HTML en la información sobre herramientas, utilice data-tooltip-html en su lugar.

Escapar

Al escribir HTML u otro texto que requiera muchos escapes, puedes reducir la cantidad de escapes utilizando <<<< y >>>>. Cualquier texto colocado entre cuatro corchetes angulares en el editor de expresiones se trata como un valor de texto, incluido el salto de línea.

Iframe con una URL de datos

Una alternativa al uso de estilos en línea es usar un iframe con una URL de datos.

Nota: Los estilos predeterminados especificados por la plataforma de UiPath Process Mining no están disponibles si usa la opción <iframe> .

Texto seleccionable

Si desea seleccionar el texto de un panel HTML, debe añadir user-select: text ; en el estilo del texto que desea seleccionar. No uses class="enableTextSelection" ya que es una clase interna de software.