Create Checkbox Fields

Checkbox fields and widget annotations can be added programmatically. There are several properties and widget flags as highlighted below:

Checkbox caption options

Caption	Value	Result
Check	''
Circle	l
Cross	8
Diamond	u
Square	n
Star	H

Checkbox widget flags

Widget flag	Description	Unique to checkbox?
READ_ONLY	The field value cannot be changed.	No
REQUIRED	The field must have a value when exported.	No

Checkbox sample code

JavaScript (SDK v8.0+)

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

  documentViewer.addEventListener('documentLoaded', () => {
    // Sets flags for the checkbox widget.
    const flags = new WidgetFlags();
    flags.set(WidgetFlags.REQUIRED, true);

    // Creates a checkbox form field.
    const field = new Annotations.Forms.Field('CheckboxField 1', {
      type: 'Btn',
      value: 'Off',
      flags,
    });

    // Creates a checkbox widget annotation.
    const widgetAnnot = new Annotations.CheckButtonWidgetAnnotation(field, {
      appearance: 'Off',
      appearances: {
        Off: {},
        Yes: {},
      },
      captions: {
        Normal: '' // Uses the check symbol for selected caption.
      }
    });

    widgetAnnot.PageNumber = 1;
    widgetAnnot.X = 100;
    widgetAnnot.Y = 100;
    widgetAnnot.Width = 25;
    widgetAnnot.Height = 25;

    // Add form field to field manager and widget annotation to annotation manager.
    annotationManager.getFieldManager().addField(field);
    annotationManager.addAnnotation(widgetAnnot);
    annotationManager.drawAnnotationsFromList([widgetAnnot]);
  });
});

Annotations.WidgetFlags Annotations.Forms.Field Annotations.CheckButtonWidgetAnnotation Annotations.WidgetAnnotation AnnotationManager.addAnnotation AnnotationManager.drawAnnotationsFromList AnnotationManager.getFieldManager FieldManager.addField

JavaScript (SDK v6.0+)

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

    docViewer.on('documentLoaded', () => {
      // create field and widget annotations here
    });
  });

DocumentViewer#documentLoaded

Learn More

Annotations and fields should be added to the document only after the document has finished loading. See Create New Form Fields Overview for more.