How to display Html table with customised CSS in Uipath form

Help Forms
1

I have data table variable which is processed and I have converted into html table as shown below

image
image1914×382 6.77 KB

I need to pass this in UiPath form and display as output.
I have tried using datatable component in form but its not displaying with colors
So I have converted as html table and tried to pass it.
But struck while passing it
Pls suggest the possible approaches

@Palaniyappan @Bopaiah_MS

2

@BHARATH_KUMAR7,

Use UiPath Form’s HTML Element control and bind your HTML table string to its Default Value.
Apply all colours using inline CSS like .
Set Sanitize HTML to False so that your styles render correctly as per UiPath documentation.

3

You can try this approach

Create the HTML table string in UiPath using Assign activity or StringBuilder then add an HTML Element in the Form Designer. Then go to Field Key → set it as, e.g., HtmlTable. When invoking the form, pass the HTML string as input data:
New Dictionary(Of String, Object) From { {"HtmlTable", htmlTableString} }

Cheers

4

Hi @bhavesh.choubey ,
Thanks for suggesting me approach
I have my Htmltext as variable which consists of table data and the field key in the form

image
image1919×1021 116 KB

I have created dictionary variable as suggested and then what to pass and how to pass

Thanks for investigating

5

Now use an Assign activity before the Show Form and pass this
formData = New Dictionary(Of String, Object) From { {"HtmlTable", Htmltext} }

Here HtmlTable must match the Field Key you set in the form’s HTML Element and Htmltext is your variable containing the HTML table string also formData is your dictionary variable of type Dictionary<String, Object>. Now in the Show Form activity go to Input Data and pass formData as the value.
inside the form, open the HTML Element properties set Default Value to {{HtmlTable}}.

Cheers

6

Hi @bhavesh.choubey ,
I have done the following steps where should I declare in HTML element property
{{HtmlTable}} .

image
image1252×824 29.3 KB

Thanks in Advance!

7

You need to declare {{HtmlTable}} inside the Content field of the HTML Element under the Display tab, but before that, make sure the Field Key of the HTML Element is set to HtmlTable without curly braces.

Cheers

8

From what I recall, the custom CSS stuff just doesn’t really work in these classic Forms.

I’ve previously just had to convert all my CSS to inline formatting throughout the HTML, which is annoying and makes the HTML much longer, but works.

A GPT can quickly convert it if you give it your HTML and your CSS

9

Hi @bhavesh.choubey,
I have tried the above suggested method but couldnot populate my html in form
Can you pls look into my html file and provide solution
test.html (3.9 KB)
test.html (3.9 KB)

10

Hi @bhavesh.choubey
Could also review my workflow for solution
DataTableToHtmlText-Excel.xaml (21.5 KB)

11

Can you share me teh excel file Dataln.xlsx so that i can execute it and check ?

Cheers

12

Hi @bhavesh.choubey
Kindly find the excel
DataIn.xlsx (10.0 KB)