Styling PDF form fields

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

JavaScript (SDK v8.0+)

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

Annotations.WidgetAnnotation

JavaScript (SDK v6.0+)

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

Annotations.WidgetAnnotation

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

JavaScript (SDK v8.0+)

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

Annotations.WidgetAnnotation

JavaScript (SDK v6.0+)

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

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.

JavaScript (SDK v8.0+)

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

Annotations.CheckButtonWidgetAnnotation

JavaScript (SDK v6.0+)

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