Section:

Create Combobox Fields

Combobox (choice) fields and widget annotations can be added programmatically. There are several properties and widget flags as highlighted below:

Combobox widget flags

Widget flag

Description

Unique to combobox?

READ_ONLY

The field value cannot be changed.

No

REQUIRED

The field must have a value when exported.

No

COMBO

The field is a combobox. Must be true.

No

MULTI_SELECT

The field can have multiple selected values.

No

EDIT

If true, the combobox will include an editable text box with a dropdown.

Yes

Combobox sample code

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 combobox widget.
8    const flags = new WidgetFlags();
9    flags.set(WidgetFlags.COMBO, true);
10    flags.set(WidgetFlags.REQUIRED, true);
11
12    // Define the available options.
13    const comboOptions = [
14      { value: '1', displayValue: 'one' },
15      { value: '2', displayValue: 'two' },
16      { value: '3', displayValue: 'three' }
17    ];
18
19    // Specify a font-family and font size.
20    const font = new Annotations.Font({ name: 'Helvetica', size: 12 });
21
22    // Creates a combobox form field.
23    const field = new Annotations.Forms.Field('ComboBoxField 1', {
24      flags,
25      font,
26      type: 'Ch',
27      options: comboOptions,
28      value: comboOptions[0].value,
29    });
30
31    // Creates a combobox widget annotation.
32    const widgetAnnot = new Annotations.ChoiceWidgetAnnotation(field);
33    widgetAnnot.PageNumber = 1;
34    widgetAnnot.X = 100;
35    widgetAnnot.Y = 100;
36    widgetAnnot.Width = 200;
37    widgetAnnot.Height = 25;
38
39    // Add form field to field manager and widget annotation to annotation manager.
40    annotationManager.getFieldManager().addField(field);
41    annotationManager.addAnnotation(widgetAnnot);
42    annotationManager.drawAnnotationsFromList([widgetAnnot]);
43  });
44});

Related Links

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.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales