How to change the field background color and text depending on condition

[Henry.Ong]

Good day!

I have a computed field in fillable PDF (Total_Percentage is the field name).

I waht the background color of the field and text to change depending on the following conditins:

If Total_Percentage is < 100, I want the background to be yellow and text to be black

If Total_Percentage is = 100, I want the background to be green and text to be white

If Total_Percentage is > 100, I want the background to be red and text to be white.

I search in YouTube for solution and saw one but cannot make it work.

Thank you!

[ls_rbls]

You can use a custom calculation script in the Total_Percentage field:

var f = event.target;

// If Total_Percentage is < 100, I want the background to be yellow and text to be black

if (f.value <= 99) {
f.fillColor = color.yellow;
f.textColor = color.black;
} else {

// If Total_Percentage is = 100, I want the background to be green and text to be white
if (f.value === 100) {
f.fillColor = color.green;
f.textColor = color.white;
} else {

// If Total_Percentage is > 100, I want the background to be red and text to be white.

if (f.value >= 101) {
f.fillColor = color.red;
f.textColor = color.white;
}
}
}

[Nesa Nurani]

Just to add up, if you have field formated as percentage change numbers in code:

99 to 0.99

100 to 1

101 to 1.01

[Henry.Ong]

Thanks for replying.

I tried the solution you have provided.

First, I could not add the script in "Custom calculation script" because I am using "Value is the +sum of the following fields| to compute for the Total_Percentage.

I tested putting the script in "Run custom validation script" under the Validate tab.and these are the result.

I don't know if this is the result of putting the script you have provided in "Run custom validation script"

Also Nasa commented on the format I used to defined the percentage. I defined the percentage fields as numeric (whole number) without decimal places.

[Nesa Nurani · Accepted solution]

Try this code  as validation script:

if(event.value <= 99){
event.target.fillColor = color.yellow;
event.target.textColor = color.black;}
else if (event.value == 100){
event.target.fillColor = color.green;
event.target.textColor = color.white;}
else if(event.value >= 101){
event.target.fillColor = color.red;
event.target.textColor = color.white;}

[Henry.Ong]

Hi Nesa,

The solution you have provided works. Thank a lot.