Painéis HTML

Introdução

Um painel HTML é um elemento flexível que pode ser usado para adicionar elementos visuais personalizados ao aplicativo.

Ao lado de outras visualizações, como gráficos e o gráfico do processo, um painel geralmente precisa exibir textos explicativos, imagens ou KPIs simples. Isso pode ser feito usando painéis HTML.

Consulte a ilustração abaixo para obter um exemplo de painéis HTML exibindo KPIs em um painel.

Siga estas etapas para criar um painel HTML.

Etapa	Ação
1	Go to the Dashboards tab and right click in the Dashboard item list.
2	Selecione Novo painel HTML e, em seguida, a tabela da qual você deseja usar os dados no painel HTML. Um Novo painel HTML é adicionado à lista de itens do painel.
3	Vá para a aba do painel HTML e clique em expression no painel Geral .
4	Insira uma expressão que contenha o código HTML desejado e clique em OK. Veja a ilustração abaixo para um exemplo.

O resultado da expressão deve ser um valor de Texto , que se tornará o conteúdo do painel HTML. Para obter informações dos dados (como o número de faturas) para o painel HTML, ele precisa ser convertido em uma forma de texto, usando, por exemplo, a função displaytext .

Observação:

Os cálculos de expressões em painéis HTML são avaliados de forma semelhante às expressões agregadas, onde os valores são calculados no nível raiz de uma tabela.

Tags de estilo embutidos

Como o HTML gerado a partir do painel HTML será inserido no HTML para a página da Web completa, a expressão não deve ser um documento HTML completo, mas apenas a propriedade innerHTML. Use tags de estilo inline para personalizar a aparência para aplicar um estilo único a cada elemento HTML.

Por exemplo, usando o atributo "estilo" com quaisquer propriedades CSS definidas nele.

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

Importante:

Qualquer CSS (não inline) usado em um painel HTML pode afetar outros elementos na página. A personalização de elementos da página fora do painel HTML não é recomendada e não é compatível.

Ao usar os estilos inline, você pode usar os estilos padrão especificados pela plataforma UiPath Process Mining , como a fonte personalizada usada pela plataforma UiPath Process Mining . Isso permite criar um painel HTML que se encaixa na aparência da plataforma e se adapta automaticamente a alterações no tema do UiPath Process Mining .

Dica de ferramenta

Uma dica de ferramenta personalizada pode ser adicionada ao painel HTML usando a tag de atributo data-tooltip . O texto na dica de ferramenta de dados torna-se automaticamente HTML seguro, ou seja, caracteres especiais como '<' ou '&' são substituídos por seus equivalentes em HTML; '<' ou '&'.

Se desejar incluir a formatação HTML na dica de ferramenta, use data-tooltip-html .

escapando

Ao escrever HTML ou outro texto que exija muito escape, você pode reduzir a quantidade de escape usando <<<< e >>>>. Qualquer texto colocado entre quatro colchetes angulares no editor de expressão é tratado como um valor de texto, incluindo quaisquer novas linhas.

Iframe com um URL de dados

Uma alternativa ao uso de estilos embutidos é usar um iframe com um URL de dados.

Observação:

Os estilos padrão especificados pela plataforma UiPath Process Mining não estarão disponíveis se você usar a opção <iframe> .

Texto selecionável

Se você deseja tornar selecionável o texto em um painel HTML, deve adicionar user-select: text ; no estilo do texto que você deseja que seja selecionável. Não use class="enableTextSelection" , pois é uma classe interna de software.