Anzeigen von Bildern in Formularen

Hier erfahren Sie, wie Sie ein Bild in einem Formular anzeigen, indem Sie das Bild in das Formular einbetten. Bei Base64-Bildern zeigen Sie sie mit benutzerdefiniertem JavaScript an.

Bilder einbetten

In diesem Tutorial erfahren Sie, wie Sie ein Bild mithilfe einer HTML-Komponente in ein Formular einbetten.

1. Fügen Sie die Bilddatei im selben Ordner wie das verwendete Formular hinzu.

   In diesem Beispiel haben wir ein Bild mit dem Namen display_PDF_file_form.jpg hochgeladen.

2. Fügen Sie eine HTML-Element- Komponente in das Formular ein.

3. Schreiben Sie auf der Registerkarte Anzeige unter Inhalt das folgende Code-Snippet: <img id="myimage" src="display_PDF_file_form.jpg">. Ersetzen Sie display_PDF_file_form.jpg durch den Namen des Bilds, das Sie anzeigen möchten.

   Sie können die Breite und Höhe des Bilds innerhalb des Formulars mithilfe der Attribute width und height weiter anpassen.

Anzeigen von Base64-Bildern

In diesem Tutorial erfahren Sie, wie Sie Base64-Bilder mit UiPath Forms dynamisch anzeigen können. Die Automatisierung umfasst das Erstellen einer benutzerdefinierten Formulardatei mit einem HTML-Element und zwei Schaltflächen, mit denen Benutzer auswählen können, welches Bild sie anzeigen möchten. Darüber hinaus wird ein separater Workflow erstellt, um Bilder in das Base64-Format zu konvertieren. Dieser Konvertierungs-Workflow wird in anderen Trigger-Workflows aufgerufen, um die Bilder vorzuverarbeiten, bevor sie im Formular angezeigt werden.

Voraussetzungen: Fügen Sie die Bilder hinzu, die Sie im Studio-Projektordner anzeigen möchten.

1. Erstellen Sie ein neues Formular und fügen Sie ein HTML-Element und zwei Schaltflächenkomponenten hinzu.

   1. Bearbeiten Sie das HTML-Element und fügen Sie den angegebenen HTML-Code im Feld Inhalt hinzu, indem Sie myImage als Platzhalternamen für das benutzerdefinierte JavaScript verwenden:

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

   2. Legen Sie die Aktion der beiden Schaltflächen auf Ereignis fest, sodass sie für die Anzeige von zwei verschiedenen Bildern ausgelöst werden.

2. Fügen Sie im Hauptworkflow die Aktivitäten Show Form und Run Local Triggers hinzu , um das Formular anzuzeigen und alle Trigger im Projekt zu aktivieren.

3. Erstellen Sie einen separaten Workflow mit dem Namen ConvertImageToBase64 , um Projektbilder in die Base64-Codierung zu konvertieren.

   1. Erstellen Sie zwei String -Argumente im Data Manager:

      Name	Richtung	Datentyp	Standardwert	Beschreibung
      in_Image	in	String	"uipath.png" (das Standardbild, das Sie anzeigen möchten, bevor ein Benutzer auf eine Schaltfläche klickt)	Dieses Argument enthält den Pfad zu dem Bild, das Sie konvertieren möchten.
      Base64Image	Aus	String	Nicht zutreffend	Dieses Argument enthält das Ergebnis der Konvertierung, ein Base64-Bild.

   2. Fügen Sie eine Load Image- Aktivität hinzu, um das Image zu laden und in einer lokalen Variablen zu speichern. Geben Sie im Feld Dateiname den in_Image ein, der im Data Manager erstellt wurde. Erstellen Sie im Feld Ausgabe eine lokale Variable mit dem Namen loadedImage. Legen Sie den Variablentyp auf UiPath.Core.Imagefest.

   3. Fügen Sie eine Assign- Aktivität hinzu. Geben Sie im Feld Speichern in das Ausgabeargument Base64Image ein und im Feld Zu speichernder Wert die lokale Bildvariable und die Methode .Base64 , um sie zu konvertieren.

      Geben Sie in diesem Beispiel loadedImage.Base64 ein.

4. Bevor Sie die Trigger-Workflows erstellen, erstellen Sie eine globale String-Variable namens templateSRC mit dem Standardwert "data:image/png;base64,<base64>".

   Die templateSRC -Variable fungiert als Vorlage für den Wert des Quellattributs (src), der in der HTML-Element- Komponente deklariert ist.

5. Erstellen Sie einen Trigger-Workflow für die erste Schaltflächenkomponente mit dem Namen showUiPathShortLogoTrigger.

   1. Fügen Sie eine Form Trigger-Aktivität hinzu und legen Sie das Ereignis auf eine der hinzugefügten Schaltflächen fest.

   2. Fügen Sie eine Aktivität des Typs Invoke Workflow hinzu und rufen Sie den Workflow auf, der Bilder in die Base64-Codierung konvertiert. Rufen Sie den Workflow mit den folgenden Argumenten auf:

      Name	Richtung	Typ	Wert
      in_Image	in	String	uipath.png (das Bild, das zum Konvertieren und dann im Formular verwendet wird)
      Base64Image	Aus	String	base64str (lokale String -Variable)

6. Fügen Sie eine Aktivität Run Form Script hinzu, um das base64-Bild mit benutzerdefiniertem JavaScript anzuzeigen. Verwenden Sie im Feld Quelle das folgende Skript:

   "document.getElementById('myImage').src='"+templateSRC.Replace("<base64>",base64str)+"'"
   

   Im obigen Skript wird der Platzhalter <base64> innerhalb des template_SRC -Werts durch die tatsächlichen Base64-Bilddaten (base64str) ersetzt. Das resultierende geänderte template_SRC wird dann als Quellwert (src) des HTML-Bildelements mit der ID 'myImage' zugewiesen. Dieser Vorgang aktualisiert die Bildquelle dynamisch, um das gewünschte Base64-codierte Bild anzuzeigen.

7. Erstellen Sie einen weiteren Trigger-Workflow für die andere Schaltfläche. In diesem Beispiel können Sie den Workflow showUiPathLogoTrigger nennen.

   1. Fügen Sie eine Form Trigger-Aktivität hinzu und legen Sie das Ereignis auf eine der hinzugefügten Schaltflächen fest.

   2. Fügen Sie eine Aktivität Invoke Workflow File hinzu und rufen Sie den ConvertImageToBase64 -Workflow mithilfe der folgenden Argumente auf:

      Name	Richtung	Typ	Wert
      in_Image	in	String	uipath2.png (das Bild, das zum Konvertieren und dann im Formular verwendet wird)
      Base64Image	Aus	String	base64str (lokale String -Variable)

8. Fügen Sie eine Aktivität Run Form Script hinzu, um das Base64-Bild mit benutzerdefiniertem JavaScript anzuzeigen. Verwenden Sie im Feld Quelle das folgende Skript:

   "document.getElementById('myImage').src='"+templateSRC.Replace("<base64>",base64str)+"'"
   

Das Skript ändert den template_SRC -Wert, indem es den Platzhalter <base64> durch die tatsächlichen Base64-Bilddaten ersetzt und die Bildquelle dynamisch aktualisiert.

Workflow-Beispiel

Um selbst die Schritte auszuführen und das Tutorial auszuprobieren, sehen Sie sich dieses Beispielprojekt an .