Foxit PDF SDK For Web - V11.0.1

# Form Interaction Modes

In Foxit PDF SDK for Web, form interaction modes are divided into two types: Design Mode and Form Filling Mode. These two modes cater to different user scenarios, helping developers and users efficiently design and fill out forms.

# Overview

# Design Mode

In Design Mode, users can edit form widgets and configure their properties. The specific features include:

  • Selecting Form Widgets: Supports for selecting specific types or all form widgets.
  • Editing Actions: Supports for actions such as drag-and-drop, deletion, alignment, and more.
  • Context Menu: Provides additional advanced options, such as form widget property settings, copy-paste operations, and more.

Note: The functionality of Design Mode relies on the UIExtension and form-designer-v2 addons. If your application is developed based on PDFViewCtrl, you will need to implement the Design Mode yourself.

# Form Filling Mode

Form Filling Mode is the default mode for forms, allowing users to fill out form content. Specific features include:

  • Data Input: Supports various types of form widgets, such as text, dates, checkboxes, and more.
  • Action Triggering: Interacts with the form to trigger actions.
  • Signature Widget: Clicking on a signature widget triggers signing or signature validation functionality.

# APIs for Interaction Mode

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

# FormDesignMode (opens new window) Enumeration

FormDesignMode (opens new window) enumeration is used to represent the current interaction mode of the form, defined as follows:

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

The enumeration value NONE indicates that the form widget is currently in Form Filling Mode, while ALL_WIDGET_TYPES signifies that all form widgets are in Design Mode. This mode is typically activated when the user sets the current state handler tool to STATE_HANDLER_NAMES.STATE_HANDLER_SELECT_ANNOTATION.

Furthermore, enumeration values for other form creation tools correspond to the design mode for specific types of form widgets. For example, when the user selects STATE_HANDLER_NAMES.STATE_HANDLER_CREATE_FIELD_PUSH_BUTTON as the current form creation tool, the corresponding interaction mode is set to PUSH_BUTTON_AND_IMAGE. This allows developers to conveniently switch and manage various interaction modes as needed.

# FormFillerService.onDesignModeChange (opens new window)

FormFillerService.onDesignModeChange (opens new window) is an event listener method designed to monitor changes in form interaction modes. Developers can subscribe to this event to execute custom logic whenever the mode switches:

const formFillerService = pdfviewer.getFormFillerService();
formFillerService.onDesignModeChange((mode) => {
    console.log('The form interaction mode has changed:', mode);
    // Here, you can add code to be executed based on mode changes
});

# FormFillerService.getDesignMode (opens new window)

The FormFillerService.getDesignMode (opens new window) method is used to get the current interaction mode of the form:

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

# FormFillerService.setDesignMode (opens new window)

The FormFillerService.setDesignMode (opens new window) method allows developers to dynamically switch the interaction mode of the form. Foxit PDF SDK for Web automatically switches the form's interaction mode when changing the state-handler, so developers typically do not need to call this method directly.

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

← Form Signature Fields →