JavaScript – Color fills in forms at runtime

Color fills in forms at runtime

Picking up from yesterday, let’s take a look at the following code, which shows how to

change the Fill Color of all of a PDF form’s fields at runtime. In this case, we’re going to

change the fill color to 50 percent gray.

var rgb = new Array('RGB',.5,.5,.5);
for(var i = 0; i < this.numFields; i++) {
's = this.getNthFieldName(i);
f = this.getField(s);
f.fillColor = rgb;}

We start by creating a new Array object and attaching it to a variable named rgb.

The three 0.5 values mean we are creating an RGB color that is 50 percent gray. If we had

used values of 1.0,0.0,0.0, we could have set up pure red; 0,1,0 would be pure green, etc.

We’re dealing with RGB color space.

The for loop lets us iterate over all fields in the document. The current document

object (in PDF JavaScript) can simply be referred to as this. Since every form

document has fields, the numFields field of the doc object will contain the number of


Adobe’s doc object has a method called getNthFieldName that lets us index into the

document’s list of fields and get the name of a given field (as a string). We give this

name, whatever it is, to a local variable, s. That variable, in turn, is passed to

the doc’s getField method in the next statement. The line beginning with f =

is extremely important, because it is a commonly encountered idiom in PDF JS programming.

You have to retrieve the Field Object before you can work with it. You do that with

this.getField(name) where name is a string containing the name of the field in


Finally, once you have the Field Object for a given field in the form, you can set any of

its attributes to any values you want. In this case, we want to set the fillColor to

a new color. We have custom-made a color (Array) object which is set to 50 percent gray. We

set fillColor to this new color, then cycle through the loop to the next field.

If any of this sounds foreign, go over it again until it starts to become clear. If it

doesn’t become clearer, get one of the books mentioned yesterday and spend some time with

it, then reread the foregoing code walkthru. And above all, experiment. Cut and paste this

code into a form of your own. Try changing it. Execute it and see what happens.

TIP: You can do a lot of experimenting very quickly if you use Sciptalyzer, our PDF

JavaScript tool (see link on our home page). This tool will execute code in real time and

show you the results, without your having to dummy up a practice form, click through all the

field tabs, edit your code, close windows, execute the form, reopen it, edit the fields,

troubleshoot, etc. etc. With Scriptalyzer, you can edit, execute, and troubleshoot all in

one form view.

Changing Text Color

We can easily modify this example to change the text color of all fields. The code this

time is:

var rgb = new Array('RGB',.5,.5,.5);
for(var i = 0; i < this.numFields; i++) {
s = this.getNthFieldName(i);
f = this.getField(s);
f.textColor = rgb;}

You have to look closely to see the difference. The last line sets textColor to

rgb. This makes the field’s text have a different color. The next time the form is

refreshed, the new color will take effect.

The AForm.js file in the Acrobat suite contains a number of predefined convenience

colors, such as, that you can use in your code without having to create an

Array object. But as you can see, creating a custom color with an Array is not at all hard,

and it gives you much more control over color choices than the handful of predefined colors

in Aform.js. Always feel free to hand-make your own colors. Don’t let yourself be

constrained by the predefined colors.

But, you may be wondering, what use could one possibly have for changing text

color (besides making things colorful for the sake of being colorful)? Consider this:

What if you were to create two static text fields (read-only), one on top of the other,

overlapping. One might contain a block of text that’s appropriate under one set of

conditions, while the other might contain text that’s appropriate under a different set of

conditions (depending, say, on the value of some distant field). At runtime, you can decide

which block of text is appropriate, and give it a color of black. At the same time,

you hide the other block by changing the text color to white. (Better yet, you hide

the not-needed text by setting textColor to fillColor.) When the user enters

the appropriate response in that distant field, you can swap colors on the two blocks of

text and make the user see a new block that pertains to what he’s doing. (In other words,

you can implement context-sensitive help.)

So we see that there ARE indeed some very good uses for runtime text-color changes, that

have nothing to do with cosmetic appeal.

The atribute list

Bear in mind that there are 28 different attributes associated with each Field, 22 of

which you can change programmatically. For example, there are attributes called:








a bunch more (see AcroJS.pdf in the Acrobat docs).

That’s enough for now. Next time we’ll

take a look at how to pop a dialog in response to a user action, from JavaScript.

You May Also Like

About the Author: Kas Thomas

Leave a Reply