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

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

var fieldManager = annotManager.getFieldManager();
fieldManager.forEachField(function(field) {

You can access any field by its field id:

var field = fieldManager.getField(fieldId);
field.setValue('new value');

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);

Implementing the WidgetAnnotation's getCustomStyles function allows you to add styling change 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.