Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Calculated text field background color

Avatar

Former Community Member

Hello,

I have a text field that is calculated with a formula that shows either "GREEN" "RED" or "YELLOW".  I would like the field to automatically color itself based on said calculation.

I tried entering the following formula in the exit* Event (JavaScript) but because the user is not actually typing into the field it will not work and the field remains white:

var vName = this.somExpression;

var fieldObj = xfa.resolveNode(vName + ".ui.#textEdit.border.fill.color");

if (this.rawValue == "GREEN") {

     fieldObj.value = "0,255,0";

}

else if (this.rawValue == "RED") {

     fieldObj.value = "255,0,0";

}

else if (this.rawValue == "YELLOW") {

     fieldObj.value = "255,255,0";

}

else {

     fieldObj.value = "255,255,255";

}

Any help is greatly appreciated!

~ Lisa

1 Accepted Solution

Avatar

Correct answer by
Level 10

Lisa,

     The code is supposed to be placed in the calculate event and not on the Exit event. Since this field is readonly the user will never enter anything in the field so Exit event does not make sense.

     Below is the refined version of the calculate event code..

     Change the scripting language to Java Script and paste the below code in Calculate event of the OverAll field (RedYellowGreen1).

var Score = TotalScore.rawValue;
var strColor = "";

if(Score == 0 || Score== 1 || Score==2) 
  strColor ="GREEN";
if(Score == 3||Score== 4||Score==5 || Score == 6||Score== 7||Score==8||Score== 9||Score==10 || Score == 11||Score== 12||Score==13)
  strColor ="YELLOW";
if(Score>=14)
  strColor ="RED";

switch (strColor){
case "GREEN":
     this.border.fill.color.value = "0,255,0";
     break;
case "RED":
     this.border.fill.color.value = "255,0,0";
     break;
case "YELLOW":
     this.border.fill.color.value = "255,255,0";
     break;
}

this.rawValue = strColor;

Thanks

Srini

View solution in original post

6 Replies

Avatar

Level 10

Change the 2nd line of code to below..

     var fieldObj = xfa.resolveNode(vName + ".border.fill.color");

Thanks

Srini

Avatar

Former Community Member

Srini,

I entered what you sent in the 2nd line of code but it didn't work on the exit* Event.  I tried it on initialize* and the field is colored green but the color doesn't change when the field text changes to either red or yellow. 

I also tried it on change* by itself and then on change* and initialize* but that didn't work either.

What am I missing?

Thanks,

~ Lisa

Avatar

Level 10

I am able to see the changes with that code in the exit event..

Initialize and Change events are not the correct events to place this code.

Initialize event will fire only once when you are opening the form.

Change event will fire for every character you type into the Text field.

May be if you can send the form to LiveCycle9@gmail.com I can have a look at it.

Thanks

Srini

Avatar

Former Community Member

You are correct about it having to be in the exit event (I've been working on it since replying earlier).  The only catch is the user has to click into the field in question and then click out. I was hoping to avoid this "extra" instruction to the user.

I will send you the form.

Thanks so much,

Lisa

Avatar

Correct answer by
Level 10

Lisa,

     The code is supposed to be placed in the calculate event and not on the Exit event. Since this field is readonly the user will never enter anything in the field so Exit event does not make sense.

     Below is the refined version of the calculate event code..

     Change the scripting language to Java Script and paste the below code in Calculate event of the OverAll field (RedYellowGreen1).

var Score = TotalScore.rawValue;
var strColor = "";

if(Score == 0 || Score== 1 || Score==2) 
  strColor ="GREEN";
if(Score == 3||Score== 4||Score==5 || Score == 6||Score== 7||Score==8||Score== 9||Score==10 || Score == 11||Score== 12||Score==13)
  strColor ="YELLOW";
if(Score>=14)
  strColor ="RED";

switch (strColor){
case "GREEN":
     this.border.fill.color.value = "0,255,0";
     break;
case "RED":
     this.border.fill.color.value = "255,0,0";
     break;
case "YELLOW":
     this.border.fill.color.value = "255,255,0";
     break;
}

this.rawValue = strColor;

Thanks

Srini

Avatar

Former Community Member

Srini,

Yes, that worked!  I knew the code needed to be in the calculate event but couldn't figure out how to do it since the code that was already in calculate (that figured out the score) was FormCalc and the color code was JavaScript.

Thanks alot!

Lisa