Create text field and text widget annotation using JavaScript

To create a new text field with multi-line required flags and a text widget annotation.

JavaScript (SDK v8.0+)

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

  // myBtn is your own custom button
  document.getElementById('myBtn').addEventListener('click', () => {

    // set flags for multiline and required
    const flags = new WidgetFlags();
    flags.set('Multiline', true);
    flags.set('Required', true);

    // create a form field
    const field = new Annotations.Forms.Field("some text field name", {
      type: 'Tx',
      defaultValue: "some placeholder default text value",
      flags,
    });

    // create a widget annotation
    const widgetAnnot = new Annotations.TextWidgetAnnotation(field);

    // set position and size
    widgetAnnot.PageNumber = 1;
    widgetAnnot.X = 100;
    widgetAnnot.Y = 100;
    widgetAnnot.Width = 50;
    widgetAnnot.Height = 20;

    //add the form field and widget annotation
    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 { annotManager, Annotations } = instance;
  const { WidgetFlags } = Annotations;

  // myBtn is your own custom button
  document.getElementById('myBtn').addEventListener('click', () => {

    // set flags for multiline and required
    const flags = new WidgetFlags();
    flags.set('Multiline', true);
    flags.set('Required', true);

    // create a form field
    const field = new Annotations.Forms.Field("some text field name", {
      type: 'Tx',
      defaultValue: "some placeholder default text value",
      flags,
    });

    // create a widget annotation
    const widgetAnnot = new Annotations.TextWidgetAnnotation(field);

    // set position and size
    widgetAnnot.PageNumber = 1;
    widgetAnnot.X = 100;
    widgetAnnot.Y = 100;
    widgetAnnot.Width = 50;
    widgetAnnot.Height = 20;

    //add the form field and widget annotation
    annotManager.getFieldManager().addField(field);
    annotManager.addAnnotation(widgetAnnot);
    annotManager.drawAnnotationsFromList([widgetAnnot]);
  });
});

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

Create fillable PDF forms Full sample code demonstrating how to add form fields to a PDF. Fields are first added as annotations and then converted to interactive form fields. Add signatures, text fields, checkboxes.

Available widget flags are:

• ReadOnly

• Required

• NoExport

• Multiline

• Password

• NoToggleToOff

• Radio

• PushButton

• Combo

• Edit

• DoNotScroll

• RadiosInUnison