Filling PDF form fields

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

JavaScript (SDK v8.0+)

// config.js
const { documentViewer, annotationManager } = instance.Core;

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

DocumentViewer.getAnnotationsLoadedPromise DocumentViewer#documentLoaded AnnotationManager.getFieldManager FieldManager.getField FieldManager.setValue

JavaScript (SDK v6.0+)

// config.js
const { docViewer, annotManager } = instance;

docViewer.on('documentLoaded', () => {
  docViewer.getAnnotationsLoadedPromise().then(() => {
    const fieldManager = annotManager.getFieldManager();
    const field = fieldManager.getField(fieldId);
    field.setValue('new value');
  });
});

DocumentViewer.getAnnotationsLoadedPromise DocumentViewer#documentLoaded AnnotationManager.getFieldManager FieldManager.getField FieldManager.setValue

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.

JavaScript (SDK v8.0+)

// config.js
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');
    });
  });
});

DocumentViewer.getAnnotationsLoadedPromise DocumentViewer#documentLoaded AnnotationManager.getFieldManager FieldManager.getField FieldManager.setValue

JavaScript (SDK v6.0+)

// config.js
const { docViewer, annotManager } = instance;

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

DocumentViewer.getAnnotationsLoadedPromise DocumentViewer#documentLoaded AnnotationManager.getFieldManager FieldManager.getField FieldManager.setValue

Listening for field changes

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

JavaScript (SDK v8.0+)

// config.js
const { annotationManager } = instance.Core;

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

AnnotationManager#fieldChanged

JavaScript (SDK v6.0+)

// config.js
const { annotManager } = instance;

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

AnnotationManager#fieldChanged