Create new PDF form fields using JavaScript

Form fields, also known as AcroForms, are a collection of fields such as text boxes, checkboxes, radio buttons, drop-down lists, push buttons, and more that will gather information interactively from the user.

One of the most important ideas to understand is the appearance (how it is displayed) of a form field is independent of the field itself and exists as a widget annotation. In fact, there can be multiple widget annotations for a single field. This gives the freedom to present a field appearance over multiple pages or even multiple times on the same page of a document.

Annotations and fields should be added to the document only after the document has finished loading. This can be done by listening for the DocumentViewer.documentLoaded event:

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer } = instance.Core;
4    documentViewer.addEventListener('documentLoaded', () => {
5      // create field and widget annotations here
6    });
7  });

1WebViewer(...)
2  .then(instance => {
3    const { docViewer, annotManager, Annotations } = instance;
4    docViewer.on('documentLoaded', () => {
5      // create field and widget annotations here
6    });
7  });

Text Field

Signature Field

Checkbox Field

Combobox Field

Listbox Field

Radio Button Field

Date Picker Field