Modifying PDF form fields

The following code sets all fields to readonly when the document is loaded. The annotationChanged event is triggered when the annotations are added to the document and checking the action and e.imported ensures that they changed because of an import into the document and not because of a user modification.

JavaScript (SDK v8.0+)

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

annotationManager.addEventListener('annotationChanged', (annotations, action, { imported }) => {
  // if the annotation change occurs because of an import then
  // these are fields from inside the document
  if (imported && action === 'add') {
    annotations.forEach(function(annot) {
      if (annot instanceof Annotations.WidgetAnnotation) {
        annot.fieldFlags.set('ReadOnly', true);
      }
    });
  }
});

WebViewerInstance Core AnnotationManager#annotationChanged Annotations

JavaScript (SDK v6.0+)

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

annotManager.on('annotationChanged', (annotations, action, { imported }) => {
  // if the annotation change occurs because of an import then
  // these are fields from inside the document
  if (imported && action === 'add') {
    annotations.forEach(function(annot) {
      if (annot instanceof Annotations.WidgetAnnotation) {
        annot.fieldFlags.set('ReadOnly', true);
      }
    });
  }
});

WebViewerInstance AnnotationManager#annotationChanged Annotations

Iterate over all fields

You can 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;
const getFieldNameAndValue = (field) => {
  // Do something with data
  const { name, value } = field;
  console.log(`Name: ${name}, Value: ${value}`);
  
  // Check children fields
  field.children.forEach(getFieldNameAndValue);
}
documentViewer.addEventListener('annotationsLoaded', () => {
  const fieldManager = annotationManager.getFieldManager();
  const fields = fieldManager.getFields();
  fields.forEach(getFieldNameAndValue)
});

DocumentViewer#annotationsLoaded AnnotationManager.getFieldManager FieldManager.getFields()

JavaScript (SDK v6.0+)

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

const getFieldNameAndValue = (field) => {
  // Do something with data
  const { name, value } = field;
  console.log(`Name: ${name}, Value: ${value}`);

  // Check children fields
  field.children.forEach(getFieldNameAndValue);
}

docViewer.on('annotationsLoaded', () => {
  const fieldManager = annotManager.getFieldManager();
  fieldManager.forEachField(getFieldNameAndValue);
});

DocumentViewer#annotationsLoaded AnnotationManager.getFieldManager FieldManager.forEachField

Accessing fields by name

You can access any field by its field name:

JavaScript (SDK v8.0+)

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

documentViewer.addEventListener('documentLoaded', () => {
  documentViewer.getAnnotationsLoadedPromise().then(function() {
    const fieldManager = annotationManager.getFieldManager();
    const field = fieldManager.getField('fieldName');
    field.widgets.map(annot => {
      annot.fieldFlags.set('ReadOnly', true);
    });
  });
});

DocumentViewer.getAnnotationsLoadedPromise DocumentViewer#documentLoaded AnnotationManager.getFieldManager FieldManager.getField Annotations.WidgetFlags

JavaScript (SDK v6.0+)

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

docViewer.on('documentLoaded', () => {
  docViewer.getAnnotationsLoadedPromise().then(function() {
    const fieldManager = annotManager.getFieldManager();
    const field = fieldManager.getField('fieldName');
    field.widgets.map(annot => {
      annot.fieldFlags.set('ReadOnly', true);
    });
  });
});

DocumentViewer.getAnnotationsLoadedPromise DocumentViewer#documentLoaded AnnotationManager.getFieldManager FieldManager.getField Annotations.WidgetFlags