Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
SOLVED

Changing background fill color based on Radio Button selections

Avatar

Level 2

Hi,

I'm very new to scripting in LC, so I've hit a wall on my latest form.I'm trying to build a form with a "leikert-like" scale, however one of the stipulations (from my boss) was the background of the Radio Buttons are to fill based on which button is selected.

For example, Question 1 has 4 Radio Buttons to choose from: Poor, Fair, Good, Great. If the person completing the form selects poor, I would like the poor background color to be filled. If someone selects fair, I would like that background color to be filled, as well as the background of poor. Selecting Good would fill the colors of good, fair, and poor; and selecting Great would fill the colors of all four.

Anyone have any ideas of how/if this can be done? In my initial tests, I've gotten the button itself to change colors, but not the background fill (which can be changed manually on the Border palette).

Any insight would be much appreciated. Thanks!

Aaron

1 Accepted Solution

Avatar

Correct answer by
Level 8

Here is the code you can use in the change event of the ExclusionGroup object (titled RadioButtonList by default). It's the parent object of each individual radio button.

for (var i=0;i<this.resolveNode("#field").classAll.length;i++){

if (i<this.rawValue)

  this.resolveNode("#field["+i+"]").border.fill.presence="visible";

else

  this.resolveNode("#field["+i+"]").border.fill.presence="hidden";

}

This also assumes that the value for each radio button is numbered sequentially from 1 through however many radio buttons you have.

Now here's the thing. I'm assuming each radio button has a different colour. You could code for the colours yourself in JavaScript, but I manually picked the colours through Designers UI. Once all the radio buttons colours were set, select a radio button and go View>XML Source. Where you see the element <fill>, add the attribute presence="hidden". Do that for each radio button. Here's what I mean:

                  </caption>

                  <border>

                     <edge presence="hidden"/>

                     <fill presence="hidden"> <!--add presence="hidden" to look like this-->

                        <color value="255,0,0"/>

                     </fill>

                  </border>

                  <items>

Kyle

View solution in original post

8 Replies

Avatar

Correct answer by
Level 8

Here is the code you can use in the change event of the ExclusionGroup object (titled RadioButtonList by default). It's the parent object of each individual radio button.

for (var i=0;i<this.resolveNode("#field").classAll.length;i++){

if (i<this.rawValue)

  this.resolveNode("#field["+i+"]").border.fill.presence="visible";

else

  this.resolveNode("#field["+i+"]").border.fill.presence="hidden";

}

This also assumes that the value for each radio button is numbered sequentially from 1 through however many radio buttons you have.

Now here's the thing. I'm assuming each radio button has a different colour. You could code for the colours yourself in JavaScript, but I manually picked the colours through Designers UI. Once all the radio buttons colours were set, select a radio button and go View>XML Source. Where you see the element <fill>, add the attribute presence="hidden". Do that for each radio button. Here's what I mean:

                  </caption>

                  <border>

                     <edge presence="hidden"/>

                     <fill presence="hidden"> <!--add presence="hidden" to look like this-->

                        <color value="255,0,0"/>

                     </fill>

                  </border>

                  <items>

Kyle

Avatar

Level 2

Thanks. I was able to change the XML, but am having problems with the script. As I said above, I'm new to this, so excuse me for the dumb questions...

The text above highlighted in Red...am I supposed to change that text or should the script work as written above?

Avatar

Level 8

You should be able to just copy and paste the text as written.

Here's the sample I made:

http://www.fieldeffecttechnologies.com/AdobeForums/ColouredLikert.pdf

Kyle

Avatar

Level 2

This is awesome...Thanks! Didn't have the file saved as dynamic xml form so was having troubles there. Good to go now though, thanks again.

Avatar

Level 8

You're most welcome.

Don't forget to mark as answered.

Thanks.

Kyle

Avatar

Level 2

Hey Kyle,

I'm finally getting back into this...only two months later. I just realized something that will throw a wrench in the script you provided. My values of my sample radio buttons were ordered sequentially from 1, but my actual buttons are ordered as follows: 1.0, 1.5, 2.0, 2.5, 3.0, 3.25, 3.50, 3.75, 4.0.

How can your script be adapted to accomodate the change in radio button values?

Avatar

Level 8

Try this:

var bStop=false;

for (var i=0;i<this.resolveNode("#field").classAll.length;i++){

if (bStop)

  this.resolveNode("#field["+i+"]").border.fill.presence="hidden";

else

  this.resolveNode("#field["+i+"]").border.fill.presence="visible";

if (!this.resolveNode("#field["+i+"]").isNull)

  bStop = true;

}

Kyle

Avatar

Level 2

Worked like a charm. Thanks again for taking the time!