Foxit Developer

Form interaction modes ​

Foxit PDF SDK for Web supports two form interaction modes: design mode and fill mode. Each targets different user scenarios to help developers and end users design and complete forms efficiently.

Overview ​

Design mode ​

In design mode, users can edit form fields and set their properties. Capabilities include:

  • Select form fields: Select fields of a specific type or all field types.
  • Edit operations: Drag and drop, delete, align, and similar operations.
  • Context menu: Advanced options such as field properties, copy, and paste.

NOTE

Design mode depends on UIExtension and the form-designer-v2 add-on. If your application is built on PDFViewCtrl only, you need to implement design mode yourself.

Fill mode ​

Fill mode is the default form mode. Users complete form content in this mode. Capabilities include:

  • Data entry: Text, dates, choice fields, and other field types.
  • Action triggers: Interactions that trigger form actions.
  • Signature fields: Clicking a signature field starts signing or signature verification.

APIs for interaction modes ​

Foxit PDF SDK for Web provides the following APIs to manage form interaction modes.

FormDesignMode enum ​

FormDesignMode represents the current form interaction mode:

javascript
export enum FormDesignMode {
    NONE,
    PUSH_BUTTON_AND_IMAGE,
    CHECK_BOX,
    RADIO_BUTTON,
    COMBO_BOX,
    LIST_BOX,
    TEXT_AND_DATE,
    SIGNATURE,
    ALL_WIDGET_TYPES
}

The value NONE means fill mode. ALL_WIDGET_TYPES means all field types are in design mode, typically when the current state handler tool is STATE_HANDLER_NAMES.STATE_HANDLER_SELECT_ANNOTATION.

Other enum values correspond to design mode for specific field creation tools. For example, when the user selects STATE_HANDLER_NAMES.STATE_HANDLER_CREATE_FIELD_PUSH_BUTTON as the active form creation tool, the interaction mode becomes PUSH_BUTTON_AND_IMAGE. Developers can switch and manage modes as needed.

FormFillerService.onDesignModeChange ​

FormFillerService.onDesignModeChange listens for form interaction mode changes. Subscribe to run custom logic when the mode switches:

javascript
const formFillerService = pdfviewer.getFormFillerService();
formFillerService.onDesignModeChange((mode) => {
    console.log('Form interaction mode changed:', mode);
    // Add code here to respond to mode changes
});

FormFillerService.getDesignMode ​

FormFillerService.getDesignMode returns the current form interaction mode:

javascript
const formFillerService = pdfviewer.getFormFillerService();
const currentMode = formFillerService.getDesignMode();
console.log('Current form mode:', FormDesignMode[currentMode]);

FormFillerService.setDesignMode ​

FormFillerService.setDesignMode lets developers switch the form interaction mode programmatically. Foxit PDF SDK for Web updates the form mode automatically when the state handler changes, so you usually do not need to call this method directly.

javascript
const formFillerService = pdfviewer.getFormFillerService();
formFillerService.setDesignMode(FormDesignMode.PUSH_BUTTON_AND_IMAGE);