Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Radio button selected Color!

Avatar

Level 2

The default color for a selected radio button is black. I want to change it to red or some other color?

How can i change it?


Is there any code snippet for XFA?

thanks

Faraz

1 Accepted Solution

Avatar

Correct answer by
Level 10

You have to edit the xml. Once you've got it made you can save it as a library object.

You need to add a <fill><color value/></fill> section inside the <font></font> tag. If there is nothing else there the font tag may just look like <font typeface="Myriad Pro"/> you'll need to split the "/" out into its own closing tag <font typeface="Myriad Pro"></font>:

<field name="BlueCheckmark" w="4.319mm" h="4.278mm">
    <ui>
       <checkButton size="4.2333mm" mark="check">
          <border hand="right" presence="hidden">
             <?templateDesigner StyleID apcb0?></border>
       </checkButton>
    </ui>
    <font size="0pt" typeface="Adobe Pi Std">
       <fill>
          <color value="0,0,255"/>
       </fill>
    </font>

    <para vAlign="middle"/>
    <value>
       <integer>0</integer>
    </value>
    <items>
       <integer>1</integer>
       <integer>0</integer>
       <integer>2</integer>
    </items>
</field>

View solution in original post

10 Replies

Avatar

Level 10

See that attached sample.

-Nith

Avatar

Level 2

Thanks for the help.

Still in the attached document the selected color is black. How can i change that color?

Avatar

Former Community Member

im curious how you did this, i don't see the code anywhere, is it in the settings?

Avatar

Correct answer by
Level 10

You have to edit the xml. Once you've got it made you can save it as a library object.

You need to add a <fill><color value/></fill> section inside the <font></font> tag. If there is nothing else there the font tag may just look like <font typeface="Myriad Pro"/> you'll need to split the "/" out into its own closing tag <font typeface="Myriad Pro"></font>:

<field name="BlueCheckmark" w="4.319mm" h="4.278mm">
    <ui>
       <checkButton size="4.2333mm" mark="check">
          <border hand="right" presence="hidden">
             <?templateDesigner StyleID apcb0?></border>
       </checkButton>
    </ui>
    <font size="0pt" typeface="Adobe Pi Std">
       <fill>
          <color value="0,0,255"/>
       </fill>
    </font>

    <para vAlign="middle"/>
    <value>
       <integer>0</integer>
    </value>
    <items>
       <integer>1</integer>
       <integer>0</integer>
       <integer>2</integer>
    </items>
</field>

Avatar

Level 2

To "Jono Moore"

Yes thats exactly what i was looking for. I want to learn this xml of adobe forms. How and from where i can learn this? Any book/document?

thanks

Faraz

Avatar

Level 10

There's lots of info available here: http://www.adobe.com/devnet/livecycle/designing_forms.html

I don't think you generally want to do much editing in the XML source, better to use the tools in LiveCycle.

Avatar

Level 2

Editing the XML worked great for me too.  It was the only way I was able to change the colour of the actual 'filled in button' part of the radio button.  Thanks so much for this!

Avatar

Level 5

Great stuff, I had no idea this could be done.  I have one question:  I have three radio buttons where "High" turns red when selected, "Medium" turns yellow, and "Low" turns green.  In the screenshot below you can see there's a white box around each radio button that stays white.  I don't mind if the the radio button itself is white/black, but I would like to have square area around each button to match the color of the entire button label.  Can this be done via XML like the examples above?  Thanks for any help.

Hi-Med-Low.jpg

Medium.jpg

The buttons are scripted like this:


// High button


if (this.rawValue == "1")


  {


  this.fillColor = "204,0,0"; //red fill


  this.caption.font.fill.color.value = "255,255,255"; //white font


  Medium.fillColor = "255,255,255"; // Medium button white fill


  Low.fillColor = "255,255,255"; // Low button white fill


  Low.border.edge.color.value = "255,255,255"; // Low button white border (removes black border)


  Low.caption.font.fill.color.value = "0,0,0"; // Low button black font


  }



// Medium button


if (this.rawValue == "2")


  {


  this.fillColor = "240,240,0"; // yellow fill


  High.fillColor = "255,255,255"; // High button white fill


  High.caption.font.fill.color.value = "0,0,0"; // High button black font


  Low.caption.font.fill.color.value = "0,0,0"; // Low button black font


  Low.fillColor = "255,255,255"; // Low button whilte fill


  Low.border.edge.color.value = "255,255,255"; // white border (removes black border)


  }



// Low button


if (this.rawValue == "3")


  {


  this.fillColor = "0,160,0"; // green fill


  this.caption.font.fill.color.value = "255,255,255"; // white font


  High.fillColor = "255,255,255"; // High button white fill


  High.caption.font.fill.color.value = "0,0,0"; // High button black font


  Medium.fillColor = "255,255,255"; // Medium button white fill


  Medium.caption.font.fill.color.value = "0,0,0"; // Medium button black font


  }


Avatar

Level 5

Never mind -- I discovered that the white box frame disappears as soon as focus is moved to another object on the page.  So just the inside of the button stays white (with the black center).