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.

Démos

HTML personnalisé : création de graphiques

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.

Télécharger l’application de démonstration depuis GitHub

Application de démonstration - instructions d'utilisation

1. Dans UiPath Apps, créez une nouvelle application et importez l'application de démonstration téléchargée.
2. Prévisualisez votre application pour interagir avec tous les types de graphiques.

HTML personnalisé : création d'un graphique à secteurs interactif à l'aide de fonctions variables

Introduction

Cette application combine les contrôles des entités, HTML personnalisé et Modifier la grille pour afficher un graphique à secteurs interactif. L'interactivité est activée en sélectionnant une option dans un menu déroulant, qui modifie les sections du graphique à secteurs et les enregistrements dans la grille d'édition. Par la suite, cliquer sur une section de graphique met à jour les données dans la grille de modification.

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.

Télécharger l’application de démonstration depuis GitHub
Aperçu de l’application de démonstration dans le cloud

Application de démonstration - instructions d'utilisation

1. Prévisualisez l'application de démonstration.
2. 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.
3. Pointez sur une tranche de graphique. L'info-bulle affiche le nom de la catégorie et le nombre de tickets.
4. Cliquez sur un quartier du graphique. La grille d'édition affiche les enregistrements de la catégorie sélectionnée.

Procédure

Pour voir comment les entités et les variables sont utilisées dans la commande HTML personnalisé, téléchargez les fichiers d'application suivants sur votre machine locale :

• Schéma d'entité
• Données de l'entité des tickets
• Données de l’entité Source des tickets (Tags Source)
• Fichier d'application

Après le téléchargement, procédez comme suit :

1. Dans UiPath Data Service, cliquez sur Importer le schéma:

   1. Sélectionnez le fichier ticket_entities_schema.json précédemment téléchargé.
   2. Dans l'onglet Entités , cochez les cases Tickets et Source des tickets.
   3. Basculez sur l'onglet Ensembles de choix et cochez les cases Continents et Niveau de friction.
   4. Cliquez sur Importer (Import).

2. Dans Data Service UiPath, sélectionnez l'entité Source des tickets (Tickets Source) :

   1. Cliquez sur Importer des données.
   2. Sélectionnez le fichier ticketsource_entity_data.csv précédemment téléchargé, puis cliquez sur Ouvrir.
   3. Basculez sur l'onglet Données pour voir les enregistrements téléchargés.

3. Dans Data Service UiPath, sélectionnez l'entité tickets :

   1. Cliquez sur Importer des données.
   2. Sélectionnez le fichier tickets_entity_data.csv précédemment téléchargé, puis cliquez sur Ouvrir.
   3. Les données des champs de type Relation et Ensemble de choix ne sont pas importées automatiquement. Vous devez remplir manuellement les données pour ces champs.
   4. Basculez sur l'onglet Données . Pour chaque enregistrement de tickets, mettez à jour les valeurs du champ Source en sélectionnant de manière aléatoire Chat, Téléphone ou E-mail.
   5. Dans l'onglet Données , pour chaque enregistrement de tickets, mettez à jour les valeurs du champ Friaction en sélectionnant de manière aléatoire 1, 2 ou 3.

4. Pour importer le fichier d'application, suivez cette étape, puis passez à l'étape 14. Dans UiPath Apps, créez une nouvelle application VB :

   1. Cliquez sur Importer depuis un fichier.
   2. Sélectionnez le fichier CustomHTMLPieChart_DemoApp.uiapp précédemment téléchargé, puis cliquez sur Ouvrir.
   3. Pour corriger les erreurs, remplacez l'entité dans l'application importée par celle que vous avez précédemment créée aux étapes 2 et 3.
   4. Dans l'application importée, sélectionnez la commande de liste déroulante nommée « CustomFilterDropdown », ouvrez l'éditeur d'expressions pour la propriété Liste des sources (List Source), puis enregistrez-le.

5. Pour créer l'application à partir de zéro, suivez les étapes 5 à 14. Dans UiPath Apps, créez une nouvelle application VB.

6. Dans votre application, référencez les entités créées aux étapes 1 à 3.

7. Créez les variables suivantes basées sur les entités de Data Service :

   Nom de variable	Saisie de texte	Entité référencée
   allTickets	Source de la liste	Tickets
   filteredTicketListSource	Source de la liste	Tickets
   selectedSourceType	Texte	-
   ticketSourceTypes	Source de la liste	Source des tickets

8. Ajoutez une commande Liste déroulante à votre application et renommez-la "CustomerFilterDropdown" :

   1. Dans le champ Libellé , renommez-le « Filter les tickets par nom de client ».

   2. Dans le champ Source de la liste , ouvrez l'éditeur d'expressions et écrivez l'expression VB suivante :

      New ListSource(of String)With{.data = allTickets.data.Select(Function(x) x.CustomerName).Distinct.ToList}
      

   3. Basculez sur l'onglet Événements , puis cliquez sur Créer une règle.

   4. Ajoutez la règle Définir la valeur , avec l'entrée suivante :

      Élément à définir

      filteredTicketListSource

      Valeur (Value)

      Fetch(of Tickets)(createFilterGroup(New QueryFilter(){addFilter(If((MainPage.CustomerFilterDropdown.SelectedItem Is Nothing),"","CustomerName"), "=", MainPage.CustomerFilterDropdown.SelectedItem)}, Nothing, 0), Nothing, Nothing, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("Source", New String(){"Id","Source"}), addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})

9. Ajoutez une commande En-tête à votre application et renommez-la « TicketCountHeader »:

   1. Dans le champ Texte , ouvrez l'éditeur d'expressions et écrivez l'expression VB suivante :

      (filteredTicketListSource.totalRecords).ToString +" Tickets"
      

10. Ajoutez un contrôle HTML Personnalisé à votre application et renommez-le « Graphique ».

    1. Ouvrez l' éditeur de code et remplacez le contenu de l'espace réservé par les extraits de code suivants :

    • HTML : génère un modèle de graphique JavaScript à partir d’une bibliothèque open source et applique les classes de style sur ce graphique.

      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
      <div class="chartContainer">
        <canvas class="pieChart" id="myChart"></canvas>
      </div>
      

    • CSS : définit deux classes de style : .chartContainer et .pieChart.

      .chartContainer {
        height: 100%;
        background-color: #ffffff;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        color: #526069;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .pieChart {
        width: 50%;
        max-width: 400px;
        max-height: 400px;
      }
      

    • JavaScript : définit les fonctions de la variable et ajoute l’interactivité au graphique.

      // Create an object to store counts
      var counts = {"Email": 0, "Phone": 0, "Chat": 0};
      
      // Mock data to see the chart in designer, You can assign it with empty array if you don't want to see chart in designer
      var Tickets = [
        {Source: { Source: 'Phone' }},
      ];
      
      // Function to count the number of tickets per Source
      function countTickets(tickets) {
        counts = {"Email": 0, "Phone": 0, "Chat": 0}; // Reset counts to zero
        for (var i = 0; i < tickets.length; i++) {
          counts[tickets[i].Source.Source]++;
        }
      }
      
      countTickets(Tickets); // Count tickets in the initial data
      
      // Create a Chart
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
          labels: ['Email', 'Phone', 'Chat'],
          datasets: [{
            label: '# of Tickets',
            data: [counts["Email"], counts["Phone"], counts["Chat"]],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)'
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          onClick: function(evt, elements) {
            if (elements.length) {
              var chartElement = elements[0];
              var label  = this.data.labels[chartElement.index];
              OutputSource = label;
              console.log(OutputSource); // You can see the stored value in browser's console on each click
              App.setVariable('selectedSourceType', OutputSource);
            }
          }
        }
      });
      
      // Function to update chart's data
      function updateChart(data) {
        NewTickets = data; // New data to update the chart
        countTickets(NewTickets);
        myChart.data.datasets[0].data = [counts["Email"], counts["Phone"], counts["Chat"]];
        myChart.update();
      
        let sourceWithData = Object.keys(counts).find(ticketSource => {
          return counts[ticketSource] > 0;
        });
        if(sourceWithData) {
          App.setVariable('selectedSourceType', sourceWithData);
        }
      }
      
      //Listen for updates to the ticket data and update chart
      async function registerOnChangeEvent() {
        App.onVariableChange('filteredTicketListSource',(listSource) => {
          updateChart(listSource.data);
        })
        const listSource = await App.getVariable('filteredTicketListSource');
        if(listSource?.data?.length > 0) {
          updateChart(listSource.data);
        }
      }
      
      registerOnChangeEvent();
      

    2. Cliquez sur Enregistrer (Save).

    3. Basculez sur l'onglet Style et définissez la Taille suivante :

       Width	1000 px
       Height	400 px

11. Ajoutez une commande En-tête à votre application et renommez-la « sourceTypeHeader »:

    1. Dans le champ Texte , ouvrez l'éditeur d'expressions et écrivez l'expression VB suivante :

       "Tickets created through " & selectedSourceType
       

12. Ajoutez une commande Modifier la Grille à votre application et renommez-la « TicketsListByType ».

    1. Dans le champ Source de données , ouvrez l'éditeur d'expressions et écrivez l'expression VB suivante :

       Fetch(of Tickets)(createFilterGroup(Nothing, New FilterGroup(){createFilterGroup(New QueryFilter(){addFilter(MainPage.TicketsListByType.SearchColumn, "contains", MainPage.TicketsListByType.SearchTerm)}, Nothing, 0), createFilterGroup(New QueryFilter(){addFilter("Source.Source", "=", selectedSourceType), addFilter("CustomerName", "contains", MainPage.CustomerFilterDropdown.SelectedItem)}, Nothing, 0)}, 0), New PaginationProps(MainPage.TicketsListByType.PageStart, MainPage.TicketsListByType.PageLimit), New SortOption(){addSortOption(MainPage.TicketsListByType.SortColumn, Not(Not(MainPage.TicketsListByType.isDescending)))}, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("Source", New String(){"Id","Source"}), addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})
       

13. Pour la Page Principale, passez à l'onglet Événements , puis cliquez sur Créer une règle.

    1. Ajoutez une règle Définir la valeur , avec l'entrée suivante :

       Élément à définir	allTickets
       Valeur (Value)	Ouvrez le générateur de requêtes, sélectionnez l'entité Tickets, puis cliquez sur Enregistrer.

    2. Ajoutez une deuxième règle Définir la valeur avec l’entrée suivante :

       Élément à définir	filteredTicketListSource
       Valeur (Value)	Ouvrez le générateur de requêtes, sélectionnez l'entité Tickets, puis cliquez sur Enregistrer.

14. Prévisualisez l'application, sélectionnez une option dans la liste déroulante et notez la mise à jour du graphique. Cliquez sur une section de graphique et notez que la grille d'édition se met à jour avec les données de la section sélectionnée.

HTML personnalisé : création de sélecteurs de date-heure

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.

Télécharger l’application de démonstration depuis GitHub

Application de démonstration - instructions d'utilisation

1. Dans UiPath Apps, créez une nouvelle application et importez l'application de démonstration téléchargée.
2. Prévisualisez votre application pour interagir avec le sélecteur de date-heure.

HTML personnalisé : création de champs mot de passe

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.

Télécharger l’application de démonstration depuis GitHub

Application de démonstration - instructions d'utilisation

1. Dans UiPath Apps, créez une nouvelle application et importez l'application de démonstration téléchargée.
2. Prévisualisez votre application pour interagir avec le champ mot de passe.

HTML personnalisé : création de champs d'entrée de signature

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.

Télécharger l’application de démonstration depuis GitHub
Aperçu de l’application de démonstration dans le cloud

Application de démonstration - instructions d'utilisation

1. Dans UiPath Apps, créez une nouvelle application et importez l'application de démonstration téléchargée.
2. Vous remarquerez peut-être des erreurs. Pour les corriger, remplacez le compartiment de stockage référencé "Demo app" par celui de votre locataire.
3. Prévisualisez l'application pour interagir avec le champ de saisie de signature.

Général

• Ouvrir l'éditeur de code : ouvre un éditeur à trois panneaux pour 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 améliorer l’accessibilité.
• Masqué (Hidden) : si la valeur est true, masque la commande au moment du runtime.
• Désactivé : si la valeur est true, la commande est 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 le clic.

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.

• Bordure : la bordure de la commande. L' épaisseur et le rayon 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 : 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 :

1. Dans l' éditeur de code du contrôle HTML personnalisé, passez à l'onglet Ressources externes .
2. 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.
3. 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.
4. Lorsque vous avez terminé d'ajouter toutes les ressources externes, cliquez sur Enregistrer.

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>

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

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 :

1. Ajoutez la ressource externe JavaScript suivante :

   https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js
   

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

Utilisation des variables dans le code HTML personnalisé

Pour établir la communication entre le contrôle HTML personnalisé et les autres contrôles ou intégrations, nous vous recommandons de créer des variables et 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();

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

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

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

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

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

Remarque :

• L’écouteur démarre après le rendu complet du contrôle HTML personnalisé. Si une valeur de variable change avant l'initialisation du contrôle 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	02-01-2024 (Format : AAAA-MM-JJ)
DateTimeOffset	2024-01-06T09:54:41.9170000Z (Format JS équivalent à la chaîne ISO de l'objet de date)
FichierApps : valeur de la commande de sélecteur de fichiers	Objet fichier JS
AppsFile : valeur créée à partir de l'URL Par exemple : new AppsFile("https://image.jpg")	Objet de fichier : {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 }
<Entity> (Single entity row)	{ 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 }
Datatable	[{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 des URL CDN de ressources externes telles que démarrés par la plate-forme, jQuery ou d'autres SDK JavaScript dans l'onglet Ressources externes .
• 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

• Dans l'éditeur JavaScript, l'ajout de boucles infinies ou de longue durée provoque un blocage dans le thread principal, ce qui rend l'onglet du navigateur ne répond pas. Pour éviter cela, assurez-vous que les conditions à l'intérieur des boucles ne s'exécutent pas indéfiniment. Cependant, s'il vous manque une boucle infinie qui entraîne un état qui ne répond pas, fermez l'onglet du navigateur et rouvrez-le.
• 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é

1. Ajoutez un console.log() dans l'éditeur JavaScript.
2. Ouvrez la console du navigateur en appuyant sur F12, puis sélectionnez l'onglet Console .
3. Dans les paramètres de la console, cochez la case Contexte sélectionné uniquement .
4. 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

1. Ajoutez un console.log() dans l'éditeur JavaScript.
2. Ouvrez la console du navigateur en appuyant sur F12, puis sélectionnez l'onglet Console .
3. 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.