Create Text Field

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

Text widget flags

Widget Flag	Description	Unique to text?
READ_ONLY	The field value cannot be changed.	No
REQUIRED	The field must have a value when exported.	No
MULTILINE	The field may contain multiple lines of text.	Yes
COMB	The field shall be automatically divided into as many equally spaced positions as the value of the max length.	Yes
DO_NOT_SCROLL	The field shall not scroll (horizontally for single-line fields, vertically for multiple-line fields) to accommodate more text than fits within its annotation rectangle.	Yes
DO_NOT_SPELL_CHECK	The field text shall not be spell-checked.	Yes

Text widget 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 text widget.
    const flags = new WidgetFlags();
    flags.set(WidgetFlags.REQUIRED, true);
    flags.set(WidgetFlags.MULTILINE, true);

    // Creates a text form field.
    const field = new Annotations.Forms.Field('TextFormField 1', {
      type: 'Tx',
      defaultValue: 'Default Value',
      flags,
    });

    // Creates a text widget annotation.
    const widgetAnnot = new Annotations.TextWidgetAnnotation(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.TextWidgetAnnotation 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.