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	Vá para a guia Painéis e clique com o botão direito na lista de itens do Painel.
2	Selecione Novo painel HTML e, em seguida, a tabela da qual deseja usar os dados no painel HTML. Um novo painel HTML é adicionado à lista de itens do painel.
3	Vá para a guia do painel HTML e clique em expression no painel Geral .
4	Insira uma expressão contendo 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) no painel HTML, é necessário convertê-los em um formato textual, usando, por exemplo, a função displaytext .

Nota: Cálculos de expressões em painéis HTML são avaliados de forma semelhante a expressões agregadas em que 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 da 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 embutido para personalizar a aparência para aplicar um estilo exclusivo 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 embutido) 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 é suportada.

Ao usar os estilos embutidos, 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 que você crie um painel HTML que se encaixe na aparência da plataforma e se adapte automaticamente às mudanças no tema 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.