Create new PDF form fields using JavaScript
Form fields, also known as AcroForms, are a collection of fields such as text boxes, checkboxes, radio buttons, drop-down lists, push buttons, and more that will gather information interactively from the user.
Widget Annotation
One of the most important ideas to understand is the appearance (how it is displayed) of a form field is independent of the field itself and exists as a widget annotation. In fact, there can be multiple widget annotations for a single field. This gives the freedom to present a field appearance over multiple pages or even multiple times on the same page of a document.
Annotations and fields should be added to the document only after the document has finished loading. This can be done by listening for the DocumentViewer.documentLoaded event:
WebViewer(...)
.then(instance => {
const { documentViewer } = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
// create field and widget annotations here
});
});WebViewer(...)
.then(instance => {
const { docViewer, annotManager, Annotations } = instance;
docViewer.on('documentLoaded', () => {
// create field and widget annotations here
});
});Types of Fields to Add
Create Text Fields
Text fields and widget annotations can be added programmatically. There are several properties and widget flags as highlighted below:
Text widget flags
READ_ONLY
The field value cannot be changed.
No
REQUIRED
The field must have a value when exported.
No
MULTILINE
The field may contain multiple lines of text.
Yes
COMB
The field shall be automatically divided into as many equally spaced positions as the value of the max length.
Yes
DO_NOT_SCROLL
The field shall not scroll (horizontally for single-line fields, vertically for multiple-line fields) to accommodate more text than fits within its annotation rectangle.
Yes
DO_NOT_SPELL_CHECK
The field text shall not be spell-checked.
Yes
Text widget sample code
WebViewer(...)
.then(instance => {
const { annotationManager, Annotations, documentViewer } = instance.Core;
const { WidgetFlags } = Annotations;
documentViewer.addEventListener('documentLoaded', () => {
// Sets flags for the text widget.
const flags = new WidgetFlags();
flags.set(WidgetFlags.REQUIRED, true);
flags.set(WidgetFlags.MULTILINE, true);
// Creates a text form field.
const field = new Annotations.Forms.Field('TextFormField 1', {
type: 'Tx',
defaultValue: 'Default Value',
flags,
});
// Creates a text widget annotation.
const widgetAnnot = new Annotations.TextWidgetAnnotation(field);
widgetAnnot.PageNumber = 1;
widgetAnnot.X = 100;
widgetAnnot.Y = 100;
widgetAnnot.Width = 200;
widgetAnnot.Height = 50;
// Add form field to field manager and widget annotation to annotation manager.
annotationManager.getFieldManager().addField(field);
annotationManager.addAnnotation(widgetAnnot);
annotationManager.drawAnnotationsFromList([widgetAnnot]);
});
});Create Signature Fields
Signature fields and widget annotations can be added programmatically. There are several properties and widget flags as highlighted below:
Signature widget flags
READ_ONLY
The field value cannot be changed.
No
REQUIRED
The field must have a value when exported.
No
Signature sample code
Creating a signature widget to accept initials
Starting in WebViewer 8.9, you can create a Signature Widget that accepts initials. If a signature widget is flagged as requiresInitials, it will apply the initials created by the user in the signature modal. This optional parameter can be passed when instantiating a Signature Widget. Please note that the initials feature must be enabled in order for this to be displayed in the viewer. For a sample on how to do this refer to this guide.
Create Checkbox Fields
Checkbox fields and widget annotations can be added programmatically. There are several properties and widget flags as highlighted below:
Checkbox caption options
Check
''
Circle
l
Cross
8
Diamond
u
Square
n
Star
H
Checkbox widget flags
READ_ONLY
The field value cannot be changed.
No
REQUIRED
The field must have a value when exported.
No
Checkbox sample code
Create Combobox Fields
Combobox (choice) fields and widget annotations can be added programmatically. There are several properties and widget flags as highlighted below:
Combobox widget flags
READ_ONLY
The field value cannot be changed.
No
REQUIRED
The field must have a value when exported.
No
COMBO
The field is a combobox. Must be true.
No
MULTI_SELECT
The field can have multiple selected values.
No
EDIT
If true, the combobox will include an editable text box with a dropdown.
Yes
Combobox sample code
Create Listbox Fields
Listbox fields and widget annotations can be added programmatically. There are several properties and widget flags as highlighted below:
Listbox widget flags
READ_ONLY
The field value cannot be changed.
No
REQUIRED
The field must have a value when exported.
No
COMBO
The field is a listbox. Must be false.
No
MULTI_SELECT
The field can have multiple selected values.
No
Listbox sample code
Create Date Picker Fields
For form fields that expect a date to be input, WebViewer provides an interactive date picker widget to select a date from a calendar. Users can still type the date, but the date field can also be populated by using the calendar.
The calendar will automatically set the correct date format for the field so the user doesn't need to worry about entering the date in a specific format.
Date picker fields and widget annotations can be added programmatically. There are several properties and widget flags as highlighted below:
Date picker widget flags
READ_ONLY
The field value cannot be changed.
No
REQUIRED
The field must have a value when exported.
No
Date picker sample code
Filling date field programmatically
Just like other PDF form fields, the date field can also be filled programmatically using the fieldManager or using the Annotations.DatePickerWidgetAnnotation instance.
Here is an example of filling date field programmatically:
AnnotationManager.getFieldManager FieldManager.getField Annotations.WidgetFlags Annotations.DatePickerWidgetAnnotation.getDatePicker
Date picker internationalization
The default i18n configuration format looks like this:
You must provide 12 months and 7 weekdays (with abbreviations). Always specify weekdays in this order with Sunday first. You can change the firstDay option to reorder if necessary (0: Sunday, 1: Monday, etc). You can also set isRTL to true for languages that are read from right-to-left.
Last updated
Was this helpful?