HTML Styling Text Red with Yellow Background Color

Like (0) Share

Report

Posted on 9 Apr 2023 12:29:02 by Fsomers68

Hi all,

Thanks to @Nived_Nambiar and @v-xiaochen-msft I was able to fix my issue to have past due 'due dates' highlight red in my HTML table that I send via Power Automate each day. Thank you again!

I've identified an additional requirement based on our workflow in that we would also like to have the due date cell highlight yellow (keeping text red) if the due date is more than 5 days past due. I've tried dropping some background-color expressions in my Select action, but am getting errors.

My current if expression is:

if(less(item()?['DueDate'],utcnow()),'red','black')

My convertFromUtc expression is:

convertFromUtc(item()?['DueDate'],'Eastern Standard Time', 'h:mm tt dddd MMMM d, yyyy')

Then I do a Replace expression in the body of the email:

replace(replace(replace(body('Create_HTML_table2'),'&lt;','<'),'&gt;','>'),'&quot;','"')

Which generates:

The dropping of background-color in that I've tried has not worked.

I'm not sure how to combine both the red font and yellow background desire in the Requestor Due Date box in my select action. Can anyone assist?

Thanks in advance!

I have the same question (0)

All responses (2)

Answers (1)

Nived_Nambiar 18,014 Super User 2025 Season 2 on 09 Apr 2023 at 17:37:46

Like (0)

Report

Re: HTML Styling Text Red with Yellow Background Color

Hi @Fsomers68

Glad to know issue is resolved, for comparision of dates it is better to go via difference between dates.

Was this reply helpful? Yes No
Verified answer

Fsomers68 94 on 09 Apr 2023 at 14:42:01

Like (0)

Report
Re: HTML Styling Text Red with Yellow Background Color

Ok - ChatGPT came through (after 6 failed tries 😉)

If you're looking to do something similar - this is what worked:

The full code is:

<div style="background-color:@{if(and(less(item()?['DueDate'], utcnow()), greaterOrEquals(div(sub(ticks(utcnow()), ticks(item()?['DueDate'])), 864000000000), 5)), 'yellow', 'white')}; color:@{if(less(item()?['DueDate'], utcnow()), 'FireBrick', 'black')}">@{convertFromUtc(item()?['DueDate'],'Eastern Standard Time', 'h:mm tt dddd MMMM d, yyyy')}</div>

The first if expression is (this is what highlights yellow anything older than 5 days, using the 864000000000 ticks divided by 5 :

if(and(less(item()?['DueDate'], utcnow()), greaterOrEquals(div(sub(ticks(utcnow()), ticks(item()?['DueDate'])), 864000000000), 5)), 'yellow', 'white')

The if expression for color is (using FireBrick instead of red for 508 compliance when it is highlighted in yellow it yields a warning):

if(less(item()?['DueDate'], utcnow()), 'FireBrick', 'black')

The convertFromUtc expression (unchanged) is:

convertFromUtc(item()?['DueDate'],'Eastern Standard Time', 'h:mm tt dddd MMMM d, yyyy')

That will yield this:

Was this reply helpful? Yes No