Create list box field and list widget annotation using JavaScript

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

JavaScript

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

Annotations.WidgetFlags Annotations.Forms.Field Annotations.ListWidgetAnnotation AnnotationManager.addAnnotation AnnotationManager.drawAnnotationsFromList AnnotationManager.getFieldManager FieldManager.addField

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.

Available widget flags are:

• ReadOnly
• Required
• NoExport
• Multiline
• Password
• NoToggleToOff
• Radio
• PushButton
• Combo
• Edit
• DoNotScroll
• RadiosInUnison