cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
sgr
Helper I
Helper I

Conditional color formatting html table column- Possible?

I have created html table through flow, is there a way to conditional color formatting depending upon the status as shown below and send through email?

exp.JPG


emailcol.JPG

1 ACCEPTED SOLUTION

Accepted Solutions

found more easier way through replace function. Thanks Laxmi Narayan. 

here is for others who are looking similar;

replace(body('create_html_table'),'td>Risk','td style="color:red">Risk')

View solution in original post

11 REPLIES 11
v-bacao-msft
Community Support
Community Support

 

Hi @sgr ,

 

Please refer to this article to achieve your requirements:

https://alextofan.com/2019/02/14/flow-how-to-change-the-style-of-your-html-table-in-flow/

 

Best Regards,

Community Support Team _ Barry
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

found more easier way through replace function. Thanks Laxmi Narayan. 

here is for others who are looking similar;

replace(body('create_html_table'),'td>Risk','td style="color:red">Risk')

ainniss
New Member

I got the replace to work, but it removed the other formatting from my table.

 

I am not an expert with HTML. Can you advise where I should insert the replace(body........ expression.

 

See the format of my HTML table below.

 

 

<style>
table {
border: 1px solid #1C6EA4;
background-color: #ffffff;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table td, table th {
border: 1px solid #AAAAAA;
padding: 10px 10px;
}
table tbody td {
font-size: 15px;
}
table thead {
background: #813f98;
border-bottom: 2px solid #444444;
}
table thead th {
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}
table thead th:first-child {
border-left: none;
}
</style>

sgrpdl
Helper III
Helper III

@ainniss Plz be little clear, what format is being removed?
Well you can create another find and replace condition just beneath the 1st one to mitigate the issues.

replace(outputs(
'FormatTable'),'<th>','<th style="padding:2px">')
ainniss
New Member

Hi 

 

I guess my question should be, does the replace expression go within the Compose action for the HTML table format. or do I add another action which would be Compose 2 with replace(body'Create_html_table.....

 

In the first instance the replace(body worked for the text colour change but ignored all other table formatting.

In the 2nd instance the 2nd compose duplicated the HTML table.

🙂  This way... @ainniss 

sgrpdl_0-1636977094683.png

 

 

In my Data operations I do not have Format Table and Style table as options. I only have Compose.

 

I will attempt to use the 'Compose' for the replace to style the table but then do I replace all instance of they symbol { with <           ???

sgrpdl
Helper III
Helper III

@ainniss Ya, you have do every thing in compose...

which can be renamed later as Format Table and Style...

 

sgrpdl
Helper III
Helper III

@ainniss 
https://www.youtube.com/watch?v=FZGHmDlI-o4

 

I assume you are trying to do some thing similar like above? Have a look..

Hi I actually used this video to help with the original table formatting. I need to add conditional formatting to that same table.

I have a R.A.G. column in the table where the values will either be R for red, A for amber(yellow) or G for green so based on the letter I need the colour to change.

sgrpdl
Helper III
Helper III

@ainniss 

Now your query is clear, What i did in my case is 

a) I have  used inline CSS, not style css

b) First Create a CSV Table. I gave name "Create_HTML_table"

c) Now, Format the table with find and replace based on the R.A.G. The Col name is 'Status' in my case.
d) you can add padding in next compose as shown in Style in my case.

 

 

Format TABLE QUREY

replace(replace(replace(replace(replace(replace(body('Create_HTML_table'),'<table>','<table border="1" style="background-color:#ffffff;border-collapse:collapse;border:1px solid #CCCCCC;color:#000000;width:100%" cellpadding="2" cellspacing="2">'),

'tr><th>Status',
'tr bgcolor="#D9D9D9"><th>Status'),

'tr><td>R',
'tr bgcolor="#DE421B"> <td style="color: black">R'),

'td>A',
'tr bgcolor="FDE0D9"> <td style="color: black">A'),

'td>G',
'tr bgcolor="#ff66cc"> <td style="color: black">G')
 
try to do some thing like this... you can do it. Its eays, just play for an hour..
 

Helpful resources

Announcements
Power Automate News & Announcements

Power Automate News & Announcements

Keep up to date with current events and community announcements in the Power Automate community.

Community Calls Conversations

Community Calls Conversations

A great place where you can stay up to date with community calls and interact with the speakers.

Power Automate Community Blog

Power Automate Community Blog

Check out the latest Community Blog from the community!

Users online (6,164)