Field Background Color Fill
Did you know that you can quickly set the background fill color of a field via script using the
fillColor
property? This can be very handy if you want to highlight a field for some reason. The property takes an RGB color value as a string: "255,0,0" would give a red fill.
What you may not realize is that fields actually have two areas: The "nominal extent" represents the entire field, including the caption, while the "content extent" represents only the data input portion of the field. There’s a difference between setting the fill color of one vs. the other.
The Nominal Extent Fill
When you set the fill color using the "fillColor" property, you’re setting the fill color of the nominal extent’s border property. It’s actually a shortcut:
TextField1.fillColor = "255,255,0"; // yellow
is equivalent to this:
TextField1.border.fill.color.value = "255,255,0";
Here’s a text field with no fill:
And here it is after setting its "fillColor" property to yellow:
(On a side note, you may notice that the field now has a border and you’re probably wondering where it came from. See this article for an explanation and what you need to do to get rid of it.)
The Content Extent Fill
So how do we set the fill color of the content extent without filling the entire field? The content extent’s fill color is specified within the field’s content extent (or "UI", in XFA terms) border and is accessed like this:
TextField1.ui.oneOfChild.border.fill.color.value = "0,200,0"; // green
(If you’re wondering what the "oneOfChild" property is, see this article.)
The result of the above line of script on the initial text field is as follows:
For example, you could use the content extent fill color as a way to communicate to someone that a field is disabled (by setting its content extent fill color to light gray (230,230,230)).
Finally, you can combine the two as follows (this being the combination of setting both the nominal and content extent fill colors):
Posted by Stefan Cameron on March 14th, 2008
Filed under Scripting,Tutorials