Some test text!

Form APIs

Contents

Iterate over fields
Access fields
Field changes
Set fields to readonly
Custom styles

linkIterate over 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.
var viewer = new PDFTron.WebViewer({ ... }, viewerElement);

viewerElement.addEventListener('documentLoaded', function() {
  var docViewer = viewer.getInstance().docViewer;
  var annotManager = docViewer.getAnnotationManager();

  docViewer.getAnnotationsLoadedPromise().then(function() {
    // iterate over fields
    var fieldManager = annotManager.getFieldManager();
    fieldManager.forEachField(function(field) {
      console.log(field.getValue());
    });
  });
});

linkAccess fields

You can access any field by its field id:

var viewer = new PDFTron.WebViewer({ ... }, viewerElement);

viewerElement.addEventListener('documentLoaded', function() {
  var docViewer = viewer.getInstance().docViewer;
  var annotManager = docViewer.getAnnotationManager();

  docViewer.getAnnotationsLoadedPromise().then(function() {
    var fieldManager = annotManager.getFieldManager();
    var field = fieldManager.getField(fieldId);
    field.setValue('new value');
  });
});

linkField changes

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

var viewer = new PDFTron.WebViewer({ ... }, viewerElement);

viewerElement.addEventListener('documentLoaded', function() {
  var docViewer = viewer.getInstance().docViewer;
  var annotManager = docViewer.getAnnotationManager();

  annotManager.on('fieldChanged', function(e, field, value) {
    console.log('Field changed: ' + field.name + ', ' + value);
  });
});

linkSet fields to readonly

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.

var viewer = new PDFTron.WebViewer({ ... }, viewerElement);

viewerElement.addEventListener('ready', function() {
  var docViewer = viewer.getInstance().docViewer;
  var annotManager = docViewer.getAnnotationManager();
  var Annotations = document.querySelector('iframe').contentWindow.Annotations;

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

linkCustom styles

Implementing the WidgetAnnotation's getCustomStyles function allows you to add styling changes to particular types of widget annotations.

var viewer = new PDFTron.WebViewer({ ... }, viewerElement);

viewerElement.addEventListener('ready', function() {
  var docViewer = viewer.getInstance().docViewer;
  var annotManager = docViewer.getAnnotationManager();
  var Annotations = document.querySelector('iframe').contentWindow.Annotations;

  Annotations.WidgetAnnotation.getCustomStyles = function(widget) {
    if (widget instanceof Annotations.TextWidgetAnnotation) {
      // can check widget properties
      if (widget.fieldName === 'f1-1') {
        return {
          'background-color': 'lightgreen'
        };
      }
      return {
        'background-color': 'lightblue',
        color: 'brown'
      };
    } else if (widget instanceof Annotations.PushButtonWidgetAnnotation) {
      return {
        'background-color': 'black',
        color: 'white'
      };
    } else if (widget instanceof Annotations.CheckButtonWidgetAnnotation) {
      return {
        'background-color': 'lightgray',
        opacity: 0.8
      };
    }
  };
});

You can also extend the createInnerElement function on widget annotations. This allows you to use your own DOM elements for the display or just to add your own event handlers.

// in a config file
var createInnerElement = Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement;
Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement = function() {
  var button = this;

  var el = createInnerElement.apply(this, arguments);
  el.on('click', function() {
    console.log('check button clicked', button.fieldName);
  });

  return el;
};

Get the answers you need: Support

Contents

Iterate over fields
Access fields
Field changes
Set fields to readonly
Custom styles