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	Accédez à l'onglet Tableaux de bord et cliquez avec le bouton droit dans la liste des éléments du tableau de bord.
2	Sélectionnez le panneau Nouveau HTML (New HTML), puis la table à partir de laquelle vous souhaitez utiliser les données dans le panneau HTML. Un panneau Nouveau HTML est ajouté à la liste des éléments du tableau de bord.
3	Accédez à l'onglet du panneau HTML et cliquez sur expression dans le panneau Général (General).
4	Saisissez une expression contenant le code HTML souhaité et cliquez sur OK. Voir l’illustration ci-dessous pour 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 des données (telles que le nombre de factures) dans le panneau HTML, elles doivent être converties en un formulaire textuel, en utilisant par exemple la fonction displaytext .

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

Balises de style alignées

Étant donné que le code HTML généré à partir du panneau HTML sera inséré dans le code HTML de la page Web complète, l'expression ne doit pas être un document HTML complet, mais simplement la propriété innerHTML . Utilisez des balises de style intégrées 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 intégré) 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 n'est pas prise en charge.

Lorsque vous utilisez les styles en ligne, 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 du 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.