Create Listbox Fields

1WebViewer(...)
2.then(instance => {
3  const { annotationManager, Annotations, documentViewer } = instance.Core;
4  const { WidgetFlags } = Annotations;
5
6  documentViewer.addEventListener('documentLoaded', () => {
7    // Sets flags for the listbox widget.
8    const flags = new WidgetFlags();
9    flags.set(WidgetFlags.COMBO, false);
10    flags.set(WidgetFlags.MULTI_SELECT, true);
11    flags.set(WidgetFlags.REQUIRED, true);
12
13    // Define the available options.
14    const listOptions = [
15      { value: '1', displayValue: 'one' },
16      { value: '2', displayValue: 'two' },
17      { value: '3', displayValue: 'three' }
18    ];
19
20    // Specify a font-family and font size.
21    const font = new Annotations.Font({ name: 'Helvetica', size: 12 });
22
23    // Creates a listbox form field.
24    const field = new Annotations.Forms.Field('ListBoxField 1', {
25      flags,
26      font,
27      type: 'Ch',
28      options: listOptions,
29      value: listOptions[0].value,
30    });
31
32    // Creates a listbox widget annotation.
33    const widgetAnnot = new Annotations.ListWidgetAnnotation(field);
34    widgetAnnot.PageNumber = 1;
35    widgetAnnot.X = 100;
36    widgetAnnot.Y = 100;
37    widgetAnnot.Width = 200;
38    widgetAnnot.Height = 50;
39
40    // Add form field to field manager and widget annotation to annotation manager.
41    annotationManager.getFieldManager().addField(field);
42    annotationManager.addAnnotation(widgetAnnot);
43    annotationManager.drawAnnotationsFromList([widgetAnnot]);
44  });
45});