Einbetten von Objekten in Formularaktionen

Sie können Ihre Formularaktionen so gestalten, dass Bilder oder PDF-Dateien angezeigt werden, um das Aussehen einfach mit Logos und Symbolen anzupassen oder Materialien bereitzustellen, die Ihren Action Center-Benutzern beim Ausführen der Aktion helfen können.

This feature is available with the Create Form Task activity only.

Um Objekte einzubetten, verwenden Sie die Eigenschaften im Abschnitt Speicher der Aktivität Create Form Task, um eine Verknüpfung mit einem Speicher-Bucket herzustellen, und die Aktivität Upload Storage File, um Dateien hinzuzufügen.

Sie können jeden Objekttyp einbetten, der von Speicher-Buckets unterstützt wird.

Das folgende Video zeigt, wie sich eine eingebettete PDF-Datei im Action Center verhält:

Voraussetzungen

Um die Funktionen zum Einbetten von Objekten in Formularaktionen nutzen zu können, benötigen Benutzer die folgenden Berechtigungen:

Benutzertyp	Berechtigungen
Action Center user	This user needs the following permissions at folder level: View for Storage Bucket and View for Storage File.
Robot user	This user needs the following permissions at folder level: View and Edit for Storage Bucket, and View and Create for Storage File.

Einbetten von Bildern aus Speicher-Buckets

Für eine bessere Leistung Ihrer Action Center-Benutzer empfehlen wir Ihnen, Bilder einzubetten, die zuvor in einen Speicher-Bucket hochgeladen wurden.

So betten Sie ein Bild in eine Formularaktion ein:

1. Use activities, such as the Upload Storage File activity, to upload the image to the storage bucket that is used by the Create Form Task activity. As part of this step, create a String variable to store the path where the file is uploaded, for example imagePath.
   Wichtig:

   Beim Hochladen des Speicher-Buckets wird das + -Zeichen in ein Leerzeichen konvertiert, was zu einem Fehler beim Rendern des Formulars führen kann.

2. In the Create Form Task activity, click the ellipsis (...) to the right of FormData and add an argument with the _storage keyword as a suffix:
   • Name: image_storage.
   • Direction: In.
   • Type: String.
   • Wert: imagePath.
   Hinweis:

   The _storage keyword is used to indicate that this is an object that is available in the activity's storage bucket. For the value, we added the variable where we stored the path to the uploaded image.

   Tipp:

   For images smaller than 2 KB, such as logos or icons, you can skip this step. In the following step where the image_storage argument is used, use the imagePath variable instead.

3. Add an HTML Element component and configure it as follows:
   • HTML Tag: div.
   • Content: <img src="{{ data.image_storage }}" />. This maps the storage file argument to the form component. Using the <img> tag displays the image in the form. Alternatively, you can use <a src="{{ data.image_storage }}" target=_blank> to add a link that opens the image in a new window.
   • Refresh On Change: selected.
   Hinweis:

   Sie können Links zu bestimmten Dateien hinzufügen, indem Sie im <a href="https://link-to-file"></a> -Tag auf sie verweisen. Sie können alle Validierungsfehler ignorieren, die im Feld Inhalt angezeigt werden. Sie wirken sich nicht auf das Formular-Rendering zur Laufzeit aus.

Wichtig:

TIFF files are not supported inside Form Actions. As an alternative, try the following:

• Konvertieren Sie die TIFF -Dateien in JPEG oder PNG , bevor Sie sie in einen Speicher-Bucket hochladen, indem Sie benutzerdefinierte Aktivitäten innerhalb des Workflows verwenden, mit dem Sie arbeiten.
• Verweisen Sie mit einem <href> -Tag auf die Datei im Speicher-Bucket.

Beispielworkflow

Um die Schritte des Tutorials nachzuvollziehen und selbst auszuprobieren, laden Sie den Beispiel-Workflow herunter .

Einbetten von PDF-Dateien aus Speicher-Buckets

Das Einbetten einer PDF-Datei aus einem Speicher-Bucket ist bei regulären Formularen anders als bei erweiterten Formularen. Erweiterte Formulare bieten eine verbesserte Rendering-Leistung und eine erweiterte Nutzung der Komponenten und ihrer Logik. Sie können erweiterte Formulare erstellen, indem Sie in der Aktivität „Create Form Task“ die Option Erweiterte Formulare aktivieren auswählen.

Reguläre Formulare

Sie können auch PDF-Dateien, die in einen Speicher-Bucket hochgeladen wurden, zu einer Formularaktion hinzufügen, damit Ihre Action Center-Benutzer sie überprüfen können.

So bebetten Sie eine PDF-Datei in eine reguläre Formularaufgabe:

1. Use activities, such as the Upload Storage File activity, to upload the PDF file to the storage bucket that is used by the Create Form Task activity. As part of this step, create a String variable to store the path where the file is uploaded, for example docPath.
2. In the Create Form Task activity, click the ellipsis (...) to the right of FormData and add an argument with the _storage keyword as a suffix:
   • Name: doc_storage.
   • Direction: In.
   • Type: String.
   • Wert: docPath.
     Wichtig:

     Das Schlüsselwort _storage wird verwendet, um anzugeben, dass dies ein Objekt ist, das im Speicher-Bucket der Aktivität verfügbar ist. Für den Wert haben wir die Variable hinzugefügt, in der wir den Pfad zur hochgeladenen PDF-Datei gespeichert haben.

3. Add an HTML Element component to the form and specify the following:
   • HTML Tag: div.
   • Content: <embed src={{ data.doc_storage }} width="600px" height="500px"></embed>.
   • Refresh On Change: cleared.
4. Save your changes and close the component window, to return to the Form Designer window.
5. Klicken Sie auf JSON bearbeiten Symbol für das HTML-Element.
6. Under the Component JSON, search for "refreshOn" and set its value to the form data attribute, so that you have "refreshOn": "doc_storage".
7. Stellen Sie sicher, dass der Text, der für das Feld _storage automatisch generiert wird, im Formular verfügbar ist. Es kann als ausgeblendetes Feld markiert werden.
   Wichtig:

   Wenn Sie UiPath.FormActivitiyLibrary v1.1.10 verwenden, beachten Sie, dass die Option Komponenten-JSON nicht die Option "refreshOn" auflistet. Sie können jedoch den "refreshOn" -Schlüssel manuell hinzufügen und dessen Wert wie oben erwähnt festlegen.

Laden Sie dieses Beispiel hier herunter .

Erweiterte Formulare

So bebetten Sie eine PDF-Datei in eine erweiterte Formularaufgabe:

1. Verwenden Sie Aktivitäten wie die Aktivität Upload Storage File , um die PDF-Datei in den Speicher-Bucket hochzuladen, der von der Aktivität Create Form Task verwendet wird. Geben Sie den Pfad der Datei im Feld Pfad der Aktivität Upload Storage File an. Geben Sie in diesem Beispiel sample.pdf ein.
2. Klicken Sie in der Aktivität Create Form Task auf die Ellipse (...) rechts neben FormData und fügen Sie ein Argument mit den folgenden Konfigurationen hinzu:
   • Schlüssel: pdf.
   • Direction: In.
   • Type: String.
   • Wert: "sample.pdf".
3. Fügen Sie dem Formular eine PDF- Komponente hinzu und geben Sie den Namen des zuvor hinzugefügten Arguments als Eigenschaftsnamen an. Geben Sie in diesem Beispiel pdf an.
4. Save your changes and close the component window, to return to the Form Designer window.

Laden Sie dieses Beispiel hier herunter .