How to pass variable in Action center

[tharani.natarajan]

Hello Team , please help me on this issue .

I want to display an image stored on my local machine in an Action Center form. I’ve already converted the image to a Base64 string. How do I pass the Base64 variable into the HTML image tag within the form design?

(i have given dummy base64 value as it was long text ).

I tried pass this -

[naveen.s]

@tharani.natarajan ,

Try This:

To display an image in an Action Center form using a Base64 string, you can use the HTML <img> tag and pass the Base64 string as the src attribute. Here’s how you can do it step by step:

Steps to Display Base64 Image in Action Center Form

1. Ensure Base64 Format: Make sure your Base64 string is properly formatted. It should start with data:image/[image_type];base64,. For example, if it’s a PNG image, it should look like this:

   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
   

2. HTML Tag Creation: When creating your HTML element in the Action Center form, set the HTML Tag with the following format:

   <img src="data:image/png;base64,{{yourBase64Variable}}" alt="Image" />
   

   Replace {{yourBase64Variable}} with the actual variable name that holds your Base64 string.

Example

Assuming your Base64 variable is named base64Image, your HTML tag should look like this:

<img src="data:image/png;base64,{{base64Image}}" alt="Image" />

Implementation in Action Center

1. Open Action Center Form Designer: Go to your Action Center and open the form designer.

2. Add HTML Element Component: Drag and drop an HTML Element into your form.

3. Configure the HTML Element:

   • Label: You can provide a label for the image if needed.
   • HTML Tag: Paste the <img> tag format as shown in the example above.
   • CSS Class: If you have specific styling to apply, include a CSS class.
   • Other Attributes: Adjust any additional attributes as needed (e.g., styles, classes).

4. Save the Form: Once you’ve configured the HTML tag, save the form.

Displaying the Image

When the form is rendered, it should display the image represented by the Base64 string. Make sure to test it to verify that the image appears correctly.

Troubleshooting

• If the image does not appear, double-check the Base64 string for correctness.
• Ensure that the MIME type in the data:image/... part corresponds with the actual image type (e.g., image/png, image/jpeg).

By following these steps, you should be able to display images stored as Base64 strings in your Action Center forms successfully. If you have further questions or need additional assistance, feel free to ask!

[tharani.natarajan]

Hi Naveen ,

I have tried the same . it works fine when hardcoded base64 value is passed .but when variable is passed image is not getting displayed

[naveen.s]

@tharani.natarajan

I have tried the same . it works fine when hardcoded base64 value is passed .but when variable is passed image is not getting displayed

@tharani.natarajan ,

Try this:

If the image displays correctly when a hardcoded Base64 value is used but fails to display when using a variable, it could be due to how the variable is being interpreted or formatted within the Action Center form. Here are some troubleshooting steps and suggestions to help you resolve this issue:

1. Ensure Variable Contains Valid Data

Confirm that the variable holding your Base64 string is not null and contains valid Base64 data. You can add logging to check the contents of the variable right before you use it in the HTML tag.

2. Using Correct Syntax

When embedding a variable inside an HTML tag in UiPath Action Center, ensure you’re using the correct syntax. Below are the steps to pass the variable correctly:

• If your variable is named base64Image, ensure you use the data binding syntax correctly:

  <img src="data:image/png;base64,@{base64Image}" alt="My Local Image" />
  

• Make sure the base64Image variable is the exact name you used in your UiPath workflow and contains the entire Base64 string.

3. Debugging the Variable

• Use Write Line or Log Message activities right before you set the HTML content to see what the content of the variable is:

Log Message: "Base64 Image Data: " + base64Image

• Check for issues like:
  • Truncated Data: Make sure the full Base64 string is being passed. Partial or truncated strings will not render the image.
  • Data Formatting: Ensure there are no unexpected characters or newlines that may affect how the string is constructed.

4. Encoding Issues

Ensure that there are no encoding issues when you are generating the Base64 string. The string might contain special characters that need to be properly handled or escaped.

5. Compare with Hardcoded Value

Copy the hardcoded Base64 value that works and directly assign it to a new string variable to see if that new variable works. This helps identify if the issue is with changing environments while passing a variable.

6. Action Center Form Designer

When working within the Action Center form designer, make sure that the variable you are using is correctly scoped and accessible in the context where you’re trying to use it.

7. Test in Isolation

If possible, isolate the HTML rendering logic and test it in a simple environment to see if the variable works there. Sometimes the context (like Action Center) could introduce issues.

Example of the Process

Here’s a streamlined example incorporating the checks:

1. Create a String variable, say base64Image, and ensure it contains valid Base64 data.
2. Check the variable content:

   Log Message: "Base64 Image Data: " + base64Image
   

3. Use it in your HTML tag:

   <img src="data:image/png;base64,@{base64Image}" alt="My Local Image" />
   

4. Ensure that the variable type is String and no unwanted characters are present.

Conclusion

By following these steps, you should identify the root cause of why the variable isn’t rendering the image as expected. If the problem persists, please provide more specific details about how you’re generating the Base64 string or any errors you might encounter, and I would be glad to assist further.

[sudster]

Did you try {{data.base64Variable}}?
When using the Set Form Values only use base64Variable though.