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