Skip to main content
Henry.Ong
Henry.Ong
Inspiring
November 18, 2020
Answered

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

  • November 18, 2020
  • 1 reply
  • 2266 views

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!

    This topic has been closed for replies.
    Correct answer Nesa Nurani

    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;}

    1 reply

    ls_rbls
    Community Expert
    ls_rblsCommunity Expert
    Community Expert
    November 18, 2020

    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;
}
}
}

     

    Henry.Ong
    Henry.OngAuthor
    Inspiring
    November 18, 2020

    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
    Community Expert
    Nesa NuraniCommunity ExpertCorrect answer
    Community Expert
    November 18, 2020

    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;}

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices