Section:

Modifying PDF form fields in JavaScript

This guide will walk you through modifying widget dimensions and position, modifying field properties, and iterating over all fields in a PDF document.

Changing widget dimensions and position

Changing widget dimensions is the same process as changing any annotation dimensions. You can use the Annotation APIs to change the dimensions and position of a widget.

The sample code below code listens to the annotationsLoaded event and changes the first widget annotation size to be a square and places it in the top-left corner of the page.

1WebViewer(...)
2.then(instance => {
3  const { annotationManager, Annotations, documentViewer } = instance.Core;
4
5  documentViewer.addEventListener('annotationsLoaded', () => {
6    const widgets = annotationManager.getAnnotationsList().filter(annotation => annotation instanceof Annotations.WidgetAnnotation);
7    if (!widgets.length) {
8      return;
9    }
10
11    const widget = widgets[0];
12    widget.setWidth(50);
13    widget.setHeight(50);
14    widget.setX(10);
15    widget.setY(10);
16  });
17});

Related Links

Changing field properties

In WebViewer 11 you can modify the properties of a field by using the WidgetAnnotation.setFieldFlag API. The sample code below listens to the annotationChanged event and updates the required property for newly added fields to ‘true’. Imported fields are ignored.

1WebViewer(...)
2.then(instance => {
3  const { annotationManager, Annotations } = instance.Core;
4  const { WidgetFlags } = Annotations;
5
6  annotationManager.addEventListener('annotationChanged', (annotations, action, { imported }) => {
7    if (imported) {
8      return;
9    }
10
11    annotations.forEach(function(annot) {
12      if (action === 'add' && annot instanceof Annotations.WidgetAnnotation) {
13        annot.fieldFlags.set(WidgetFlags.REQUIRED, true);
14      }
15    });
16  });
17});

Related Links

Accessing fields by name

You can access any field by its name with the FieldManager.getField API. The sample code below fetches a field with the name fieldName and sets all associated widgets to read-only.

1WebViewer(...)
2.then(instance => {
3  const { documentViewer, annotationManager, Annotations } = instance.Core;
4  const { WidgetFlags } = Annotations;
5
6  documentViewer.addEventListener('annotationsLoaded', () => {
7    const fieldManager = annotationManager.getFieldManager();
8    const field = fieldManager.getField(''); // Add the field name here.
9    if (field) {
10      field.widgets.map(annot => {
11        annot.fieldFlags.set(WidgetFlags.READ_ONLY, true);
12      });
13    }
14  });
15});

Related Links

Iterate over all fields

Starting in WebViewer 11, you can iterate over all fields using the getFields API from FieldManager. The sample code below iterates through all form fields and prints out their name and values.

Note that you'll need to wait for the annotationsLoadedPromise to resolve to ensure that the fields are accessible in the FieldManager.

1WebViewer(...)
2.then(instance => {
3  const { documentViewer, annotationManager } = instance.Core;
4
5  // After the annotations are loaded, print out all field name and values.
6  documentViewer.addEventListener('annotationsLoaded', () => {
7    const fieldManager = annotationManager.getFieldManager();
8    fieldManager.forEachField(printFieldNameAndValue);
9  });
10});
11
12function printFieldNameAndValue(field) {
13  const { name, value } = field;
14  console.log(`Name: ${name}, Value: ${value}`);
15
16  // Recursively iterate through any child fields.
17  field.children.forEach(printFieldNameAndValue);
18}

Related Links

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales