PDF In-Depth

JavaScript - Color fills in forms at runtime

June 01, 2001


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 fields.

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 question.

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 color.red, 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:







and 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.

PDF In-Depth Free Product Trials Ubiquitous PDF

Debenu Quick PDF Library

Get products to market faster with this amazing PDF developer SDK. Over 900 functions and an equally...

Download free demo

Five visions of a PDF Day

In the world of PDFs or as we like to say Planet (of) PDF, a year isn't a real PDF year without an intense few days of industry knowledge sharing.

May 15, 2018
Platinum Sponsor

Search Planet PDF
more searching options...
Planet PDF Newsletter
Most Popular Articles
Featured Product

Debenu PDF Aerialist

The ultimate plug-in for Adobe Acrobat. Advanced splitting, merging, stamping, bookmarking, and link control. Take Acrobat to the next level.


Adding a PDF Stamp Comment

OK, so you want to stamp your document. Maybe you need to give reviewers some advice about the document's status or sensitivity. This tip from author Ted Padova demonstrates how to add stamps with the Stamp Tool along with related comments.