Format HTML table with Background color for one column alone

[Uthhra]

Hi All,

I am building a flow which gets values from SharePoint list using Get items. The values from Get Items are directly given to the Create HTML Table where I have a column called Overall RAG which is of Choice type (Red, Amber, Green). If the column has value Red that respective color must be the background color for the column. Likewise, the same for Amber and Green. I tried to give If conditions, but it is passing only the column value not the background color. The code which I tried to give was 

if(equals(items()?['Overall_x0020_RAG/Value'],'Red'),'Red',
if(equals(items()?['Overall_x0020_RAG/Value'],'Amber'),'Orange',
if(equals(items()?['Overall_x0020_RAG/Value'],'Green'),'Green','')))

But the error got as Items property should have at least one parameter.

Any help/ suggestion on this how it needs to be given.

Thanks in advance.

[efialttes]

Hi!
Let's assume your Overall_x0020_RAG column is the only one that can take 'Orange' 'Red' 'Green' values.
If so, you can add a "Compose" action block after the 'Create HTML table' and the following WDL expression:

replace(body('Create_HTML_table'),'<td>Orange</td>','<td bgcolor = "#FFA500">Orange</td>')

It will apply bg color #FFA500 (orange) to each cell with such text value
You can use 3 action blocks, one per colour, or write a single WDL expression with 3 replace() functions
Just remember to use 'Compose' action block output to your email body
Hope this helps

[Uthhra]

@efialttes 

I am giving the output of the HTML table to a compose block where the HTML table styling and formatting is being given. The output of the create HTML table is given at the last.

[Uthhra]

@efialttes 

I am able to give only one condition for Amber alone. I it try to give the same expression for other two colors I am getting error. How to give for all the three colors together?

[efialttes]

Hi!
You can use 3 Compose action blocks. "Compose 2" taking as input the first 'Compose' output...

replace(outputs('Compose'),'<td>Red</td>','<td bgcolor = "#FF0000">Red</td>')

..."Compose 3" taking as input the second Compose output...

replace(outputs('Compose_2'),'<td>Green</td>','<td bgcolor = "#00FF00">Green</td>')

...and then reference the last 'Compose' action block in your email body

You can also keep just one Compose action block and use a single complex WDL expression instead

More on HTML colour codes here:
https://htmlcolorcodes.com/ 

Hope this helps

[Uthhra]

@efialttes 

I used this expression replace(body('Create_HTML_table_3'),'<td>Amber</td>','<td bgcolor = "#FFA500">Orange</td>','<td>Green</td>','<td bgcolor = "#008000">Green</td>','<td>Red</td>','<td bgcolor = "#FF0000">Red</td>') to combine three expressions into one. But the color is not getting updated. 

[Uthhra]

@efialttes 

I gave the same way as you mentioned above keeping one reference to other. But still it is not updating the colors. Only the values gets updated not the color.

[efialttes · Accepted solution]

@Uthhra 
In order to have just one complex expression, remember to nest the WDL function replace(), as you would do when writing functions in excel:

replace(replace(replace(body('Create_HTML_table_3'),'<td>Amber</td>','<td bgcolor = "#FFA500">Orange</td>'),'<td>Green</td>','<td bgcolor = "#008000">Green</td>'),'<td>Red</td>','<td bgcolor = "#FF0000">Red</td>')

You can also write the expression directly inside your email body, thus no need for the 'Compose' action block

Hope this helps

[Uthhra]

@efialttes 

I gave the expression in the same way, but the color is not getting updated. I have attached the screenshot for the same.

[efialttes]

@Uthhra 
Can you share a screenshot from your current flow design? Please remember to expand the relevant action blocks (Select, Compose, Send an email) so we can see input values and expressions
Thanx!

[Uthhra]

@efialttes 

It is working now. Thanks a lot. I directly gave it without using the Compose block. Now the color is getting updated. 

[jony_19]

I hope that my post will help anyone reading this. I'm a firm believer in sharing the knowledge with the community. At least, that is how I have been learning.

replace(replace(replace(replace(replace(body('Create_HTML_table_-SharePoint_Results'), '<table>', '<table border="1" style="font-style:italic;font-size:90px">'), '<th>', '<th style="color:blue">'), '<td>Online</td>', '<td style="background-color:#c9f5ce;text-align:center"><b>Online</b>'), '<th>', '<th style="text-align:center">'), '<td>', '<td style="text-align:center">')

I used the above code to achieve the below results (see attachment). 

https://www.w3schools.com/html/html_formatting.asp > To help understand more the HTML code