studio-web

latest

false

Important :

Veuillez noter que ce contenu a été localisé en partie à l’aide de la traduction automatique. La localisation du contenu nouvellement publié peut prendre 1 à 2 semaines avant d’être disponible.

Guide de l'utilisateur Studio Web

PRODUIT :

Dernière mise à jour 30 avr. 2025

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.

Général

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.

Events

Pas d’événements.

Style

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 (...).

Éditeur de code pour HTML personnalisé

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.

Important :

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.

Ajout de ressources externes

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.

Pour référencer des fichiers .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).

Raccourcis d'accessibilité pour la touche Tab

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.

L'éditeur HTML

Dans ce panneau, vous pouvez saisir la structure de votre commande, qui est généralement contenue dans les balises <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.

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;
}

L’éditeur JavaScript

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',
      },
    },
  },
});

Utilisation de variables en HTML personnalisé

Pour établir la communication entre le contrôle HTML personnalisé et les autres contrôles ou intégrations, nous vous recommandons d'utiliser les fonctions intégrées setVariable(), getVariable() et onVariableChange() .

getVariable()

Dans l'éditeur JavaScript, utilisez cette fonction pour obtenir la valeur d'une variable existante.

Par exemple, pour transmettre la valeur d'une variable à un 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();

Remarque :

La fonctiongetVariable() est asynchrone, ce qui nécessite que vous utilisiez await.
Si vous appelez getVariable() à l’intérieur d’une fonction, faites de cette fonction async. Dans l'exemple fourni, nous avons créé la fonction init() et l'avons immédiatement invoquée.
Si vous appelez getVariable() à un niveau supérieur, intégrez-le dans une fonction async .

Pour gérer les erreurs telles que les noms de variables non valides, utilisez l'instruction try-catch. Par exemple :

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();

Remarque :

Pour attendre la fin de l'opération d'ensemble avant d'exécuter un autre code, utilisez await.

Pour gérer les erreurs telles que les noms de variables non valides ou les incompatibilités de type entre la variable et la valeur définie, utilisez l'instruction try-catch. Par exemple :

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);
});

Dans l'exemple suivant, nous attribuons la fonction renvoyée par le 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();

Remarque :

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, appelez getVariable() avant d'appeler onVariableChange().
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 : `new AppsFile("https://image.jpg")`new AppsFile("https://image.jpg")	Objet de fichier : `{FileSize: 0, Name: "", URL: "https://image.jpg", __infoType: "$metadata"}`{FileSize: 0, Name: "", URL: "https://image.jpg", __infoType: "$metadata"}
GUID	"5637F7DB-391D-4C8B-805D-0A918531CA3E"
List(Of string)	["Banana", "Kiwi", "Apple", "Lemon"]
ListSource(Of <Entity>)	`{ data: [{Name: "John", Age: "28", ...},{Name: "Kane", Age: "48", ...}], totalRecords: 2 }`{ data: [{Name: "John", Age: "28", ...},{Name: "Kane", Age: "48", ...}], totalRecords: 2 }
<Entity> (Single entity row)	`{ Name: "John", Age: "28", ... }`{ Name: "John", Age: "28", ... }
ListSource(Of <Choiceset>)	`{ data: [{DisplayName: "Male", Id: "00F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Male", ...}, {DisplayName: "Female", Id: "01F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Female", ...}], totalRecords: 2 }`{ data: [{DisplayName: "Male", Id: "00F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Male", ...}, {DisplayName: "Female", Id: "01F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Female", ...}], totalRecords: 2 }
Datatable	`[{From: 'Ahmedabad', To: 'Azua', ...},{From: 'banglore', To: 'Dominican Republic',...},...]`[{From: 'Ahmedabad', To: 'Azua', ...},{From: 'banglore', To: 'Dominican Republic',...},...]

Meilleures pratiques pour le HTML personnalisé

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.

Limites fonctionnelles

Pour connecter la commande aux applications, vous devez utiliser les fonctions de variable : getVariable(), setVariable(), onVariableChange().
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() et onVariableChange() 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 transferts de données d'image depuis le contrôle HTML vers un compartiment de stockage, ou vers une entité à l'aide d'une URL de données, ne doivent pas dépasser 1 Mo de taille de fichier. Les fichiers qui dépassent cette taille peuvent entraîner des problèmes de performances.
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()

Déboguer le code d'un contrôle HTML personnalisé

Ajout et filtrage des journaux de la console d'un contrôle HTML personnalisé

Ajoutez un console.log() dans l'éditeur JavaScript.
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.html pour le contrôle HTML souhaité.

Les journaux de la commande sélectionnée sont affichés dans la console.

Voir la vidéo pour plus de détails :

Ajout de points d'arrêt

Ajoutez un console.log() dans l'éditeur JavaScript.
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és VB

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.
`Hidden`	Booléen	Détermine la visibilité du contrôle HTML personnalisé . Si la valeur est true, masque la commande au moment du runtime.
`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.