Panneaux HTML

Introduction

Un panneau HTML est un élément flexible qui peut être utilisé pour ajouter des éléments visuels personnalisés à l'application.

À côté d'autres visualisations telles que les graphiques et le graphique de processus, un tableau de bord doit souvent afficher des textes explicatifs, des images ou de simples ICP. Cela peut être fait en utilisant des panneaux HTML.

Voir l'illustration ci-dessous pour un exemple de panneaux HTML affichant les ICP sur un tableau de bord.

Suivez ces étapes pour créer un panneau HTML.

Étape	Action
1	Go to the Dashboards tab and right click in the Dashboard item list.
2	Sélectionnez Nouveau panneau HTML , puis la table dont vous souhaitez utiliser les données dans le panneau HTML. Un Nouveau panneau HTML est ajouté à la liste d’éléments du tableau de bord.
3	Accédez à l'onglet du panneau HTML et cliquez sur expression dans le panneau Général .
4	Entrez une expression contenant le code HTML souhaité et cliquez sur OK. Consultez l'illustration ci-dessous pour voir un exemple.

Le résultat de l'expression doit être une valeur Texte , qui deviendra le contenu du panneau HTML. Pour obtenir des informations à partir de données dans le panneau HTML, elles doivent être converties sous forme textuelle, en utilisant par exemple la fonction displaytext .

Remarque :

Les calculs d'expressions dans les panneaux HTML sont évalués de la même manière que les expressions agrégées, dans lesquelles les valeurs sont calculées au niveau racine d'une table.

Balises de style alignées

Au fur et à mesure que le HTML généré à partir du panneau HTML sera inséré dans le HTML pour la page Web complète, l'expression ne doit pas être un document HTML complet, mais uniquement la propriété innerHTML. Utilisez des balises de style intégré pour personnaliser l'apparence afin d'appliquer un style unique à chaque élément HTML.

Par exemple, en utilisant l'attribut « style » avec toutes les propriétés CSS qui y sont définies.

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

Important :

Tout CSS (non en ligne) utilisé dans un panneau HTML peut affecter d'autres éléments de la page. La personnalisation des éléments de la page en dehors du panneau HTML n'est pas recommandée et non prise en charge.

Lorsque vous utilisez les styles intégrés, vous pouvez utiliser les styles par défaut spécifiés par la plate-forme UiPath Process Mining , tels que la police personnalisée utilisée par la plate-forme UiPath Process Mining . Cela vous permet de créer un panneau HTML qui s'adapte à l'apparence de la plate-forme et s'adapte automatiquement aux modifications apportées au thème UiPath Process Mining .

Info-bulle

Une info-bulle personnalisée peut être ajoutée au panneau HTML à l'aide de la balise d'attribut data-tooltip . Le texte dans l'info-bulle de données est automatiquement sécurisé au format HTML, c'est-à-dire que les caractères spéciaux tels que « < » ou « & » sont remplacés par leurs équivalents HTML ; '<' ou '&'.

Si vous souhaitez inclure le formatage HTML dans l'info-bulle, utilisez plutôt data-tooltip-html .

Échappement

Lorsque vous écrivez du HTML ou un autre texte qui nécessite beaucoup d'échappement, vous pouvez réduire la quantité d'échappement en utilisant <<<< et >>>> . Tout texte placé entre quatre chevrons dans l'éditeur d'expressions est traité comme une valeur de texte, y compris les sauts de ligne.

Iframe avec une URL de données

Une alternative à l'utilisation de styles en ligne consiste à utiliser une iframe avec une URL de données.

Remarque :

Les styles par défaut spécifiés par la plate-forme UiPath Process Mining ne sont pas disponibles si vous utilisez l'option <iframe> .

Texte sélectionnable

Si vous souhaitez rendre le texte d'un panneau HTML sélectionnable, vous devez ajouter user-select: text ; dans le style du texte que vous souhaitez rendre sélectionnable. N'utilisez pas class="enableTextSelection" car il s'agit d'une classe interne du logiciel.