Setting Fill Color on a drop-down after selecting choice

[Former Community Member]

I'm just starting to use Designer & scripting in general.  I've a question on setting the background (fill) colours in a dropdown box.  Can you set the background color of the box based on the selected text?

For example, the dropdown contains the choices "Yes", "In Process", and "No".  If the user selects "Yes", change the background color of the dropdown box to 'green'.  If they select "In Process"; orange.  And if it's "No"; red.

I can't seem to figure out the right scripting to change & hold the colour of the box after they make their selection and move on to the next field.  If this can be done, a copy of the script would be greatly appreciated.

Thanks!

[Niall_O_Donovan]

Hi,

Yes, you can change the colour of the dropdown lists depending on user inputs.

Using the following Javascript in the validate event of the dropdown:

var

fld;

fld

= xfa.resolveNode("form1.p1.dropDown1.ui.#choiceList.border.fill.color"); //Input the full reference for your drop down

if

(this.rawValue == "Yes")

{

     fld.value

= "225,255,225";

}

if (this.rawValue == "No")

{

     fld.value

= "255,225,225";

}

It is important that you set the background fill of the dropdown to white initially, so that it has a solid colour to change to green/red.

The adobe reference documents give other user interface references like:

.ui.#choiceList for dropdowns;

.ui.#dateTimeEdit for date fields;

.ui#checkButton for checkboxes;
.ui#textEdit for text fields;
.ui.#numericEdit for numeric fields

Good luck,

Niall

Message was edited by: Niall O'Donovan: I don't know what I am doing wrong, but the script is ending up spread down the page, so I have uploaded an image of a similar script.

[Former Community Member]

The script above seems to be working except for an odd error I'm getting.

Here's the script I have...

form1.#subform[0].#field[7]::validate - (JavaScript, client)

var fld;

fld = xfa.resolveNode("form1.#subform[0].#field[7].ui.#choiceList.border.fill.color");    //Input the full reference for your drop down

if (this.rawValue == "Yes") {
     fld.value = "0,102,0";                     //Sets Fill Colour to Green
}
if (this.rawValue == "Not Started") {
     fld.value = "255,0,0";                     //Sets Fill Colour to Red
}

The "Not Started" option works fine...no errors

If "Yes" is selected, I get a "validate failed" pop-up box.  Click 'OK' on the pop-up and it goes away & drop-down turns to Green.

I've checked the drop-down options & verified the "Yes" is "Yes" and does not contain any spaces or other characters.

Oh, I'm using Designer ES v8.2.1

Thank you!

[Niall_O_Donovan]

Hi,

I am not able to check it out now, but a couple of points:

1 you are using two if statements, so the "Not started" passes the final validation test; therefore no validation error. On the other hand the "Yes" passes the first if, but not the second; so while it will turn the field green, it IS failing the validation and therefore throws up the error. You can check this out by temporially swapping the "Not started" and "Yes", the validation error will start coming up for the "Not started" instead.

2 you will see that I was using an if/else statement, so both cases were valid; therefore no error. Now this suited my purpose, I wanted the field to be light red, unless a set criteria was met which turned the field light green.

3 the validation event works OK for if/else script. If you have more complicated nested if staetements you might still get the validation event to work, but it may take more effort. One solution we sometimes use is to insert a text or numeric field and set it's presence to invisible or hidden. Call it something like checkStatus. Then move the validation out of the field altogether and put it in the calculation event of checkStatus, remember to change this.rawValue to field.rawValue. There will not be a validation error and the invisible checkStatus is always checking the value of field and changing its apearance accordingly.

Hope that helps,

Niall

Please contact me if you have any queries in relation to the above.

Regards,

Niall O'Donovan

Assure Health & Safety Consultants

086 2671985

[Former Community Member]

Niall,

In the "OK, that was just plain wierd" category; it appears the colour was the problem.

In testing the script, I tried changing things around and selecting different options. I found that using any colour set starting with 0 (zero) Red caused the error.  So, my selection of "green" (0,102,0) brought up the error.  If I changed the color code to (1,102,0); no error.  I tried different colour sets and the error followed the zero-red value.

So, the script information you provided works and helped me a lot -- Thank You!!    We'll toss the colour qwirk to Adobe as a possible bug (I really don't have the time now to do more testing to confirm).

[Niall_O_Donovan]

Well I would not have guessed it was the RGB!! I'll be honest, to me validation is a balck art that I have not fully got to grips with yet.

The main thing is that it works for you!!!

N.