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 au formulaire.

3. Dans l'onglet Affichage , sous Contenu, é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 du projet Studio.

1. Créez un nouveau formulaire et ajoutez-y un élément HTML et deux composants Bouton .

   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 JavaScript personnalisé :

      <img id='myImage'  width='100' height='100' />
      

   2. Définissez l’ Action des deux boutons sur Événement, en les faisant se déclencher pour afficher deux images différentes.

2. Dans le workflow principal , ajoutez les activités Afficher le formulaire et Exécuter les déclencheurs locaux pour afficher le formulaire et activer tous les déclencheurs du 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 Gestionnaire de données:

      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. Ajouter une activité Attribuer . Dans le champ Enregistrer vers, saisissez l'argument de sortie Base64Image et dans le champ Valeur pour enregistrer, 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éclenchement, 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 .

5. Créez un workflow de déclencheur pour le premier composant Bouton nommé showUiPathShortLogoTrigger.

   1. Ajoutez une activité 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 et appelez le workflow qui convertit les images en codage base64. Appelez 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 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é 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 pour afficher l'image Base64 à l'aide d'un 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.