13 Replies Latest reply on Apr 8, 2010 11:31 PM by Jaison.Sunny

    Change Fill Color Based On Value

    sparrowce Level 1

      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.

      form1.#subform[0].OverallSafetyPerformance::change - (JavaScript, client)

       

      if

       

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

      {

      this.fillColor

      = "102,179,255"'

      }

        • 1. Re: Change Fill Color Based On Value
          Kevin Cavallo Level 4

          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.

          1 person found this helpful
          • 2. Re: Change Fill Color Based On Value
            sparrowce Level 1

            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.

            if

             

             

            ( OverallSafetyPerformance.rawValue <= 100 && OverallSafetyPerformance.rawValue >= 90)

            {

            OverallSafetyPerformance.fillColor

             

            = "102,179,255";

            }

             

             

             

             

             

            • 3. Re: Change Fill Color Based On Value
              Kevin Cavallo Level 4

              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.

              1 person found this helpful
              • 4. Re: Change Fill Color Based On Value
                sparrowce Level 1

                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

                color change should probably go in the calculate event of the field you want to change, after the calculation is complete

                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.

                • 5. Re: Change Fill Color Based On Value
                  Kevin Cavallo Level 4

                  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.

                  • 6. Re: Change Fill Color Based On Value
                    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

                    • 7. Re: Change Fill Color Based On Value
                      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

                      • 8. Re: Change Fill Color Based On Value
                        sparrowce Level 1

                        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

                        • 9. Re: Change Fill Color Based On Value
                          sparrowce Level 1

                          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!

                          • 10. Re: Change Fill Color Based On Value
                            sparrowce Level 1

                            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

                            • 11. Re: Change Fill Color Based On Value
                              Zjur Level 1

                              1. Work very well, thank you all

                               

                               

                              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

                               

                               

                              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.

                              • 12. Re: Change Fill Color Based On Value
                                sparrowce Level 1

                                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.

                                • 13. Re: Change Fill Color Based On Value
                                  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