Activités (Activities)
Plus récente (Latest)
False
Image de fond de la bannière
Activités de workflow
Dernière mise à jour 23 févr. 2024

Affichage d'images dans les formulaires

Voici comment afficher une image à l’intérieur d’un formulaire en incorporant l’image à l’intérieur du formulaire. Pour les images Base64, vous les affichez à l'aide de JavaScript personnalisé.

Intégrer des images

Dans ce tutoriel, vous apprendrez à incorporer une image dans un formulaire à l'aide d'un composant HTML.

  1. Ajoutez le fichier image dans le même dossier que le formulaire que vous utilisez.
    Dans cet exemple, nous avons téléchargé une image nommée display_PDF_file_form.jpg.
  2. Ajoutez un composant Élément HTML (HTML Element ) dans le formulaire.
  3. Dans l'onglet Affichage (Display), sous Contenu(Content), écrivez l'extrait de code suivant : <img id="myimage" src="display_PDF_file_form.jpg">. Remplacez display_PDF_file_form.jpg par le nom de l'image que vous souhaitez afficher.
    Vous pouvez ajuster davantage la largeur et la hauteur de l'image à l'intérieur du formulaire, en utilisant les attributs width et height .

Affichage des images Base64

Dans ce tutoriel, vous apprendrez à afficher dynamiquement des images Base64 à l'aide d'UiPath Forms. L’automatisation implique la création d’un fichier de formulaire personnalisé avec un élément HTML et deux boutons pour permettre aux utilisateurs de sélectionner l’image qu’ils souhaitent afficher. De plus, un workflow distinct est créé pour convertir les images au format Base64. Ce workflow de conversion est invoqué dans d'autres workflows de déclencheur pour prétraiter les images avant de les afficher à l'intérieur du formulaire.
Prérequis : ajoutez les images que vous souhaitez afficher dans le dossier de projet Studio.
  1. Créez un nouveau formulaire et ajoutez-y un élément HTML et deux composants Button .
    1. Modifiez l' élément HTML et ajoutez le code HTML fourni dans le champ Contenu , en utilisant myImage comme nom d'espace réservé pour le code JavaScript personnalisé :
      <img id='myImage'  width='100' height='100' /><img id='myImage'  width='100' height='100' />
    2. Définissez l' Action des deux boutons sur Événement ( Event), ce qui en fait des déclencheurs pour afficher deux images différentes.
  2. Dans le workflow principal, ajoutez les activités Afficher le formulaire ( Show Form) et Exécuter les déclencheurs locaux (Run Local Triggers ) pour afficher le formulaire et activer tous les déclencheurs dans le projet.
  3. Créez un workflow distinct nommé ConvertImageToBase64 pour convertir les images du projet en encodage Base64.
    1. Créez deux arguments String dans le Data Manager:
      NomDirectionType de donnéesValeur par défautDescription
      in_ImagedansString"uipath.png" (l'image par défaut que vous souhaitez afficher, avant qu'un utilisateur clique sur un bouton) Cet argument contient le chemin d'accès à l'image que vous souhaitez convertir.
      Base64ImageSortieStringNACet argument contient le résultat de la conversion, qui est une image base64.
    2. Ajoutez une activité Load Image pour charger l'image et la stocker dans une variable locale. Dans le champ NomFichier , saisissez la valeur in_Image, créée dans le Gestionnaire de données. Dans le champ Sortie , créez une variable locale nommée loadedImage. Définissez le type de variable sur UiPath.Core.Image
    3. Ajoutez une activité de type Attribuer (Assign ). Dans le champ Enregistrer vers (Save to), saisissez l'argument de sortie Base64Image et dans le champ Valeur à enregistrer ( Value to save ), saisissez la variable d'image locale et la méthode .Base64 pour la convertir.
      Dans cet exemple, entrez loadedImage.Base64.
  4. Avant de créer les workflows de déclencheur, créez une variable globale String nommée templateSRC avec la valeur par défaut "data:image/png;base64,<base64>".
    La variable templateSRC sert de modèle pour la valeur de l'attribut source (src) déclarée dans le composant Élément HTML (HTML Element).
  5. Créez un workflow de déclencheur pour le premier composant Bouton (Button) nommé showUiPathShortLogoTrigger.
    1. Ajoutez une activité de déclencheur de formulaire et définissez l' événement sur l'un des boutons que vous avez ajoutés.
    2. Ajoutez une activité Appeler le workflow (Invoke Workflow) et invoquez le workflow qui convertit les images en encodage base64. Invoquez le workflow à l'aide des arguments ci-dessous :
      NomDirectionSaisie de texteValeur (Value)
      in_ImagedansStringuipath.png (l'image utilisée pour convertir puis afficher dans le formulaire)
      Base64ImageSortieStringbase64str (variable String locale)
  6. Ajoutez une activité Exécuter le script de formulaire (Run Form Script) pour afficher l'image base64 à l'aide de JavaScript personnalisé. Dans le champ Source , utilisez le script suivant :
    "document.getElementById('myImage').src='"+templateSRC.Replace("<base64>",base64str)+"'""document.getElementById('myImage').src='"+templateSRC.Replace("<base64>",base64str)+"'"
    Dans le script ci-dessus, l'espace réservé <base64> dans la valeur template_SRC est remplacé par les données réelles de l'image Base64 (base64str). Le template_SRC modifié obtenu est ensuite affecté comme valeur source (src) de l’élément d’image HTML avec l’ID 'myImage'. Cette opération met à jour dynamiquement la source de l’image pour afficher l’image encodée en Base64 souhaitée.
  7. Créez un autre workflow de déclencheur pour l'autre bouton.
    Dans cet exemple, vous pouvez nommer le workflow showUiPathLogoTrigger.
    1. Ajoutez une activité de déclencheur de formulaire et définissez l' événement sur l'un des boutons que vous avez ajoutés.
    2. Ajoutez une activité Invoke Workflow File et invoquez le workflow ConvertImageToBase64 à l'aide des arguments ci-dessous :
      NomDirectionSaisie de texteValeur (Value)
      in_ImagedansStringuipath2.png (l'image utilisée pour convertir puis afficher dans le formulaire)
      Base64ImageSortieStringbase64str (variable String locale)
  8. Ajoutez une activité Exécuter le script de formulaire (Run Form Script) pour afficher l'image Base64 à l'aide de JavaScript personnalisé. Dans le champ Source , utilisez le script suivant :
    "document.getElementById('myImage').src='"+templateSRC.Replace("<base64>",base64str)+"'""document.getElementById('myImage').src='"+templateSRC.Replace("<base64>",base64str)+"'"
    Le script modifie la valeur template_SRC en remplaçant l'espace réservé <base64> par les données réelles de l'image Base64, mettant à jour dynamiquement la source de l'image.

Exemple de workflow

Pour suivre les étapes et essayer le tutoriel vous-même, consultez cet exemple de projet.

  • Intégrer des images
  • Affichage des images Base64
  • Exemple de workflow

Cette page vous a-t-elle été utile ?

Obtenez l'aide dont vous avez besoin
Formation RPA - Cours d'automatisation
Forum de la communauté UiPath
Logo Uipath blanc
Confiance et sécurité
© 2005-2024 UiPath. All rights reserved.