Displaying images in forms

Here's how to display an image inside a form through embedding the image inside the form. For Base64 images you display them using custom JavaScript.

Embed images

In this tutorial you will learn how to embed an image inside a form, using an HTML component.

1. Add the image file in the same folder as the form you're using.
   In this example, we uploaded an image named display_PDF_file_form.jpg.
2. Add an HTML Element component into the form.
3. In the Display tab, under Content, write the following code snippet: <img id="myimage" src="display_PDF_file_form.jpg">. Replace display_PDF_file_form.jpg with the name of the image that you want to display.
   You can further adjust the width and height of the image inside the form, using the width and height attributes.

Displaying Base64 images

In this tutorial, you will learn how to dynamically display Base64 images using UiPath Forms. The automation involves creating a custom form file with an HTML Element and two buttons to allow users to select which image they want to display. Additionally, a separate workflow is created to convert images to Base64 format. This conversion workflow is invoked in other trigger workflows to preprocess the images before displaying them inside the form.

Prerequisites: Add the images that you want to display inside the Studio project folder.

1. Create a new form and add an HTML Element and two Button components to it.
   1. Edit the HTML Element and add the provided HTML code in the Content field, using myImage as a placeholder name for the custom JavaScript:

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

   2. Set the Action of the two buttons to Event, making them triggers for showing two different images.
2. In the Main workflow add the Show Form and Run Local Triggers activities to display the form and enable all triggers in the project.
3. Create a separate workflow named ConvertImageToBase64 to convert project images to Base64 encoding.
   1. Create two String arguments in the Data Manager:

      Name	Direction	Data Type	Default Value	Description
      in_Image	In	String	"uipath.png" (the default image that you want to show, before a user clicks a button)	This argument holds the path to the image that you want to convert.
      Base64Image	Out	String	NA	This argument holds the result of the conversion, which is a base64 image.

   2. Add a Load Image activity to load the image and store it in a local variable. In the FileName field input the in_Image, created in the Data Manager. In the Output field create a local variable named loadedImage. Set the variable type to UiPath.Core.Image
   3. Add an Assign activity. In the Save to field input the Base64Image output argument and in the Value to save field input the local image variable and the .Base64 method to convert it.
      In this example, input loadedImage.Base64.
4. Before creating the trigger workflows, create a String global variable named templateSRC with the Default Value "data:image/png;base64,<base64>".
   The templateSRC variable acts as a template for the source attribute (src) value declared in the HTML Element component.
5. Create a trigger workflow for the first Button component named showUiPathShortLogoTrigger.
   1. Add a Form trigger activity and set the Event to one of the buttons that you added.
   2. Add an Invoke Workflow activity and invoke the workflow that converts images to base64 encoding. Invoke the workflow using the arguments below:

      Name	Direction	Type	Value
      in_Image	In	String	uipath.png (the image used to convert and then display in the form)
      Base64Image	Out	String	base64str (local String variable)

6. Add a Run Form Script activity to display the base64 image using custom JavaScript. In the Source field use the following script:

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

   In the script above, the <base64> placeholder within the template_SRC value is replaced with the actual Base64 image data (base64str). The resulting modified template_SRC is then assigned as the source (src) value of the HTML image element with the ID 'myImage'. This operation dynamically updates the image source to display the desired Base64-encoded image.
7. Create another trigger workflow for the other button.
   In this example, you can name the workflow showUiPathLogoTrigger.
   1. Add a Form trigger activity and set the Event to one of the buttons that you added.
   2. Add an Invoke Workflow File activity and invoke the ConvertImageToBase64 workflow using the arguments below:

      Name	Direction	Type	Value
      in_Image	In	String	uipath2.png (the image used to convert and then display in the form)
      Base64Image	Out	String	base64str (local String variable)

8. Add a Run Form Script activity to display the Base64 image using custom JavaScript. In the Source field use the following script:

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

   The script modifies the template_SRC value by replacing the <base64> placeholder with the actual Base64 image data, dynamically updating the image source.

Workflow example

To follow the steps and try out the tutorial yourself see this sample project.