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

WebViewer(...)
.then(instance => {
  const { annotationManager, Annotations, documentViewer } = instance.Core;

  documentViewer.addEventListener('annotationsLoaded', () => {
    const widgets = annotationManager.getAnnotationsList().filter(annotation => annotation instanceof Annotations.WidgetAnnotation);
    if (!widgets.length) {
      return;
    }

    const widget = widgets[0];
    widget.setWidth(50);
    widget.setHeight(50);
    widget.setX(10);
    widget.setY(10);
  });
});

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.

WebViewer(...)
.then(instance => {
  const { annotationManager, Annotations } = instance.Core;
  const { WidgetFlags } = Annotations;

  annotationManager.addEventListener('annotationChanged', (annotations, action, { imported }) => {
    if (imported) {
      return;
    }

    annotations.forEach(function(annot) {
      if (action === 'add' && annot instanceof Annotations.WidgetAnnotation) {
        annot.fieldFlags.set(WidgetFlags.REQUIRED, true);
      }
    });
  });
});

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.

WebViewer(...)
.then(instance => {
  const { documentViewer, annotationManager, Annotations } = instance.Core;
  const { WidgetFlags } = Annotations;

  documentViewer.addEventListener('annotationsLoaded', () => {
    const fieldManager = annotationManager.getFieldManager();
    const field = fieldManager.getField(''); // Add the field name here.
    if (field) {
      field.widgets.map(annot => {
        annot.fieldFlags.set(WidgetFlags.READ_ONLY, true);
      });
    }
  });
});

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.

WebViewer(...)
.then(instance => {
  const { documentViewer, annotationManager } = instance.Core;

  // After the annotations are loaded, print out all field name and values.
  documentViewer.addEventListener('annotationsLoaded', () => {
    const fieldManager = annotationManager.getFieldManager();
    fieldManager.forEachField(printFieldNameAndValue);
  });
});

function printFieldNameAndValue(field) {
  const { name, value } = field;
  console.log(`Name: ${name}, Value: ${value}`);

  // Recursively iterate through any child fields.
  field.children.forEach(printFieldNameAndValue);
}