- Démarrage
- Avant de commencer
- Comment
- Accéder à l'URL de production d'une application
- Build a mobile-friendly app
- Intégrer des cartes
- Définir un contexte externe (Set External Context)
- Utiliser des tableaux pour remplir les commandes Liste déroulante, Liste déroulante à sélection multiple et Bouton radio
- Utiliser TableDonnées avec les commandes Table et Modifier la grille
- Utiliser le masque de saisie
- Notifications
- Utilisation d'expressions VB
- Concevoir votre application
- Événements et règles
- Règle : If-Then-Else
- Règle : ouvrir une page
- Règle : Ouvrir l'URL
- Règle : Fermer le Pop-Over/la feuille du bas
- Règle : Afficher le message
- Règle : Afficher/Masquer la roulette
- Règle : Définir une valeur (Set Value)
- Règle : Démarrer le processus
- Règle : Réinitialiser les valeurs
- Règle : Charger le fichier dans le compartiment de stockage
- Règle : Télécharger un fichier depuis un compartiment de stockage (Download File From Storage Bucket)
- Règle : Créer un enregistrement d'entité (Create Entity Record)
- Règle : Mettre à jour un enregistrement d'entité (Update Entity Record)
- Règle : Supprimer un enregistrement d’entité
- Règle : ajouter à la file d'attente (Add to Queue)
- Règle : Déclencher un workflow
- Tirer parti de la RPA dans votre application
- Exploitation des entités de votre application
- Exploitation des entités de votre application
- Gestion du cycle de vie des applications (Application lifecycle management, ALM)
- Guide de dépannage de base
Guide de l'utilisateur d'Apps
HTML personnalisé
Le contrôle HTML personnalisé cible les utilisateurs avancés et offre la flexibilité des langages de programmation HTML, CSS et JavaScript pour créer des contrôles interactifs personnalisés selon les besoins de leur entreprise. La commande comprend des éditeurs dédiés pour le code HTML, CSS et JavaScript, avec l'avantage supplémentaire d'intégrer des fichiers CSS et JavaScript hébergés en externe via des URL.
Introduction
Cette application montre comment créer différents types de graphiques à l'aide de bibliothèques JavaScript telles que d3.js ou chart.js.
Application de démonstration - essayez-la vous-même
Pour essayer les graphiques interactifs vous-même, utilisez l'application de démonstration.
Application de démonstration - instructions d'utilisation
- Dans UiPath® Apps, créez une nouvelle application et importez l'application de démonstration téléchargée.
- Prévisualisez votre application pour interagir avec tous les types de graphiques.
Introduction
Cette application combine des entités, des HTML personnalisés et des commandes Modifier la grille pour afficher un graphique à secteurs interactif. L'interactivité est activée en sélectionnant une option dans un menu déroulant, ce qui modifie les sections du graphique à secteurs et les enregistrements dans la grille d'édition. Plus tard, cliquer sur une section de graphique met à jour les données de la grille d'édition.
Application de démonstration - essayez-la vous-même
Pour essayer vous-même le graphique à secteurs interactif, utilisez l'application de démonstration ou suivez la procédure.
Application de démonstration - instructions d'utilisation
- Prévisualisez l'application de démonstration.
- Dans la liste déroulante « Filtrer les tickets par nom de client », sélectionnez une option. Le nombre total de tickets, la représentation du graphique à secteurs et les données de la grille d'édition devraient changer.
- Pointez sur une tranche de graphique. L'info-bulle affiche le nom de la catégorie et le nombre de tickets.
- Cliquez sur un quartier du graphique. La grille d'édition affiche les enregistrements de la catégorie sélectionnée.
Procédure
Après le téléchargement, procédez comme suit :
Introduction
Cette application montre comment créer un sélecteur de date-heure personnalisé.
Application de démonstration - essayez-la vous-même
Pour essayer vous-même le sélecteur de date-heure, utilisez l'application de démonstration.
Application de démonstration - instructions d'utilisation
- Dans UiPath® Apps, créez une nouvelle application et importez l'application de démonstration téléchargée.
- Prévisualisez votre application pour interagir avec le sélecteur de date-heure.
Introduction
Cette application montre comment créer des champs de mot de passe.
Application de démonstration - essayez-la vous-même
Pour essayer vous-même le champ mot de passe, utilisez l’application de démonstration.
Application de démonstration - instructions d'utilisation
- Dans UiPath® Apps, créez une nouvelle application et importez l'application de démonstration téléchargée.
- Prévisualisez votre application pour interagir avec le champ mot de passe.
Introduction
Cette application montre comment créer des champs d'entrée de signature.
Application de démonstration - essayez-la vous-même
Pour essayer vous-même la saisie de signature, utilisez l'application de démonstration.
Application de démonstration - instructions d'utilisation
- Dans UiPath® Apps, créez une nouvelle application et importez l'application de démonstration téléchargée.
- Vous remarquerez peut-être des erreurs. Pour les corriger, remplacez le compartiment de stockage référencé "Demo app" par celui de votre locataire.
- Prévisualisez l'application pour interagir avec le champ de saisie de signature.
-
Ouvrir l'éditeur de code ( Open code editor) - Ouvre un éditeur à trois panneaux permettant d'ajouter le code HTML, CSS et JavaScript.
-
Libellé accessible : la description de la commande. Cette propriété est utilisée par les lecteurs d'écran pour une meilleure accessibilité.
-
Masqué (Hidden) : si la valeur est true, masque la commande au moment du runtime.
-
Désactivé ( Disabled ) : si la valeur est true, rend la commande inactive au moment du runtime. Le contenu HTML, CSS et JavaScript se charge, mais ne répond pas aux actions de l'utilisateur, telles que les clics.
-
Alignement de commande (Control Alignment) : hérite de l'alignement parent par défaut. Un autre alignement que le parent peut être défini. Pour revenir par défaut à l'alignement parent, désélectionnez les options remplacées.
Remarque : l'alignement dépend de la mise en page sélectionnée pour le parent (Vertical vs Horizontal). - Bordure (Border) : la bordure de la commande. L' épaisseur et le rayon des bordures peuvent être configurés.
-
Marge (Margin) : la marge de la commande. Par défaut, une marque de 4px est définie. Les propriétés des marges Haut/Bas (Top/Bottom)et Gauche/Droite (Left/Right) sont combinées. Ces propriétés peuvent être dissociées à l'aide du bouton Lier (Link) sur le côté droit de la section Marge (Margin).
-
Taille (Size) : largeur et hauteur de la commande. Par défaut, la taille est définie sur
auto. Pour définir des valeurs minimales ou maximales, cliquez sur l'icône à trois points (...).
L'éditeur de code de la commande HTML personnalisé fournit trois panneaux pour saisir le code dans les langages de programmation HTML, CSS et JavaScript. Chaque éditeur prend en charge IntelliSense, ou la complétion automatique de code, ainsi que la mise en surbrillance de la syntaxe.
Le code des panneaux est compilé dans un projet et rendu dans Apps Studio pour l'aperçu. Pour observer la fonctionnalité de la commande, prévisualisez l'application.
-
Chaque éditeur a une taille de contenu maximale de 5 Mo. Lorsque le contenu dépasse cette taille, vous ne pouvez plus enregistrer vos modifications.
-
IntelliSense ne fonctionne pas pour les codes CSS et JavaScript écrits dans l'éditeur HTML.
Si vous avez déjà des styles ou des scripts définis, vous pouvez les référencer dans la commande, sans écrire le code dans les panneaux CSS ou JavaScript correspondants.
.cssou .js existants :
-
Dans l' éditeur de code de la commande HTML personnalisé, basculez vers l'onglet Ressources externes .
-
Sous la section CSS, ajoutez un fichier CSS externe. Le fichier doit être hébergé sur une URL accessible par le réseau pour garantir la compatibilité et la disponibilité lorsque l'application est en cours d'exécution.
-
Dans la section JavaScript, ajoutez un fichier de script externe. Le fichier doit être hébergé sur une URL accessible par le réseau pour garantir la compatibilité et la disponibilité lorsque l'application est en cours d'exécution.
-
Lorsque vous avez terminé d'ajouter toutes les ressources externes, cliquez sur Enregistrer ( Save).
Par défaut, la touche Tab ajoute un espace de tabulation dans l'éditeur actuel. Pour personnaliser le comportement de la touche Tab, utilisez les raccourcis suivants :
|
Système d'exploitation |
Raccourci |
Comportement |
|---|---|---|
|
Windows |
CTRL + M |
Indique à la touche Tab de naviguer entre les panneaux et de passer au focus sur les boutons visibles de l'éditeur. Appuyez à nouveau sur CTRL+M pour revenir au comportement de tabulation par défaut. |
|
MacOS |
CTRL+Maj+M | Indique à la touche Tab de naviguer entre les panneaux et de passer au focus sur les boutons visibles de l'éditeur. Appuyez à nouveau sur CTRL + Shift + M pour revenir au comportement de tabulation par défaut. |
<body></body> d'un bloc de code HTML.
Par exemple, pour ajouter l'élément conteneur d'un graphique à secteurs interactif dans votre application, vous utiliserez l'extrait HTML suivant :
<canvas id="myChart" class="chart-container" style="width:100%;max-width:600px"></canvas><canvas id="myChart" class="chart-container" style="width:100%;max-width:600px"></canvas>Où :
-
id="myChart"fait référence à l'élément JavaScript "myChart" qui génère le graphique à secteurs interactif à l'intérieur de l'élément HTML. Pour plus de détails, voir L'éditeur JavaScript. -
class="chart-container"fait référence à la classe CSS « chart-container » qui ajoute le style du graphique à secteurs à l'intérieur de l'élément HTML. Pour plus de détails, voir L'éditeur CSS.
Dans ce panneau, vous pouvez saisir le style de votre commande et les éléments qu'il contient.
Par exemple, pour ajouter des couleurs et une bordure au graphique à secteurs, vous utiliserez l'extrait CSS suivant :
.chart-container {
background-color: #f3f7e9;
border: 1px solid #cccccc;
}.chart-container {
background-color: #f3f7e9;
border: 1px solid #cccccc;
}Dans ce panneau, vous pouvez créer la partie interactive de vos commandes, comme des mises à jour de contenu, des cartes ou des graphiques 2D/3D interactifs.
Par exemple, pour créer un graphique à secteurs relatif aux ventes de produits Apple dans le monde entier et pour le concevoir afin qu'il affiche les valeurs du quartier sélectionné, vous procéderez comme suit :
-
Ajoutez la ressource externe JavaScript suivante :
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.jshttps://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js -
Utilisez l'extrait JavaScript suivant :
const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'pie', data: { labels: ['iPhone', 'iPad', 'MacBook', 'Apple Watch', 'AirPods'], datasets: [{ label: 'Sales', data: [120000, 80000, 50000, 40000, 30000], backgroundColor: [ '#5CB85C', // Green '#F0AD4E', // Orange '#D9534F', // Red '#5BC0DE', // Light blue '#999', // Gray ], borderColor: '#fff', borderWidth: 2, }], }, options: { plugins: { legend: { position: 'top', }, title: { display: true, text: 'Apple Products Sales', }, }, }, });const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'pie', data: { labels: ['iPhone', 'iPad', 'MacBook', 'Apple Watch', 'AirPods'], datasets: [{ label: 'Sales', data: [120000, 80000, 50000, 40000, 30000], backgroundColor: [ '#5CB85C', // Green '#F0AD4E', // Orange '#D9534F', // Red '#5BC0DE', // Light blue '#999', // Gray ], borderColor: '#fff', borderWidth: 2, }], }, options: { plugins: { legend: { position: 'top', }, title: { display: true, text: 'Apple Products Sales', }, }, }, });
setVariable(), getVariable() et onVariableChange() .
getVariable()
Dans l'éditeur JavaScript, utilisez cette fonction pour obtenir la valeur d'une variable existante.
internalValue, vous utiliseriez le code JavaScript suivant :
async function init() {
let internalValue = await App.getVariable('<app_variable_name>');
}
init();async function init() {
let internalValue = await App.getVariable('<app_variable_name>');
}
init();-
La fonction
getVariable()est asynchrone, ce qui nécessite que vous utilisiezawait. -
Si vous appelez
getVariable()à l’intérieur d’une fonction, faites de cette fonctionasync. Dans l'exemple fourni, nous avons créé la fonctioninit()et l'avons immédiatement invoquée. -
Si vous appelez
getVariable()à un niveau supérieur, intégrez-le dans une fonctionasync.
async function init() {
try {
const value = await App.getVariable("test");
} catch (e) {
console.log("Error in evaluating app variable:", e);
}
}
init();async function init() {
try {
const value = await App.getVariable("test");
} catch (e) {
console.log("Error in evaluating app variable:", e);
}
}
init();setVariable()
Dans l'éditeur JavaScript, utilisez cette fonction pour définir une valeur sur une variable existante. Le premier argument est le nom de la variable, et le deuxième argument est la valeur que vous souhaitez définir.
async function setValue() {
await App.setVariable('<app_variable_name>', <app_variable_value>);
}
setValue();async function setValue() {
await App.setVariable('<app_variable_name>', <app_variable_value>);
}
setValue();await.
try {
App.setVariable('<app_variable_name>', <app_variable_value>);
} catch (e) {
console.log("Error in setting app variable:", e);
}try {
App.setVariable('<app_variable_name>', <app_variable_value>);
} catch (e) {
console.log("Error in setting app variable:", e);
}onVariableChange()
Dans l'éditeur JavaScript, utilisez cette fonction pour écouter les modifications d'une valeur de variable existante et accéder à la dernière valeur de variable.
App.onVariableChange('<app_variable_name>', value => {
console.log("Latest value: ", value);
});App.onVariableChange('<app_variable_name>', value => {
console.log("Latest value: ", value);
});onVariableChange() à la variable deregister . Ensuite, si vous ne voulez plus écouter les modifications de variables, vous pouvez invoquer la fonction deregister() :
const deregister = App.onVariableChange('<app_variable_name>', value => {
console.log("Latest value: ", value);
});
// To stop listening for value changes, the deregister function can be invoked like below
deregister();const deregister = App.onVariableChange('<app_variable_name>', value => {
console.log("Latest value: ", value);
});
// To stop listening for value changes, the deregister function can be invoked like below
deregister();-
L'écouteur démarre après le rendu complet de la commande HTML personnalisé. Si la valeur d'une variable change avant l'initialisation de la commande HTML personnalisé, la valeur mise à jour n'est pas capturée.
Pour obtenir la dernière valeur de la variable, appelezgetVariable()avant d'appeleronVariableChange(). -
La commande HTML et les fonctions qu'elle contient sont initialisées après l'affichage de la commande au moment du runtime.
Types de variables
|
Type de variable d'application |
Exemple de réponse des fonctions de variables |
|---|---|
|
Text (String) |
"Hello world" |
|
UInt64 (Int) |
100 |
|
Decimal number |
50.25 |
|
True/False (Boolean) |
Vrai |
|
DateOnly |
2024-01-02 (Format : JJ-MM-AAAA) |
| DateTimeOffset |
2024-01-06T09:54:41.9170000Z (Format JS équivalent : chaîne ISO de l'objet date) |
| FichierApps : valeur d'une commande de sélecteur de fichiers | Objet fichier JS
|
| AppsFile : valeur créée à partir de l'URL
Par exemple : |
Objet de fichier : |
|
GUID |
"5637F7DB-391D-4C8B-805D-0A918531CA3E" |
| List(Of string) | ["Banana", "Kiwi", "Apple", "Lemon"] |
| ListSource(Of <Entity>) | |
| <Entity> (Single entity row) | |
| ListSource(Of <Choiceset>) | |
| Datatable | |
-
N'incluez pas de données sensibles dans la commande HTML personnalisé en raison de son accès côté client.
-
N'utilisez pas les balises
<html>et<head>dans l' éditeur HTML, car le code est automatiquement ajouté à l'intérieur des balises<body>. -
Ajoutez les URL CDN de ressources externes telles que Tools, JQuery ou d'autres SDK JavaScript dans l'onglet Ressources externes (External Resources).
-
Si vous ne voulez plus écouter le changement de la variable, utilisez la fonction
deregister(). -
Évitez les boucles de données volumineuses pour éviter de ralentir l'application et pour que le contrôle reste réactif.
-
Minimisez autant que possible l'utilisation des éléments DOM : créez des éléments DOM uniquement lorsque cela est nécessaire et supprimez-les lorsqu'ils deviennent obsolètes.
-
Utilisez le défilement infini ou virtuel pour les ensembles de données volumineux par rapport au défilement standard.
-
Créez et gérez un code propre, optimisé et sans redondance.
-
In the JavaScript editor, adding infinite or long-running loops causes a block in the main thread, making the browser tab unresponsive. To prevent this, ensure that conditions inside of loops do not run indefinitely. However, if you miss an infinite loop which results in an unresponsive state, force close the browser tab and reopen it.
-
Le HTML personnalisé ne permet pas de déclencher des règles de contrôle.
-
Pour connecter la commande aux applications, vous devez utiliser les fonctions de variable :
getVariable(),setVariable(),onVariableChange(). -
Pour accéder aux données de processus ou de file d'attente, vous devez affecter une variable pour chaque propriété de processus ou de file d'attente.
-
Les dimensions de la commande HTML ne s'ajustent pas dynamiquement pour l'affichage de fenêtres contextuelles ou de menus déroulants. Vous devez définir manuellement la taille du contrôle HTML pour qu'il s'adapte à ces menus.
-
Vous ne pouvez pas interagir avec la commande HTML pendant la phase de conception.
-
Les fonctions
setVariable(),getVariable()etonVariableChange()ne fonctionnent qu'au moment de l'exécution. -
Les modifications apportées aux noms de variables ou les suppressions de variables ne sont pas automatiquement reflétées dans les éditeurs de code. Vous devez mettre à jour manuellement le code avec les variables actuelles.
-
Les variables stockant les fichiers à partir du contrôle HTML ne peuvent pas être utilisées dans la règle Charger le fichier dans le compartiment de stockage ( Upload File to Storage Bucket ) ou pour remplir les champs Type de fichier ( File Type) des entités Data Service.
-
La commande peut communiquer avec d'autres composants UiPath® , tels que les processus, les files d'attente ou les compartiments de stockage, uniquement via l'utilisation de variables.
-
Le code CSS prétraité, utilisant LESS ou SCSS, est incompatible avec la commande HTML.
-
Les API suivantes échouent en mode silencieux lorsqu'elles sont utilisées, en raison de problèmes de sécurité :
-
Téléchargement à l’aide de l’attribut
download. -
Ouverture des modaux à l'aide de
Window.alert(),Window.confirm(),Window.print(),Window.prompt(). -
Verrouillage du pointeur et de l'orientation.
-
Naviguer dans le contexte du navigateur de niveau supérieur.
-
Passer en mode plein écran à l'aide de
requestFullscreen(). -
Capture d'écran à l'aide de
MediaDevices.getDisplayMedia(). -
Accéder à la caméra ou au studio à l'aide de
MediaDevices.getUserMedia(). -
Demander des paiements.
-
Accéder à l'emplacement à l'aide de
navigator.geolocation(). -
Partage des données via
navigator.share()
-
- Ajoutez un
console.log()dans l'éditeur JavaScript. - Dans votre session Apps Studio, ouvrez la console du navigateur en appuyant sur F12, puis sélectionnez l'onglet Console .
- Dans les paramètres de la console, cochez la case Contexte sélectionné uniquement ( Selected context only ).
- Dans la liste déroulante Contexte JavaScript en haut de la page de la console, sélectionnez l'option
html-control-base.htmlpour la commande HTML souhaitée.
Les journaux de la commande sélectionnée sont affichés dans la console.
Voir la vidéo pour plus de détails :
- Ajoutez un
console.log()dans l'éditeur JavaScript. - Dans votre session Apps Studio, ouvrez la console du navigateur en appuyant sur F12, puis sélectionnez l'onglet Console .
- Dans la partie droite du journal, cliquez sur le message de la MV.
Le débogueur s'ouvre. Sélectionnez votre point d'arrêt en cliquant sur le numéro de ligne souhaité.
Voir la vidéo pour plus de détails :
|
Propriété VB |
Type de données |
Description |
|---|---|---|
|
AccessibleLabel | Chaîne de caractères (string) |
La description du contrôle, utilisée par les technologies d'accessibilité telles que les lecteurs d'écran. |
| Masqué | Booléen | Détermine la visibilité du contrôle HTML personnalisé . Si la valeur est true, masque la commande au moment du runtime. |
| Désactivé (Disabled) | Booléen | Détermine si le contrôle HTML personnalisé est désactivé. Si la valeur est true, désactive l'interaction avec la commande au moment du runtime. Le contenu HTML, CSS et JavaScript se charge, mais ne répond pas aux actions de l'utilisateur. |
- Démos
- HTML personnalisé : création de graphiques
- HTML personnalisé : création d'un graphique à secteurs interactif à l'aide de fonctions variables
- HTML personnalisé : création de sélecteurs de date-heure
- HTML personnalisé : création de champs mot de passe
- HTML personnalisé : création de champs d'entrée de signature
- Général
- Events
- Style
- Éditeur de code pour HTML personnalisé
- Ajout de ressources externes
- Raccourcis d'accessibilité pour la touche Tab
- L'éditeur HTML
- L’éditeur CSS
- L’éditeur JavaScript
- Utilisation de variables en HTML personnalisé
- Meilleures pratiques pour le HTML personnalisé
- Limites fonctionnelles
- Déboguer le code d'un contrôle HTML personnalisé
- Ajout et filtrage des journaux de la console d'un contrôle HTML personnalisé
- Ajout de points d'arrêt
- Propriétés VB
