Some test text!


In this document
chevron_rightExample API usage

WebViewer provides support for interactive forms which are a collection of fields for gathering information interactively from the user.

Here are the major features of WebViewer form support:

  • Rendering of the form field widgets as from the original PDF document
  • Dynamic data entry into form field widgets
  • Loading and saving of form field data
  • Support for a number of form actions, including embedded JavaScript
  • Programmatic access to form field data, values and child widgets via the Annotations.Forms.FieldManager class

linkExample API usage

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.
$(document).on('documentLoaded', function() {
  var docViewer = readerControl.docViewer;
  var annotManager = docViewer.getAnnotationManager();

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

linkAccess fields

You can access any field by its field id:

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.

annotManager.on('fieldChanged', function(e, field, value) {
  console.log('Field changed: ' + + ', ' + 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.

$(document).on('viewerLoaded', function() {
  var annotManager = readerControl.docViewer.getAnnotationManager();
  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.

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.

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;


All of the form field data (field values and widget appearances) is included inside XFDF, for example when calling annotManager.exportAnnotations.

This means that when using the serverUrl option the field data will automatically be sent to your server with the annotation data and retrieved when loading a document.