Create Listbox Fields

Listbox fields and widget annotations can be added programmatically. There are several properties and widget flags as highlighted below:

Listbox widget flags

Widget flag	Description	Unique to listbox?
READ_ONLY	The field value cannot be changed.	No
REQUIRED	The field must have a value when exported.	No
COMBO	The field is a listbox. Must be false.	No
MULTI_SELECT	The field can have multiple selected values.	No

Listbox sample code

JavaScript (SDK v8.0+)

WebViewer(...)
.then(instance => {
  const { annotationManager, Annotations, documentViewer } = instance.Core;
  const { WidgetFlags } = Annotations;

  documentViewer.addEventListener('documentLoaded', () => {
    // Sets flags for the listbox widget.
    const flags = new WidgetFlags();
    flags.set(WidgetFlags.COMBO, false);
    flags.set(WidgetFlags.MULTI_SELECT, true);
    flags.set(WidgetFlags.REQUIRED, true);

    // Define the available options.
    const listOptions = [
      { value: '1', displayValue: 'one' },
      { value: '2', displayValue: 'two' },
      { value: '3', displayValue: 'three' }
    ];

    // Specify a font-family and font size.
    const font = new Annotations.Font({ name: 'Helvetica', size: 12 });

    // Creates a listbox form field.
    const field = new Annotations.Forms.Field('ListBoxField 1', {
      flags,
      font,
      type: 'Ch',
      options: listOptions,
      value: listOptions[0].value,
    });

    // Creates a listbox widget annotation.
    const widgetAnnot = new Annotations.ListWidgetAnnotation(field);
    widgetAnnot.PageNumber = 1;
    widgetAnnot.X = 100;
    widgetAnnot.Y = 100;
    widgetAnnot.Width = 200;
    widgetAnnot.Height = 50;

    // Add form field to field manager and widget annotation to annotation manager.
    annotationManager.getFieldManager().addField(field);
    annotationManager.addAnnotation(widgetAnnot);
    annotationManager.drawAnnotationsFromList([widgetAnnot]);
  });
});

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

JavaScript (SDK v6.0+)

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

    docViewer.on('documentLoaded', () => {
      // create field and widget annotations here
    });
  });

DocumentViewer#documentLoaded

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.