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' />

   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:

      Nom	Direction	Type de données	Valeur par défaut	Description
      in_Image	dans	String	"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.
      Base64Image	Sortie	String	NA	Cet 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 :

      Nom	Direction	Saisie de texte	Valeur (Value)
      in_Image	dans	String	uipath.png (l'image utilisée pour convertir puis afficher dans le formulaire)
      Base64Image	Sortie	String	base64str (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)+"'"

   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 :

      Nom	Direction	Saisie de texte	Valeur (Value)
      in_Image	dans	String	uipath2.png (l'image utilisée pour convertir puis afficher dans le formulaire)
      Base64Image	Sortie	String	base64str (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)+"'"

   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 vous-même le tutoriel, consultez cet exemple de projet.