Embedding Objects in Form Actions

You can design your Form Actions to display images or PDF files, to simply customize the look with logos and icons, or to provide materials that can help your Action Center users in completing the Action.

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

To embed objects, you use the properties under the Storage section of the Create Form Task activity to link to a Storage Bucket and the Upload Storage File activity to add files.

You can embed any type of object that is supported by storage buckets.

The video below shows how an embedded PDF file behaves in Action Center:

Prerequisites

To use the capabilities of embedding objects in Form Actions, users need the following permissions:

User type	Permissions
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.

Embedding images from storage buckets

For your Action Center users to experience better performance, we recommend that you embed images that were previously uploaded to a Storage Bucket.

To embed an image in a Form Action:

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.
   Important: The storage bucket upload converts the + sign into a space, which can result in an error during form rendering.
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.
   • Value: imagePath.
   Note: 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.
   Tip: 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.
   Note: You can add links to specific files by referencing them in the <a href="https://link-to-file"></a> tag. You can ignore any validation errors that appear on the Content field, they do not affect form rendering at runtime.

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

• Convert the TIFF files to JPEG or PNG before uploading it to a storage bucket, using custom activities inside the workflow that you are working with.
• Reference the file inside the storage bucket, using a <href> tag.

Sample workflow

To follow the steps of the tutorial and try it out yourself, download the sample workflow.

Embedding PDF files from storage buckets

Embedding a PDF file from a storage bucket is different for regular forms, than for advanced forms. Advanced forms offer an improved rendering performance and advanced usage of the components and their logic. You can create advanced forms by selecting Enable Advanced Forms in the Create Form Task activity.

Regular forms

You can also add PDF files that were uploaded to a storage bucket to a Form Action so that your Action Center users can review it.

To embed a PDF in a regular form task:

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.
   • Value: docPath.
     Important: The _storage keyword is used to indicate that this is an object that is available inside the activity's storage bucket. For the value, we added the variable where we stored the path to the uploaded PDF file.

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. Click the Edit JSON icon for the 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. Make sure the text which gets auto-generated for the _storage field is available in the form. It can be marked as a hidden field.
   Important: If you use UiPath.FormActivitiyLibrary v1.1.10, notice that the Component JSON doesn't list the "refreshOn" option. However, you can manually add the "refreshOn" key and set its value as mentioned above.

Download this example here.

Advanced forms

To embed a PDF in an advanced form task:

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. Specify the path of the file in the Path field of the Upload Storage File activity. For this example, input sample.pdf.
2. In the Create Form Task activity, click the ellipsis (...) to the right of FormData and add an argument with the following configurations:
   • Key: pdf.
   • Direction: In.
   • Type: String.
   • Value: "sample.pdf".
3. Add a PDF component to the form and specify the name of the argument added previously as the Property Name. For this example, specify pdf.
4. Save your changes and close the component window, to return to the Form Designer window.

Download this example here.