Styling PDF form fields

Styling widgets programmatically

Starting in WebViewer 11 you can style widgets by modifying their annotation properties directly. These styles are serialized and therefore saved to the PDF document.

In earlier versions, styles could only be modified by using the Widget.getCustomStyles or Widget.getCustomContainerStyles functions and were not serialized or saved to the document.

JavaScript (SDK v11.0+)

WebViewer(...)
.then(instance => {
  const { annotationManager, Annotations, documentViewer } = instance.Core;
  const { Color } = Annotations;

  documentViewer.addEventListener('annotationsLoaded', () => {
    const widgets = annotationManager.getAnnotationsList().filter(annotation => annotation instanceof Annotations.WidgetAnnotation);
    widgets.forEach(widget => {
      // Changes widget border color and thickness.
      widget.StrokeColor = new Color(255, 255, 50, 1);
      widget.StrokeThickness = 5;

      // Changes fill color within widget container.
      widget.FillColor = new Color(100, 0, 0, 1);

      // Changes widget position.
      widget.X = Math.floor(Math.random() * 500) + 1;
      widget.Y = Math.floor(Math.random() * 500) + 1;

      // Changes widget dimensions.
      widget.Width = Math.floor(Math.random() * (300 - 100 + 1)) + 100;
      widget.Height = Math.floor(Math.random() * (300 - 100 + 1)) + 100;

      // Redraws widget with updated styling.
      widget.refresh();
    });

    const widgetsWithText = widgets.filter(widget => {
      return (
        widget instanceof Annotations.TextWidgetAnnotation ||
        widget instanceof Annotations.ListWidgetAnnotation ||
        widget instanceof Annotations.ChoiceWidgetAnnotation
      );
    });

    // Change font family, size, and color of any widgets with text.
    widgetsWithText.forEach(widget => {
      widget.font = new Annotations.Font({ name: 'Arial', size: 15 });
      widget.TextColor = new Color(255, 255, 255, 1);
      widget.refresh();
    });
  });
});

Annotations.Color Annotations.Font Annotations.WidgetAnnotation AnnotationManager

JavaScript (SDK v8.0+)

WebViewer(...)
.then(instance => {
  // This method of styling widgets is not available in WebViewer 8.
  // See sections below for usage on getCustomStyles()
  // and getCustomContainerStyles().
});

JavaScript (SDK v6.0+)

WebViewer(...)
.then(instance => {
  // This method of styling widgets is not available in WebViewer 6.
  // See sections below for usage on getCustomStyles()
  // and getCustomContainerStyles().
});

Styling the widget inner element

Implementing the WidgetAnnotation's getCustomStyles function allows you to add styling changes to particular types of widget annotations. This function gets called for every annotation but in the sample below we show how to filter for all widgets, and style specific widgets based on their type.

These style changes will not be serialized and therefore won't be saved to the PDF document.

JavaScript (SDK v11.0+)

WebViewer(...)
.then(instance => {
  const { Annotations } = instance.Core;

  Annotations.WidgetAnnotation.getCustomStyles = 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
      };
    }
  };
});

Annotations.WidgetAnnotation

JavaScript (SDK v8.0+)

WebViewer(...)
.then(instance => {
  const { Annotations } = instance.Core;

  Annotations.WidgetAnnotation.getCustomStyles = widget => {
    if (widget instanceof Annotations.TextWidgetAnnotation) {
      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
      };
    }
  };
});

Annotations.WidgetAnnotation

JavaScript (SDK v6.0+)

WebViewer(...)
.then(instance => {
  const { docViewer, annotManager, Annotations } = instance;

  Annotations.WidgetAnnotation.getCustomStyles = widget => {
    if (widget instanceof Annotations.TextWidgetAnnotation) {
      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
      };
    }
  };
});

Annotations.WidgetAnnotation

Styling the widget container element

Implementing the WidgetAnnotation's getContainerCustomStyles function allows you to add styling changes to the container element of the widget annotation.

These style changes will not be serialized and therefore won't be saved to the PDF document.

JavaScript (SDK v11.0+)

WebViewer(...)
.then(instance => {
  const { Annotations } = instance.Core;

  Annotations.WidgetAnnotation.getContainerCustomStyles = widget => {
    if (widget instanceof Annotations.TextWidgetAnnotation) {
      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
      };
    }
  };
});

Annotations.WidgetAnnotation

JavaScript (SDK v8.0+)

WebViewer(...)
.then(instance => {
  const { Annotations } = instance.Core;

  Annotations.WidgetAnnotation.getContainerCustomStyles = widget => {
    if (widget instanceof Annotations.TextWidgetAnnotation) {
      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
      };
    }
  };
});

Annotations.WidgetAnnotation

JavaScript (SDK v6.0+)

WebViewer(...)
.then(instance => {
  const { docViewer, annotManager, Annotations } = instance;

  Annotations.WidgetAnnotation.getContainerCustomStyles = 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
      };
    }
  };
});

Annotations.WidgetAnnotation

Customizing the widget DOM element

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.

These style changes will not be serialized and therefore won't be saved to the PDF document.

JavaScript (SDK v11.0+)

WebViewer(...)
.then(instance => {
  const { Annotations } = instance.Core;

  const createInnerElement = Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement;
  Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement = function() {
    const button = this;

    const el = createInnerElement.apply(this, arguments);
    el.addEventListener('click', () => {
      console.log('check button clicked', button.fieldName);
    });

    return el;
  };
});

Annotations.CheckButtonWidgetAnnotation

JavaScript (SDK v8.0+)

WebViewer(...)
.then(instance => {
  const { Annotations } = instance.Core;

  const createInnerElement = Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement;
  Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement = function() {
    const button = this;

    const el = createInnerElement.apply(this, arguments);
    el.addEventListener('click', () => {
      console.log('check button clicked', button.fieldName);
    });

    return el;
  };
});

Annotations.CheckButtonWidgetAnnotation

JavaScript (SDK v6.0+)

WebViewer(...)
.then(instance => {
  const { Annotations } = instance;

  const createInnerElement = Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement;
  Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement = function() {
    const button = this;

    const el = createInnerElement.apply(this, arguments);
    el.addEventListener('click', () => {
      console.log('check button clicked', button.fieldName);
    });

    return el;
  };
});

Annotations.CheckButtonWidgetAnnotation