Built-In Form Property Editor Components ​
Built-in form property editor components are a set of commonly used components preset in Foxit PDF SDK for Web, such as field name, form field visibility, and appearance settings including border color, fill color, text font, and font size. These built-in components allow users to conveniently customize the layout of the form properties dialog without writing additional code.
The following sections list the built-in form property editor components in Foxit PDF SDK for Web by form field category.
Common Form Property Editor Components ​
| Component | Target Object | Related API | Change Event AnnotUpdatedType/FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:field-name-editor | PDFFormField | setName getName | DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.NAME | Input box | Edits the form field name |
form-designer-v2:field-alternate-name-editor | PDFFormField | setAlternateName getAlternateName | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.ALTERNATE_NAME | Input box | Edits the alternate name of the form field |
form-designer-v2:widget-visible-type-selector | Widget | setFlags getFlags | DataEvents.annotationUpdated AnnotUpdatedType.flagsUpdated | Drop-down list | Sets form field visibility: visible, hidden, visible but not printable, or hidden but printable |
form-designer-v2:field-orientation-selector | Widget | setRotation/ getRotation | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetRotationUpdated | Drop-down list | Sets the display orientation of the form field (rotation angle) |
form-designer-v2:field-readonly-checkbox | PDFFormField | setFlags updateFlagByOptions describeFieldFlags isReadonly | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | Checkbox | Sets whether the form field is read-only |
form-designer-v2:field-required-checkbox | PDFFormField | setFlags updateFlagByOptions describeFieldFlags isRequired | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | Checkbox | Sets whether the form field is required. Valid only for CheckBox, RadioBox, and TextField |
form-designer-v2:widget-border-color-picker | Widget | setMKBorderColor getMKBorderColor | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetMKBorderColorUpdated | Color picker | Sets the border color of the form field |
form-designer-v2:widget-line-style-selector | Widget | setBorderStyle getBorderStyle | DataEvents.annotationUpdated AnnotUpdatedType.borderStyleUpdated | Drop-down list | Sets the border line style of the form field |
form-designer-v2:widget-fill-color-picker | Widget | setMKFillColor getMKFillColor | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetMKFillColorUpdated | Color picker | Sets the fill color of the form field |
form-designer-v2:widget-line-thickness-selector | Widget | setBorderWidth getBorderWidth | DataEvents.annotationUpdated AnnotUpdatedType.borderStyleUpdated | Drop-down list | Sets the border width of the form field |
form-designer-v2:widget-text-size-selector | Widget | setTextSize setDefaultAppearance getTextSize getDefaultAppearance | DataEvents.annotationUpdated AnnotUpdatedType.defaultAppearanceUpdated | Editable combo box | Sets the text font size of the form field |
form-designer-v2:widget-text-color-picker | Widget | setTextColor setDefaultAppearance getTextColor getDefaultAppearance | DataEvents.annotationUpdated AnnotUpdatedType.defaultAppearanceUpdated | Color picker | Sets the text color of the form field |
form-designer-v2:widget-font-selector | Widget | setDefaultAppearance getFont | DataEvents.annotationUpdated AnnotUpdatedType.defaultAppearanceUpdated | Drop-down list | Sets the text font of the form field |
form-designer-v2:field-text-direction | Widget | setDirectionRTL getDirectionRTL | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetDirectionRTLUpdated | Radio button group | Sets the display direction of the form field (left-to-right/right-to-left) |
form-designer-v2:widget-position-properties | Widget | setRect getRect | DataEvents.annotationUpdated AnnotUpdatedType.rectUpdated | Composite panel | Sets form field position and size, allowing users to specify units and modify the position with fixed width and height |
form-designer-v2:lock-widget-checkbox | Widget | setFlags getFlags | DataEvents.annotationUpdated AnnotUpdatedType.flagsUpdated | Checkbox | Sets whether the form field is locked. Once locked, all properties of the form field become non-editable |
form-designer-v2:widget-action-creator | Widget | AdditionalAction.addAction | DataEvents.annotationUpdated AnnotUpdatedType.additionalActionDataUpdated | Composite component | Lets users choose different trigger methods and action types to add new actions to a form field |
form-designer-v2:widget-action-tree | Widget | moveActionOrder updateAction AdditionalAction.updateActionData removeAction AdditionalAction.removeAction | DataEvents.annotationUpdated AnnotUpdatedType.actionDataUpdated AnnotUpdatedType.additionalActionDataUpdated | Composite component | Displays the action list of the form field and allows users to move, edit, and delete selected actions |
Shared Property Editor Components for Combo Box and List Box ​
| Component | Target Object | Related API | Change Event AnnotUpdatedType FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:combo-list-box-item-list-selector | PDFFormField | setOptions deleteOptions insertOption addOption updateOption getOptionsSize moveOption selectOption | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.CHOICE_OPTION_ITEMS | List box | Displays the option list of a Combo Box or List Box, and can also set the currently selected item. Used together with 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 edit, add, delete, and move options in a Combo Box or List Box |
form-designer-v2:combo-list-box-item-editor | PDFFormField | updateOption | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.CHOICE_OPTION_ITEMS | Input box | Adds options to a Combo Box or List Box, and can also edit the selected option |
form-designer-v2:combo-list-box-add-item-button | PDFFormField | addOption | ... | Button | Adds an option to a Combo Box or List Box, and must be used together with form-designer-v2:combo-list-box-item-editor and form-designer-v2:combo-list-box-export-value-editor |
form-designer-v2:combo-list-box-export-value-editor | PDFFormField | addOption updateOption | ... | Input box | Sets the export value of a Combo Box or List Box option, and must be used together with form-designer-v2:combo-list-box-item-editor and form-designer-v2:combo-list-box-add-item-button |
form-designer-v2:combo-list-box-delete-item-button | PDFFormField | deleteOption | ... | Button | Deletes the currently selected Combo Box or List Box option |
form-designer-v2:combo-list-box-move-item-up-button | PDFFormField | moveOption | ... | Button | Moves the currently selected Combo Box or List Box option up |
form-designer-v2:combo-list-box-move-item-down-button | PDFFormField | moveOption | ... | Button | Moves the currently selected Combo Box or List Box option down |
Shared Property Editor Components for Combo Box and Text Field ​
| Component | Target Object | Related API | Change Event AnnotUpdatedType FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:widget-format-category-selector | PDFFormField | setFormatAction removeFormatAction getFormatActionInfo | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FORMAT_ACTION | Drop-down list | Sets the display format of Text Field and Combo Box. Must be used together with 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 | ... | ... | Composite component | Edits the detailed configuration of different display formats for Text Field and Combo Box. The visibility of these components should be controlled according to the format selected in form-designer-v2:widget-format-category-selector |
form-designer-v2:widget-format-category-tip | - | - | - | Static text | Displays different tip text according to the format type selected in form-designer-v2:widget-format-category-selector |
form-designer-v2:validation-action-editor | PDFFormField | setValidateAction getValidateActionInfo | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.VALIDATE_ACTION | Composite component | Configures validation rules for Text Field and Combo Box |
form-designer-v2:calculate-action-editor | PDFFormField | setCalculateAction getCalculateActionInfo | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.CALCULATE_ACTION | Composite component | Configures calculation rules for Text Field and Combo Box |
Shared Property Editor Components for Radio Button and Check Box ​
| Component | Target Object | Related API | Change Event AnnotUpdatedType FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:normal-caption-selector | Widget | setNormalCaption getNormalCaption | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetNormalCaptionUpdated | Drop-down list | Sets the button style of Radio Button and Check Box |
form-designer-v2:export-value-editor | Widget | setExportValue getExportValue | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetExportValueUpdated | Input box | Sets the export value of Radio Button and Check Box |
form-designer-v2:checked-by-default-checkbox | PDFFormField | setCheckedByDefault isCheckedByDefault | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.CHECKED_BY_DEFAULT | Checkbox | Sets whether Radio Button and Check Box are selected by default |
Form Button Property Editor Components ​
| Component | Target Object | Related API | Change Event AnnotUpdatedType FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:push-button-layout-selector | Widget | setIconCaptionRelation getIconCaptionRelation | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetIconCaptionRelationUpdated | Drop-down list | Sets the layout of the icon and text in Push Button |
form-designer-v2:push-button-show-icon-fit-dialog-button | Widget | setIconFitOptions getIconFitOptions | - | Button | Opens the form-designer-v2:icon-fit-dialog dialog when clicked |
form-designer-v2:icon-fit-dialog | Widget | setIconFitOptions getIconFitOptions | - | Dialog | Sets the icon scaling mode of Push Button |
form-designer-v2:push-button-behavior-selector | Widget | setHighlightingMode getHighlightingMode | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetHighlightingModeUpdated | Drop-down list | Sets the highlight mode of Push Button after the mouse is pressed |
form-designer-v2:push-button-caption-editor | Widget | setMKCaption getMKCaptionOptions | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetCaptionUpdated | Input box | Sets the text displayed by Push Button in different states. The "state" is determined by form-designer-v2:push-button-icon-caption-position-selector |
form-designer-v2:push-button-icon-editor | Widget | setMKIcon removeMKIcon getMKIcon getMKIconOptions | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetIconUpdated | - | Previews and updates the icons of Push Button in different states, including mouse down, mouse up, and mouse enter. The state is determined by form-designer-v2:push-button-icon-caption-position-selector, so these components must be used together |
form-designer-v2:push-button-icon-caption-position-selector | Widget | - | - | Selector | Used together with form-designer-v2:push-button-caption-editor and form-designer-v2:push-button-icon-editor to specify different states of Push Button, including mouse down, mouse up, and mouse enter. form-designer-v2:push-button-caption-editor and form-designer-v2:push-button-icon-editor are then used to set the corresponding text and icon for each state |
Text Field Property Editor Components ​
| Component | Target Object | Related API | Change Event AnnotUpdatedType FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:text-field-alignment-selector | Widget | setAlignment getAlignment | DataEvents.annotationUpdated AnnotUpdatedType.formWidgetAlignmentUpdated | Drop-down list | Sets the text alignment of Text Field |
form-designer-v2:text-field-default-value-editor | PDFFormField | setDefaultValue getDefaultValue | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.DEFAULT_VALUE | Input box | Sets the default value of Text Field |
form-designer-v2:text-field-scroll-long-text-checkbox | PDFFormField | describeFieldFlags updateFlagByOptions setFlags getFlags | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | Checkbox | Enables scrolling long text. When Text Field uses a fixed font size and the content exceeds the text box size, this determines whether the text should automatically scroll with the cursor so the full content can be displayed |
form-designer-v2:text-field-max-length-editor | PDFFormField | describeFieldFlags updateFlagByOptions setFlags getFlags | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | Checkbox + input box | Sets whether the text length of Text Field is limited and allows a maximum length to be specified |
form-designer-v2:text-field-password-checkbox | PDFFormField | describeFieldFlags updateFlagByOptions setFlags getFlags | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | Checkbox | Sets whether Text Field is a password box. Once enabled, spell check, comb formatting, and multiline input cannot be set |
form-designer-v2:text-field-check-spelling | PDFFormField | describeFieldFlags updateFlagByOptions setFlags getFlags | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | Checkbox | Sets whether spell check is enabled for Text Field. Once enabled, it cannot be set as a password box |
form-designer-v2:text-field-comb-of-editor | PDFFormField | describeFieldFlags updateFlagByOptions setFlags getFlags | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | Checkbox + input box | Sets Text Field as a comb field and specifies the number of comb characters. Once enabled, other options become unavailable, including scrolling long text, limiting text length, password box, spell check, and multiline input |
form-designer-v2:text-field-multiline-checkbox | PDFFormField | describeFieldFlags updateFlagByOptions setFlags getFlags | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | Checkbox + input box | Sets Text Field as multiline. Once enabled, Text Field cannot be set as a password box and multiline input box |
Combo Box Property Editor Components ​
| Component | Target Object | Related API | Change Event AnnotUpdatedType FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:combo-box-edit-checkbox | PDFFormField | updateFlagByOptions | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | Checkbox | Sets whether Combo Box is editable |
List Box Property Editor Components ​
| Component | Target Object | Related API | Change Event AnnotUpdatedType FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:list-box-multille-selection-checkbox | PDFFormField | updateFlagByOptions | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | Checkbox | Sets whether List Box allows multiple selection |
Radio Button Property Editor Components ​
| Component | Target Object | Related API | Change Event AnnotUpdatedType FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:radio-button-unison-checkbox | PDFFormField | updateFlagByOptions describeFieldFlags | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.FLAGS | Checkbox | Sets whether Radio Button instances with the same name and value are selected together |
Signature Field Property Editor Components ​
| Component | Target Object | Related API | Change Event AnnotUpdatedType FormFieldPropertyName | Component Type | Description |
|---|---|---|---|---|---|
form-designer-v2:signed-action-editor | PDFSignature | setMDPAction getMDPAction | DataEvents.formFieldPropertyUpdated FormFieldPropertyName.SIGNATURE_MDP_ACTION | Composite component | Edits the MDP configuration of signature fields |
Based on the built-in form property editor components above, developers can quickly build a customized UI layout for editing form properties. For a better understanding, you can refer to the sample included in the SDK package: /examples/UIExtension/form-properties-editor/index.html.
Version Compatibility ​
Minimum supported version: Foxit PDF SDK for Web 11.0.0