Create list box field and list widget annotation using JavaScript

To create a new list box field and a list widget annotation.

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

  // myBtn is your own custom button
  document.getElementById('myBtn').addEventListener('click', () => {

    // set flags for list box
    const flags = new Annotations.WidgetFlags();
    flags.set(WidgetFlags.COMBO, false);

    // optional to allow multiple selections
    flags.set(WidgetFlags.MULTI_SELECT, true);

    // create list options
    const options = [
      {
        value: '1',
        displayValue: 'one'
      },
      {
        value: '2',
        displayValue: 'two'
      }
    ];

    // create a form field
    const field = new Annotations.Forms.Field("some list box field name", {
      type: 'Ch',
      value: options[0].value,
      flags,
      options
    });

    // create a widget annotation
    const widgetAnnot = new Annotations.ListWidgetAnnotation(field);

    // set position and size
    widgetAnnot.PageNumber = 1;
    widgetAnnot.X = 100;
    widgetAnnot.Y = 100;
    widgetAnnot.Width = 50;
    widgetAnnot.Height = 20;

    //add the form field and widget annotation
    annotManager.getFieldManager().addField(field);
    annotManager.addAnnotation(widgetAnnot);
    annotManager.drawAnnotationsFromList([widgetAnnot]);
  });
});

Create fillable PDF forms
Full sample code demonstrating how to add form fields to a PDF. Fields are first added as annotations and then converted to interactive form fields. Add signatures, text fields, checkboxes.