Some test text!

Loading...
Guides
Fill form fields

Filling PDF form fields

You can access and fill any form field by its field id:

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

  documentViewer.addEventListener('documentLoaded', () => {
    documentViewer.getAnnotationsLoadedPromise().then(() => {
      const fieldManager = annotationManager.getFieldManager();
      const field = fieldManager.getField(fieldId);
      field.setValue('new value');
    });
  });
});

Iterate over all fields

You can also iterate over all fields using the forEachField function of FieldManager.

Note that you'll need to wait for the annotationsLoadedPromise to resolve to ensure that the fields are accessible in the FieldManager.
WebViewer(...)
.then(instance => {
  const { documentViewer, annotationManager } = instance.Core;

  documentViewer.addEventListener('documentLoaded', () => {
    documentViewer.getAnnotationsLoadedPromise().then(() => {
      // iterate over fields
      const fieldManager = annotationManager.getFieldManager();
      fieldManager.forEachField(field => {
        console.log(field.getValue());
        field.setValue('new value');
      });
    });
  });
});

Listening for field changes

The fieldChanged event is fired any time the value of a form field changes.

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

  annotationManager.addEventListener('fieldChanged', (field, value) => {
    console.log(`Field changed: ${field.name}, ${value}`);
  });
});

Get the answers you need: Support

Upcoming Webinar: SDK Features Preview and Live Run-Through | July 14, 2022 at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use