Styling PDF form fields

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

// config.js
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
    };
  }
};

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

// config.js
const { Annotations } = instance.Core;

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.

// config.js
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;
};