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.

JavaScript (SDK v11.0+)

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);
  });
});

Annotations WebViewerInstance DocumentViewer#annotationsLoaded

JavaScript (SDK v8.0+)

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);
  });
});

Annotations WebViewerInstance DocumentViewer#annotationsLoaded

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.

JavaScript (SDK v11.0+)

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

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

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

Annotations AnnotationManager#annotationChanged WidgetFlags WidgetAnnotation.setFieldFlag

JavaScript (SDK v8.0+)

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);
      }
    });
  });
});

Annotations AnnotationManager#annotationChanged

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.

JavaScript (SDK v11.0+)

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.setFieldFlag(WidgetFlags.READ_ONLY, true);
      });
    }
  });
});

DocumentViewer#annotationsLoaded AnnotationManager.getFieldManager FieldManager.getField Annotations.WidgetFlags WidgetAnnotation.setFieldFlag

JavaScript (SDK v8.0+)

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);
      });
    }
  });
});

DocumentViewer#annotationsLoaded AnnotationManager.getFieldManager FieldManager.getField Annotations.WidgetFlags WidgetAnnotation.setFieldFlag

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.

JavaScript (SDK v11.0+)

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();
    const fields = fieldManager.getFields();
    fields.forEach((field) => {
      const { name, value } = field;
      console.log(`Name: ${name}, Value: ${value}`);
    });
  });
});

DocumentViewer#annotationsLoaded AnnotationManager.getFieldManager FieldManager.forEachField

JavaScript (SDK v8.0+)

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);
}

DocumentViewer#annotationsLoaded AnnotationManager.getFieldManager FieldManager.forEachField