apps

latest

false

Important :

Veuillez noter que ce contenu a été localisé en partie à l’aide de la traduction automatique.

Guide de l'utilisateur d'Apps

PRODUIT :

Automation Cloud Automation Cloud Public Sector Automation Suite

Last updated 15 nov. 2024

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

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.

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

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.

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

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

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 :

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

Dans Data Service UiPath^® , cliquez sur Importer le schéma ( Import Schema) :
1. Sélectionnez le fichier ticket_entities_schema.json précédemment téléchargé.
2. Dans l'onglet Entités (Entities), cochez les cases Bénéfices (Tabs) et Source des tickets (Benefits Source).
3. Basculez vers l'onglet Ensembles de choix ( Choice Sets ) et cochez les cases Continents (Continents) et Niveau de friction (Fraction Level).
4. Cliquez sur Importer (Import).
Dans Data Service UiPath^® , sélectionnez l'entité Source des tickets (Tickets Source) :
1. Cliquez sur Importer des données (Import data).
2. Sélectionnez le fichier ticketsource_entity_data.csv précédemment téléchargé, puis cliquez sur Ouvrir ( Open).
3. Basculez vers l'onglet Données (Data) pour afficher les enregistrements téléchargés.
Dans Data Service UiPath^® , sélectionnez l'entité tickets :
1. Cliquez sur Importer des données (Import data).
2. Sélectionnez le fichier tickets_entity_data.csv précédemment téléchargé, puis cliquez sur Ouvrir ( Open).
3. Les données des champs de type Relation ( Relationship ) et Ensemble de choix ( Choice Set ) ne sont pas importées automatiquement. Vous devez remplir manuellement les données de ces champs.
4. Basculez sur l'onglet Donnée (Data) . 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 (Data), pour chaque enregistrement de ticket, mettez à jour les valeurs du champ Fractionnement (Fraction) en sélectionnant de manière aléatoire 1, 2 ou 3.
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 à partir d’un fichier (Import from file).
2. Sélectionnez le fichier CustomHTMLPieChart_DemoApp.uiapp précédemment téléchargé, puis cliquez sur Ouvrir ( Open).
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.
Pour créer l'application à partir de zéro, suivez les étapes 5 à 14.
Dans UiPath^® Apps, créez une nouvelle application VB.
Dans votre application, référencez les entités créées lors des étapes 1 à 3.

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

Ajoutez une commande Liste déroulante ( Dropdown ) à votre application et renommez-la « ListeDropdownFiltreClient » :

Dans le champ Libellé (Label), renommez-le en « Filtrer les tickets par nom de client ».
Dans le champ Source de la liste ( List Source ), 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}New ListSource(of String)With{.data = allTickets.data.Select(Function(x) x.CustomerName).Distinct.ToList}
```
Basculez sur l'onglet Événements (Events), puis cliquez sur Créer une règle ( Create rule).

Ajoutez la règle Définir la valeur ( Set Value ) avec l'entrée suivante :

Élément à définir

filteredTicketListSourcefilteredTicketListSource

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

Ajoutez une commande En-tête ( Header ) à votre application et renommez-la « NiveauEnTête » :
1. Dans le champ Texte , ouvrez l'éditeur d'expressions et écrivez l'expression VB suivante :
```
(filteredTicketListSource.totalRecords).ToString +" Tickets"(filteredTicketListSource.totalRecords).ToString +" Tickets"
```

Ajoutez une commande HTML personnalisé à votre application et renommez-la « Chart » :

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

Éditeur	Code	Utilisation
HTML	`<script src="https://cdn.jsdelivr.net/npm/chart.js"> </script> <div class="chartContainer"> <canvas class="pieChart" id="myChart"></canvas> </div>`<script src="https://cdn.jsdelivr.net/npm/chart.js"> </script> <div class="chartContainer"> <canvas class="pieChart" id="myChart"></canvas> </div>	Génère un modèle de graphique JavaScript à partir d'une bibliothèque open source et applique les classes de style à ce graphique.
CSS	`.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; }`.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; }	Définit deux classes de style : `.chartContainer` et `.pieChart`.
JavaScript	// 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();// 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();	Définit les fonctions des variables et ajoute l'interactivité au graphique.

Éditeur

Code

Utilisation

HTML

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

Génère un modèle de graphique JavaScript à partir d'une bibliothèque open source et applique les classes de style à ce graphique.

CSS

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

Définit deux classes de style : .chartContainer et .pieChart.

JavaScript

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

Définit les fonctions des variables et ajoute l'interactivité au graphique.

Cliquez sur Enregistrer (Save).
Passez à l’onglet Style (Style) et définissez la Taille ( Size) suivante :

Width 1000 px
Height 400 px

Ajoutez une commande En-tête ( Header ) à 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"Tickets created through " & selectedSourceType
```

Ajoutez une commande Modifier la grille ( Edit Grid ) à votre application et renommez-la « TicketsListByType ».

Dans le champ Source de données (Data source ), 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"})})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"})})

Pour la PagePrincipale(MainPage), basculez sur l'onglet Événements (Events), puis cliquez sur Créer une règle ( Create rule).

Ajoutez une règle Définir la valeur ( Set Value ) avec l'entrée suivante :

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

Ajoutez une deuxième règle Définir la valeur ( Set Value ), avec l'entrée suivante :

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

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

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.

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

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.

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

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.

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 la commande HTML personnalisé (Custom HTML) et d'autres commandes 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();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

Le HTML personnalisé ne permet pas de déclencher des règles de contrôle.
La connexion de la commande aux applications s'effectue uniquement à l'aide des fonctions de variable : getVariable(), setVariable(), onVariableChange().
Pour accéder aux données de processus ou de file d'attente, vous devez attribuer 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 des menus contextuels ou déroulants. Vous devez donc définir la taille de la commande HTML pour qu'elle 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 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 microphone à l'aide de MediaDevices.getUserMedia()
- Demande de paiement
- Accéder à l'emplacement à l'aide de navigator.geolocation()
- Partage de données à l'aide de 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.
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.html pour 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 :

Ajout de points d'arrêt

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é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.
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.