Create list box field and list widget annotation using JavaScript

1WebViewer(...)
2.then(instance => {
3  const { annotManager, Annotations } = instance;
4  // myBtn is your own custom button
5  document.getElementById('myBtn').addEventListener('click', () => {
6    // set flags for list box
7    const flags = new Annotations.WidgetFlags();
8    flags.set(WidgetFlags.COMBO, false);
9    // optional to allow multiple selections
10    flags.set(WidgetFlags.MULTI_SELECT, true);
11    // create list options
12    const options = [
13      {
14        value: '1',
15        displayValue: 'one'
16      },
17      {
18        value: '2',
19        displayValue: 'two'
20      }
21    ];
22    // create a form field
23    const field = new Annotations.Forms.Field("some list box field name", {
24      type: 'Ch',
25      value: options[0].value,
26      flags,
27      options
28    });
29    // create a widget annotation
30    const widgetAnnot = new Annotations.ListWidgetAnnotation(field);
31    // set position and size
32    widgetAnnot.PageNumber = 1;
33    widgetAnnot.X = 100;
34    widgetAnnot.Y = 100;
35    widgetAnnot.Width = 50;
36    widgetAnnot.Height = 20;
37    //add the form field and widget annotation
38    annotManager.getFieldManager().addField(field);
39    annotManager.addAnnotation(widgetAnnot);
40    annotManager.drawAnnotationsFromList([widgetAnnot]);
41  });
42});