Change Fill Color Based On Value

[Former Community Member]

I have found several good examples on how to modify the color of a field based on a value but am not having luck implementing.  My form is an evaluation with 3 sections of test scores, the total of all 3 could have a max value of 100.  Sections 1 & 2 are auto calculated, and section 3 is a value the user will input based on their review of all comments, scores, etc.  The final score has a rating, Outstanding 90-100, Satisfactory 70 - 89, and Unsatisfactory <=70.   Right now I'm not so much concerned about the color numbers, but I'm not able to get the colors to change at all.  Because this field is calculated based on sections 1-3, I put the code on its change event.  Once the user enters the final manual score in section 3, the value automatically changes.  I've also tried the exit event of the section 3 manual score, and obviously do not have either the code or where to place it right.  Below is the code I'm using, and would appreciate any help.  If I can learn how to do the 90-100, hopefully I can apply same method, different color to 70-89 and under 70.  What am I doing wrong?  Thank you.

[Kevin_Cavallo]

You're on the right track, but the javascript syntax is a little off.  Here's how it should look:

if ( this.rawValue <= 100 &&this.rawValue >= 90 )

     {

    this.fillColor = "102,179,255";

     }

You need parenthesis around the entire "if" statement, and a semicolon at the end of the fillcolor statement.

Also, you might want to put the code in the "exit" event rather than the "change" event.  With change, the event will fire every time a character is typed.  The exit event will fire when the user is done entering text and clicks off of the field.  This way, the code only evaluates the entered number when it is complete.

[Former Community Member]

Thank you.  I moved the code to the exit event of the field requiring manual input, and it's still not changing.  I was wondering if it was because the field I want to color-code doesn't calculate till the manual input field is exited, so I tried it again on the change event of the desired color-coded field, but still not working yet.  I don't know the colors yet and thought it might be that I'm choosing the wrong numbers, and found a good link and example here (http://www.acrobatusers.com/tutorials/using-colors-acrobat-javascript) to help me with the colors, and will get the numbers worked out for each condition, but for some reason I'm not getting any results yet on even the basic first step, thanks.

[Kevin_Cavallo]

It's a little hard to tell exactly what's happening without seeing your form. If you want manual input on one field to change the color of a second field after recalculation, the color change should probably go in the calculate event of the field you want to change, after the calculation is complete.

One thing to check is to make sure you're previewing your form as a dynamic form.  In the File menu, select Form Properties and on the Preview tab make sure the Preview Adobe Form As: selection is set to Dynamic XML Form.

[Former Community Member]

Thank you, I changed the preview to Dynamic XML, but it didn't help, unfortunately.  I found a helpful link here, http://forums.adobe.com/thread/475251, but I'm just not there yet.  When you say

Is that using JavaScript or FormCalc? Sorry for being so dumb about it, this is all very new to me.  The field is calculating ok, and it seems your idea of the calcuate event should work, but what would be the FormCalc syntax in that case?  I'm not having luck with it yet.  Thank you.

[Kevin_Cavallo · Accepted solution]

I have an example for you, but it looks like uploading has been disabled again.  Send me a direct email with your email address and I'll send you the document.

[Zjur]

More down the same road:

I have a very simple form witch calcuklets two fields like:  NumericField8*NumericField9=NumericField100

1. How is it possible to change the fill color in the result cell only (NumericField100) based on the input from NumericField8*NumericField9?

I would like the color to be green in the range 1-3, yellow 4-6 and red 7-9

Possible? (tea spoons please!)

2. Is it possible to limit the input value in NumericField8 and NumericField9 to a spesific numeric value ? Max input value = 5?

Thanks in advance

[s_pandi]

Try this java script for the third numeric field calculate event

var

num=Num1.rawValue*Num2.rawValue;

if

(num>=7)

{

this.fillColor

="255,0,0";

}

else

if(num<7 && num>=5)

{

this.fillColor

="0,0,255";

}

//check for zero value..initially numeric fir=eld will have the value zero and it will show color so to avoid add this line of cde

else

if (num==0)

{

this.fillColor

=null;

}

else

{

this.fillColor

="0,255,0";

}

this.rawValue

=num;

To set the maximum input value again you have to write a java script for the corresponding filed

[Former Community Member]

Thank you for the sample and help, it was extremely useful, I'm learning alot.  Am posting the final code for information, and very much appreciate the help.

form1.#subform[0].OverallSafetyPerformance::calculate - (FormCalc, client)

    var sum = CompliancePoints + TripleIIIPoints + ProgramImpPoints;
    if ( sum >= 90 and sum <= 100 ) then
        $.fillColor = "194, 255, 240"
    elseif (sum >= 70 and sum <= 89 ) then
        $.fillColor = "255,194,133"
    else
        $.fillColor = "255,0,0"
    endif
   
    sum

[Former Community Member]

Thank you very much, I will keep the null/zero checking on hand for another thing I'm working on, it will be very helpful.  In the case of this one calculated form field, the starting value will always have some value because one of the sections used for calculations starts with 30 points and points would only be deducted if any safety incident reports were issued, so the final score field starts at 30 but is constantly updated as the user inputs other sections.  It is all resolved now, I posted the final code with help from Kevin's sample provided (offline due to no attachments here), though I apologize I was unable to post the final solution till now due to browser issues.  Thank you!

[Former Community Member]

Please check the final solution I just posted here thanks to Kevin's help, it sounds like your situation is similar to mine.  The code was placed on the field containing the results, using FormCalc language.  I selected my colors using the RGB color picker located here: http://www.colorschemer.com/online.html, it helped quite a bit to figure out what the numbers were for the colors I wanted.

Regarding your question #2 about max value, I just did something like that for this form I'm working on, and someone may have a better solution, but my code for that is below.  Using JavaScript, I selected the validate option and entered the range I wanted to validate.  In my case, I only wanted them to enter between 2 and 5.  Hope this helps.

2 <= this.rawValue && this.rawValue <=5

[Zjur]

1. Work very well, thank you all

2. Works well, but is it possible to change the notification to the user if he/she enters a value out of the specified range? The one thats cones up now isn't wery useful.

[Former Community Member]

In the Object/Value properties, there is a Validation Pattern Message and Validation Script Message.  I am not sure the difference, hopefully someone can help, but I put my custom message on the Validation Script Message, and it seems to work.

[Jaison_Sunny]

Try this java script for the third numeric field calculate event

var

num=Num1.rawValue*Num2.rawValue;

(num>=7)

="255,0,0";

if(num<7 && num>=5)

="0,0,255";

if (num==0)

=null;

="0,255,0";

=num;

To set the maximum input value again you have to write a java script for the corresponding filed

}

this.rawValue

{

this.fillColor

else

}

{

this.fillColor

else

//check for zero value..initially numeric fir=eld will have the value zero and it will show color so to avoid add this line of cde

}

{

this.fillColor

else

}

{

this.fillColor

if