Changing the background colors of fields, fillable areas, and subforms

This example demonstrates how to change the background color of subforms, fields, and fillable areas on a form in response to form filler interaction at run time.

In this example, clicking a button changes the background color of an associated object.

View full size graphic

Note: To manipulate the background color of objects at run time, you must save your form as an Acrobat Dynamic XML Form file.

To see this scripting example and others, visit the Developer Center .

Scripting the subform and text field background colors

You set the subform and the text field background colors by using the fillColor method. For example, the following line is the script for the subform:

Subform1.fillColor = "17,136,255";

The following lines make up the script for the background color of the text fields:

    Subform1.Name.fillColor = "102,179,255"; 
    Subform1.Address.fillColor = "102,179,255"; 
    Subform1.City.fillColor = "102,179,255"; 
    Subform1.State.fillColor = "102,179,255"; 
    Subform1.ZipCode.fillColor = "102,179,255"; 
    Subform1.Country.fillColor = "102,179,255";

Scripting the fillable area background color

When setting the background color or the fillable area for each text field, your scripts must access properties that require a reference syntax expression that includes the number sign (#). Because JavaScript does not interpret the number sign (#) properly in reference syntax expressions, the script uses the resolveNode method to resolve the expression.

    xfa.resolveNode("Subform1.Name.ui.#textEdit.border.fill.color").value = "153,204,255"; 
    xfa.resolveNode("Subform1.Address.ui.#textEdit.border.fill.color").value = "153,204,255"; 
    xfa.resolveNode("Subform1.City.ui.#textEdit.border.fill.color").value = "153,204,255"; 
    xfa.resolveNode("Subform1.State.ui.#textEdit.border.fill.color").value = "153,204,255"; 
    xfa.resolveNode("Subform1.ZipCode.ui.#textEdit.border.fill.color").value = "153,204,255"; 
    xfa.resolveNode("Subform1.Country.ui.#textEdit.border.fill.color").value = "153,204,255";

Scripting the Clear All button

The script for the Clear All button uses the remerge method to remerge the form design and form data. In this case, the method effectively restores the fields, fillable areas, and subforms to their original state.

xfa.form.remerge();