Some test text!

menu
Style form fieldskeyboard_arrow_down

Styling PDF form fields

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

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

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

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

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

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

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.