# Form Property Editing Components
The built-in form property editing components are predefined components in Foxit PDF SDK for Web that allow you to edit common form properties, such as field names, form widget visibility, and appearance settings (e.g., border color, fill color, text font, and font size). These built-in components enable users to conveniently customize the layout of the form property dialog without the need to write additional code.
The following lists the built-in form property editing components in Foxit PDF SDK for Web, categorized by form widget types.
# General Form Property Editing Components
| Component | Target Object | Associated API | Change Event AnnotUpdatedType /FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:field-name-editor | PDFFormField (opens new window) | setName / getName | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.NAME | Input | Edit form field name |
form-designer-v2:field-alternate-name-editor | PDFFormField (opens new window) | setAlternateName / getAlternateName | DataEvents.formFieldPropertyUpdated / FormFieldPropertyName.ALTERNATE_NAME | Input | Edit the alternate name of the form field |
form-designer-v2:widget-visible-type-selector | Widget (opens new window) | setFlags / getFlags | DataEvents.annotationUpdated /AnnotUpdatedType.flagsUpdated | Dropdown List | Set form field visibility: visible, hidden, visible but not printable, hidden but printable |
form-designer-v2:field-orientation-selector | Widget (opens new window) | setRotation/ getRotation | DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetRotationUpdated | Dropdown List | Set the display orientation (rotation angle) of the form widget |
form-designer-v2:field-readonly-checkbox | PDFFormField (opens new window) | setFlags / updateFlagByOptions /describeFieldFlags / isReadonly | DataEvents.formFieldPropertyUpdated / FormFieldPropertyName.FLAGS | checkbox | Set whether a form widget is read-only |
form-designer-v2:field-required-checkbox | PDFFormField (opens new window) | setFlags / updateFlagByOptions /describeFieldFlags / isRequired | DataEvents.formFieldPropertyUpdated / FormFieldPropertyName.FLAGS | checkbox | Set whether a form widget is required; only applicable to CheckBox, RadioBox, and TextField |
form-designer-v2:widget-border-color-picker | Widget (opens new window) | setMKBorderColor / getMKBorderColor | DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetMKBorderColorUpdated | Color Picker | Set the border color of a form widget |
form-designer-v2:widget-line-style-selector | Widget (opens new window) | setBorderStyle / getBorderStyle | DataEvents.annotationUpdated / AnnotUpdatedType.borderStyleUpdated | Dropdown List | Set the border style of a form widget |
form-designer-v2:widget-fill-color-picker | Widget (opens new window) | setMKFillColor / getMKFillColor | DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetMKFillColorUpdated | Color Picker | Set the fill color of a form widget |
form-designer-v2:widget-line-thickness-selector | Widget (opens new window) | setBorderWidth / getBorderWidth | DataEvents.annotationUpdated / AnnotUpdatedType.borderStyleUpdated | Dropdown List | Set the border width of a form widget |
form-designer-v2:widget-text-size-selector | Widget (opens new window) | setTextSize / setDefaultAppearance / getTextSize / getDefaultAppearance | DataEvents.annotationUpdated / AnnotUpdatedType.defaultAppearanceUpdated | Editable Dropdown | Set the text font size of the form widget |
form-designer-v2:widget-text-color-picker | Widget (opens new window) | setTextColor / setDefaultAppearance / getTextColor / getDefaultAppearance | DataEvents.annotationUpdated / AnnotUpdatedType.defaultAppearanceUpdated | Color Picker | Set the text color of the form widget |
form-designer-v2:widget-font-selector | Widget (opens new window) | setDefaultAppearance / getFont | DataEvents.annotationUpdated / AnnotUpdatedType.defaultAppearanceUpdated | Dropdown List | Set the text font of the form widget |
form-designer-v2:field-text-direction | Widget (opens new window) | setDirectionRTL / getDirectionRTL | DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetDirectionRTLUpdated | Radio Button | Set the display direction of the form widget (left-to-right/right-to-left) |
form-designer-v2:widget-position-properties | Widget (opens new window) | setRect / getRect | DataEvents.annotationUpdated / AnnotUpdatedType.rectUpdated | Composite Panel Component | Set the position and size of the form widget, allowing users to specify units and adjust the position with fixed width and height |
form-designer-v2:lock-widget-checkbox | Widget (opens new window) | setFlags / getFlags | DataEvents.annotationUpdated / AnnotUpdatedType.flagsUpdated | Checkbox | Set whether the form widget is locked. Once locked, all properties of the form widget will become non-editable |
form-designer-v2:widget-action-creator | Widget (opens new window) | AdditionalAction.addAction | DataEvents.annotationUpdated / AnnotUpdatedType.additionalActionDataUpdated | Composite Component | Allow users to choose different trigger methods and action types to add new actions to the form widget |
form-designer-v2:widget-action-tree | Widget (opens new window) | moveActionOrder / updateAction / AdditionalAction.updateActionData / removeAction / AdditionalAction.removeAction | DataEvents.annotationUpdated / AnnotUpdatedType.actionDataUpdated / AnnotUpdatedType.additionalActionDataUpdated | Composite Component | Display the action list of the form widget, allowing users to move, edit, and delete the selected actions |
# Common Property Editing Component for Form Combo Box and List Box
| Component | Target Object | Associated API | Change Event AnnotUpdatedType /FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:combo-list-box-item-list-selector | PDFFormField (opens new window) | setOptions / deleteOptions / insertOption / addOption / updateOption / getOptionsSize / moveOption / selectOption | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.CHOICE_OPTION_ITEMS | List Box | Display the options of a Combo Box or List Box and enable setting the currently selected item. Used in conjunction with the components form-designer-v2:combo-list-box-item-editor，form-designer-v2:combo-list-box-add-item-button，form-designer-v2:combo-list-box-export-value-editor，form-designer-v2:combo-list-box-delete-item-button，form-designer-v2:combo-list-box-move-item-up-button, and form-designer-v2:combo-list-box-move-item-down-button to allow editing, adding, deleting, and moving options for a Combo Box or List Box |
form-designer-v2:combo-list-box-item-editor | PDFFormField (opens new window) | updateOption | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.CHOICE_OPTION_ITEMS | Input | Add options to a Combo Box or List Box and also edit the currently selected option |
form-designer-v2:combo-list-box-add-item-button | PDFFormField (opens new window) | addOption | ... | Button | Add options to a Combo Box or List Box, to be used in conjunction with the form-designer-v2:combo-list-box-item-editor and form-designer-v2:combo-list-box-export-value-editor components |
form-designer-v2:combo-list-box-export-value-editor | PDFFormField (opens new window) | addOption / updateOption | ... | Input | Set the export value of Combo Box or List Box options, to be used in conjunction with the form-designer-v2:combo-list-box-item-editor and form-designer-v2:combo-list-box-add-item-button components |
form-designer-v2:combo-list-box-delete-item-button | PDFFormField (opens new window) | deleteOption | ... | Button | Delete the currently selected option from the Combo Box or List Box |
form-designer-v2:combo-list-box-move-item-up-button | PDFFormField (opens new window) | moveOption | ... | Button | Move the currently selected option in the Combo Box or List Box |
form-designer-v2:combo-list-box-move-item-down-button | PDFFormField (opens new window) | moveOption | ... | Button | Move the currently selected option in the Combo Box or List Box |
# Common Property Editing Component for Form Combo Box and Text Box
| Component | Target Object | Associated API | Change Event AnnotUpdatedType /FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:widget-format-category-selector | PDFFormField (opens new window) | setFormatAction / removeFormatAction / getFormatActionInfo | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FORMAT_ACTION | Dropdown List | Set the display format for Text Field and Combo Box. Used in conjunction with the components form-designer-v2:custom-format-options, form-designer-v2:number-format-options, form-designer-v2:date-format-options, form-designer-v2:percentage-format-options, form-designer-v2:special-format-options, and form-designer-v2:time-format-options |
form-designer-v2:custom-format-options form-designer-v2:number-format-options form-designer-v2:date-format-options form-designer-v2:percentage-format-options form-designer-v2:special-format-options form-designer-v2:time-format-options | PDFFormField (opens new window) | ... | ... | Composite Component | Edit the detailed configuration of different display formats for Text Field and Combo Box. The visibility of these components needs to be controlled based on the format type selected in form-designer-v2:widget-format-category-selector |
form-designer-v2:widget-format-category-tip | - | - | - | Static Text | Display different prompt messages based on the format type selected in form-designer-v2:widget-format-category-selector |
form-designer-v2:validation-action-editor | PDFFormField (opens new window) | setValidateAction / getValidateActionInfo | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.VALIDATE_ACTION | Composite Component | Configure validation rules for Text Field and Combo Box |
form-designer-v2:calculate-action-editor | PDFFormField (opens new window) | setCalculateAction / getCalculateActionInfo | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.CALCULATE_ACTION | Composite Component | Configure calculation rules for Text Field and Combo Box |
# Common Property Editing Component for Form Radio Button and Checkbox
| Component | Target Object | Associated API | Change Event AnnotUpdatedType /FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:normal-caption-selector | Widget (opens new window) | setNormalCaption / getNormalCaption | DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetNormalCaptionUpdated | Dropdown List | Set the button style for Radio Button and Checkbox |
form-designer-v2:export-value-editor | Widget (opens new window) | setExportValue / getExportValue | DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetExportValueUpdated | Input | Set the export value for Radio Button and Checkbox |
form-designer-v2:checked-by-default-checkbox | PDFFormField (opens new window) | setCheckedByDefault / isCheckedByDefault | DataEvents.formFieldPropertyUpdated / FormFieldPropertyName.CHECKED_BY_DEFAULT | Checkbox | Set whether Radio Button and Checkbox are selected by default |
# Form Button Property Editing Component
| Component | Target Object | Associated API | Change Event AnnotUpdatedType /FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:push-button-layout-selector | Widget (opens new window) | setIconCaptionRelation / getIconCaptionRelation | DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetIconCaptionRelationUpdated | Dropdown List | Set the icon and text display layout of the Push Button |
form-designer-v2:push-button-show-icon-fit-dialog-button | Widget (opens new window) | setIconFitOptions / getIconFitOptions | - | Button | Open the form-designer-v2:icon-fit-dialog dialog upon clicking |
form-designer-v2:icon-fit-dialog | Widget (opens new window) | setIconFitOptions / getIconFitOptions | - | Dialog | Set the scaling method for the Push Button's icon |
form-designer-v2:push-button-behavior-selector | Widget (opens new window) | setHighlightingMode / getHighlightingMode | DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetHighlightingModeUpdated | Dropdown List | Set the highlight mode of the Push Button when the mouse is pressed |
form-designer-v2:push-button-caption-editor | Widget (opens new window) | setMKCaption / getMKCaptionOptions | DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetCaptionUpdated | Input | Set the text displayed on the Push Button in different states, with the "states" determined by the form-designer-v2:push-button-icon-caption-position-selector component. |
form-designer-v2:push-button-icon-editor | Widget (opens new window) | setMKIcon / removeMKIcon / getMKIcon / getMKIconOptions | DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetIconUpdated | - | Preview and modify the icon of the Push Button in different states (including mouse press, release, and hover), with the states specified by the form-designer-v2:push-button-icon-caption-position-selector component. This requires the use of two components together. |
form-designer-v2:push-button-icon-caption-position-selector | Widget (opens new window) | - | - | Select | Used in conjunction with the form-designer-v2:push-button-caption-editor and form-designer-v2:push-button-icon-editor components to specify the different states of the Push Button (including mouse press, release, and hover). The form-designer-v2:push-button-caption-editor and form-designer-v2:push-button-icon-editor components are used to configure the text and icon for the corresponding states. |
# Form Textbox Property Editing Component
| Component | Target Object | Associated API | Change Event AnnotUpdatedType /FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:text-field-alignment-selector | Widget (opens new window) | setAlignment / getAlignment | DataEvents.annotationUpdated / AnnotUpdatedType.formWidgetAlignmentUpdated | Dropdown List | Set the text alignment of the Text Field |
form-designer-v2:text-field-default-value-editor | PDFFormField (opens new window) | setDefaultValue / getDefaultValue | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.DEFAULT_VALUE | Input | Set the default value of the Text Field |
form-designer-v2:text-field-scroll-long-text-checkbox | PDFFormField (opens new window) | describeFieldFlags / updateFlagByOptions / setFlags / getFlags | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS | Checkbox | Scroll to display long text: when the Text Field font size is set to a fixed value and the content length exceeds the size of the text box, determine whether the text content should automatically scroll with the cursor to display the full text |
form-designer-v2:text-field-max-length-editor | PDFFormField (opens new window) | describeFieldFlags / updateFlagByOptions / setFlags / getFlags | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS | Checkbox + Input | Set whether to limit the text length of the Text Field, and optionally define a maximum length limit |
form-designer-v2:text-field-password-checkbox | PDFFormField (opens new window) | describeFieldFlags / updateFlagByOptions / setFlags / getFlags | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS | Checkbox | Set whether the Text Field is a password field. When this option is enabled, spell checking, text composition, and multi-line input are not allowed |
form-designer-v2:text-field-check-spelling | PDFFormField (opens new window) | describeFieldFlags / updateFlagByOptions / setFlags / getFlags | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS | Checkbox | 设Set whether the Text Field enables spell check. When this option is enabled, it cannot be set as a password field |
form-designer-v2:text-field-comb-of-editor | PDFFormField (opens new window) | describeFieldFlags / updateFlagByOptions / setFlags / getFlags | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS | Checkbox + Input | Set the Text Field as a combined input box and specify the number of combined characters. When this option is enabled, other options will become unavailable, including scrolling to display long text, limiting text length, password field, spell check, and multi-line input |
form-designer-v2:text-field-multiline-checkbox | PDFFormField (opens new window) | describeFieldFlags / updateFlagByOptions / setFlags / getFlags | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS | Checkbox + Input | Set the Text Field as a multi-line input box. When this option is enabled, the Text Field cannot be set as a password field or a multi-line input box |
# Form Combo Box Property Editing Component
| Component | Target Object | Associated API | Change Event AnnotUpdatedType /FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:combo-box-edit-checkbox | PDFFormField (opens new window) | updateFlagByOptions | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS | Checkbox | Set whether the Combo Box is editable |
# Form List Box Property Editing Component
| Component | Target Object | Associated API | Change Event AnnotUpdatedType /FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:list-box-multille-selection-checkbox | PDFFormField (opens new window) | updateFlagByOptions | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.FLAGS | Checkbox | Set whether the List Box allows multiple selection |
# Form Radio Button Property Editing Component
| Component | Target Object | Associated API | Change Event AnnotUpdatedType /FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:radio-button-unison-checkbox | PDFFormField (opens new window) | updateFlagByOptions / describeFieldFlags | DataEvents.formFieldPropertyUpdated / FormFieldPropertyName.FLAGS | Checkbox | Set whether the Radio Button allows simultaneous selection of radio buttons with the same name and value |
# Form Signature Property Editing Component
| Component | Target Object | Associated API | Change Event AnnotUpdatedType /FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:signed-action-editor | PDFSignature (opens new window) | setMDPAction / getMDPAction | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.SIGNATURE_MDP_ACTION | Composite Component | Edit the MDP configuration of the signature field |
Based on the built-in form property editing components mentioned above, developers can quickly implement customized UI layouts for form property editing. To help you better understand, you can refer to the following example for more information: <examples/UIExtension/form-properties-editor/index.html>.
# Version Compatibility
Minimum Supported Version：Foxit PDF SDK for Web 11.0.0