Some test text!

menu
Edit form fieldskeyboard_arrow_down

Editing PDF form fields

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.

linkUI

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.

linkRelevant APIs and events

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

linkdisableElements

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']);
  });

linkediting

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();
    });
  });

linkeditableAnnotation

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));
    });
  });

linkevents

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...
    });
  });

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close