Editing PDF form fields in Javascript

The information below only applies to WebViewer 7. Starting in WebViewer 8 you can now create and edit form fields through the Form Builder .

WebViewer supports form field editing through built-in UI components that allow users to resize, move, or delete form fields. Several APIs and events are also exposed for developers to run custom logic.

Click Edit in the header, then click the form editing button in the toolbar to let WebViewer enter the editing mode.

During the editing mode, form fields will be replaced by rectangle annotations. Users can then perform actions on the annotations to resize, move or delete them. The information of the fields can be found in the notes panel or on annotation hovering.

Click Exit Form Editing Mode to finish editing and apply changes to the fields.

WebViewer provides some APIs and useful events for customizing the default behaviors.

Just like most of the other elements in the viewer, the form editing button has a data-element associated with it, which means you can use disableElements to remove it from the DOM.

WebViewer(...)
  .then(instance => {
    instance.disableElements(['startFormEditingButton']);
  });

The WidgetEditingManager exposes the startEditing and endEditing function that can be used to programmatically toggle the editing mode. The isEditing function can be used to check if WebViewer is currently in the editing mode.

WebViewer(...)
  .then(instance => {
    instance.docViewer.on('annotationsLoaded', () => {
      const widgetEditingManager = instance.annotManager.getWidgetEditingManager();
      widgetEditingManager.startEditing();
      widgetEditingManager.isEditing(); // returns true
      // ...
      widgetEditingManager.endEditing();
    });
  });

The editable annotation is the blue rectangle annotation that temporarily replaces a form field during the editing mode. Several helper functions that are related to editable annotations are also available to use.

WebViewer(...)
  .then(instance => {
    instance.annotManager.on('annotationChanged', (annotations) => {
      const widgetEditingManager = instance.annotManager.getWidgetEditingManager();

      if (!widgetEditingManager.isEditing()) {
        return;
      }

      const editableAnnots = annotations.filter((annot) =>
        widgetEditingManager.isEditableAnnotation(annot)
      );
      const changedWidgets = editableAnnots.map(annot => widgetEditingManager.getWidget(annot));
    });
  });

The editingStarted and editingEnded events will be triggered when WebViewer enters and exits the editing mode. They can be listened to, to execute some custom logic.

WebViewer(...)
  .then(instance => {
    const widgetEditingManager = instance.annotManager.getWidgetEditingManager();

    widgetEditingManager.on('editingStarted', () => {
      // Editing started, run some custom logic...
    });

    widgetEditingManager.on('editingEnded', () => {
      // Editing ended, run some custom logic...
    });
  });