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 Inhaltdas 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 bereitgestellten HTML-Code in das Feld Inhalt ein. Verwenden Sie dabei myImage als Platzhalternamen für das benutzerdefinierte JavaScript:

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

   2. Legen Sie die Aktion der beiden Schaltflächen auf Ereignis fest, sodass sie die Anzeige von zwei verschiedenen Bildern auslösen.
2. Fügen Sie im Hauptworkflow die Aktivitäten Formular anzeigen und Lokale Trigger ausführen ( 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 Bild zu laden und in einer lokalen Variablen zu speichern. Geben Sie in_Image in das Feld Dateiname ein, das im Data Manager erstellt wurde. Erstellen Sie im Feld Ausgabe eine lokale Variable mit dem Namen loadedImage. Variablentyp auf UiPath.Core.Image
   3. Fügen Sie eine Assign -Aktivität hinzu. Geben Sie im Feld Speichern unter das Base64Image -Ausgabeargument und im Feld Zu speichernder Wert die lokale Bildvariable und die .Base64 -Methode ein, 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 mit dem Namen templateSRC und dem Standardwert "data:image/png;base64,<base64>".
   Die Variable templateSRC fungiert als Vorlage für den in der HTML-Element -Komponente deklarierten Quellattributwert (src).
5. Erstellen Sie einen Trigger-Workflow für die erste Schaltflächen- Komponente mit dem Namen showUiPathShortLogoTrigger.
   1. Fügen Sie eine Formulartriggeraktivität hinzu, und legen Sie das Ereignis auf eine der Schaltflächen fest, die Sie hinzugefügt haben.
   2. Fügen Sie eine Invoke Workflow -Aktivität hinzu und rufen Sie den Workflow auf, der Bilder in die Base64-Codierung konvertiert. Rufen Sie den Workflow mithilfe der folgenden Argumente 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 Run Form Script -Aktivität 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 Formulartriggeraktivität hinzu, und legen Sie das Ereignis auf eine der Schaltflächen fest, die Sie hinzugefügt haben.
   2. Fügen Sie eine Invoke Workflow File -Aktivität hinzu und rufen Sie den Workflow ConvertImageToBase64 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 Run Form Script -Aktivität 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 die Schritte auszuführen und das Tutorial selbst auszuprobieren, sehen Sie sich dieses Beispielprojekt an.