Skip to content

表单属性编辑组件

内置表单属性编辑组件是 福昕 PDF SDK Web 版 中预设的一些常用表单属性编辑组件,例如字段名、表单域的可见性,以及外观设置 ( 外框颜色、填充颜色、文本字体和字号) 等。这些内置组件允许用户在无需编写更多代码的情况下,便捷地自定义表单属性对话框布局。

以下根据表单域类别进行分类,列出了 福昕 PDF SDK Web 版 中内置的表单属性编辑组件。

通用表单属性编辑组件

组件目标对象关联 API变更事件
AnnotUpdatedType/FormFieldPropertyName
组件类型说明
form-designer-v2:field-name-editorPDFFormFieldsetName
getName
DataEvents.formFieldPropertyUpdated/ FormFieldPropertyName.NAME输入框编辑表单字段名称
form-designer-v2:field-alternate-name-editorPDFFormFieldsetAlternateName
getAlternateName
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.ALTERNATE_NAME
输入框编辑表单字段备用名称
form-designer-v2:widget-visible-type-selectorWidgetsetFlags
getFlags
DataEvents.annotationUpdated
AnnotUpdatedType.flagsUpdated
下拉框设置表单域的可见性:可见、隐藏、可见但不可打印、隐藏但可打印
form-designer-v2:field-orientation-selectorWidgetsetRotation/ getRotationDataEvents.annotationUpdated
AnnotUpdatedType.formWidgetRotationUpdated
下拉框设置表单域的显示方向 (旋转度数)
form-designer-v2:field-readonly-checkboxPDFFormFieldsetFlags
updateFlagByOptions
describeFieldFlags
isReadonly
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.FLAGS
复选框设置表单域是否只读
form-designer-v2:field-required-checkboxPDFFormFieldsetFlags
updateFlagByOptions
describeFieldFlags
isRequired
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.FLAGS
复选框设置表单域是否必填,仅对 CheckBox、 RadioBox、TextField 有效
form-designer-v2:widget-border-color-pickerWidgetsetMKBorderColor
getMKBorderColor
DataEvents.annotationUpdated
AnnotUpdatedType.formWidgetMKBorderColorUpdated
拾色器设置表单域的边框颜色
form-designer-v2:widget-line-style-selectorWidgetsetBorderStyle
getBorderStyle
DataEvents.annotationUpdated
AnnotUpdatedType.borderStyleUpdated
下拉框设置表单域的外框线型
form-designer-v2:widget-fill-color-pickerWidgetsetMKFillColor
getMKFillColor
DataEvents.annotationUpdated
AnnotUpdatedType.formWidgetMKFillColorUpdated
拾色器设置表单域的填充颜色
form-designer-v2:widget-line-thickness-selectorWidgetsetBorderWidth
getBorderWidth
DataEvents.annotationUpdated
AnnotUpdatedType.borderStyleUpdated
下拉框设置表单域的外框线宽
form-designer-v2:widget-text-size-selectorWidgetsetTextSize
setDefaultAppearance
getTextSize
getDefaultAppearance
DataEvents.annotationUpdated
AnnotUpdatedType.defaultAppearanceUpdated
可输入的下拉框设置表单域的文本字号
form-designer-v2:widget-text-color-pickerWidgetsetTextColor
setDefaultAppearance
getTextColor
getDefaultAppearance
DataEvents.annotationUpdated
AnnotUpdatedType.defaultAppearanceUpdated
拾色器设置表单域的文本颜色
form-designer-v2:widget-font-selectorWidgetsetDefaultAppearance
getFont
DataEvents.annotationUpdated
AnnotUpdatedType.defaultAppearanceUpdated
下拉框设置表单域的文本字体
form-designer-v2:field-text-directionWidgetsetDirectionRTL
getDirectionRTL
DataEvents.annotationUpdated
AnnotUpdatedType.formWidgetDirectionRTLUpdated
单选框设置表单域显示方向 (从左到右/从右到左)
form-designer-v2:widget-position-propertiesWidgetsetRect
getRect
DataEvents.annotationUpdated
AnnotUpdatedType.rectUpdated
复合面板组件设置表单域位置和大小,允许用户指定单位以及固定宽高来修改位置
form-designer-v2:lock-widget-checkboxWidgetsetFlags
getFlags
DataEvents.annotationUpdated
AnnotUpdatedType.flagsUpdated
复选框设置表单域是否锁定,锁定后的表单域的所有属性都将不可编辑
form-designer-v2:widget-action-creatorWidgetAdditionalAction.addActionDataEvents.annotationUpdated
AnnotUpdatedType.additionalActionDataUpdated
复合组件允许用户选择不同的触发方式和动作类型,以便为表单域添加新的动作
form-designer-v2:widget-action-treeWidgetmoveActionOrder
updateAction
AdditionalAction.updateActionData

removeAction
AdditionalAction.removeAction
DataEvents.annotationUpdated

AnnotUpdatedType.actionDataUpdated
AnnotUpdatedType.additionalActionDataUpdated
复合组件展示表单域的动作列表,并允许用户对选中的动作进行移动、编辑和删除操作

表单组合框、列表框共用属性编辑组件

组件目标对象关联 API变更事件
AnnotUpdatedType
FormFieldPropertyName
组件类型说明
form-designer-v2:combo-list-box-item-list-selectorPDFFormFieldsetOptions
deleteOptions
insertOption
addOption
updateOption

getOptionsSize
moveOption
selectOption
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.CHOICE_OPTION_ITEMS
列表框展示 Combo Box 或者 List Box 的选项列表,也可以设置当前选中项。配合
form-designer-v2:combo-list-box-item-editorform-designer-v2:combo-list-box-add-item-buttonform-designer-v2:combo-list-box-export-value-editor
form-designer-v2:combo-list-box-delete-item-buttonform-designer-v2:combo-list-box-move-item-up-button,form-designer-v2:combo-list-box-move-item-down-button
组件使用,可以编辑、添加、删除、移动 Combo Box 或者 List Box 的选项
form-designer-v2:combo-list-box-item-editorPDFFormFieldupdateOptionDataEvents.formFieldPropertyUpdated
FormFieldPropertyName.CHOICE_OPTION_ITEMS
输入框向 Combo Box 或 List Box 添加选项,同时也可以编辑已选中的选项
form-designer-v2:combo-list-box-add-item-buttonPDFFormFieldaddOption...按钮向 Combo Box 或 List Box 添加选项, 需要配合 form-designer-v2:combo-list-box-item-editorform-designer-v2:combo-list-box-export-value-editor 组件使用
form-designer-v2:combo-list-box-export-value-editorPDFFormFieldaddOption
updateOption
...输入框设置 Combo Box 或者 List Box 选项的导出值, 需要配合 form-designer-v2:combo-list-box-item-editorform-designer-v2:combo-list-box-add-item-button 组件使用
form-designer-v2:combo-list-box-delete-item-buttonPDFFormFielddeleteOption...按钮删除当前选中的 Combo Box 或者 List Box 的选项
form-designer-v2:combo-list-box-move-item-up-buttonPDFFormFieldmoveOption...按钮移动当前选中的 Combo Box 或者 List Box 的选项
form-designer-v2:combo-list-box-move-item-down-buttonPDFFormFieldmoveOption...按钮移动当前选中的 Combo Box 或者 List Box 的选项

表单组合框、文本框共用属性编辑组件

组件目标对象关联 API变更事件
AnnotUpdatedType
FormFieldPropertyName
组件类型说明
form-designer-v2:widget-format-category-selectorPDFFormFieldsetFormatAction
removeFormatAction
getFormatActionInfo
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.FORMAT_ACTION
下拉框设置 Text Field 和 Combo Box 的显示格式, 需要 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 配合使用
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......复合组件编辑 Text Field 和 Combo Box 的不同显示格式的详细配置。这些组件的显示或隐藏需要根据 form-designer-v2:widget-format-category-selector 所选的格式类型进行控制
form-designer-v2:widget-format-category-tip---静态文本根据 form-designer-v2:widget-format-category-selector 所选的格式类型显示不同的提示信息
form-designer-v2:validation-action-editorPDFFormFieldsetValidateAction
getValidateActionInfo
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.VALIDATE_ACTION
复合组件配置 Text Field 和 Combo Box 的校验规则
form-designer-v2:calculate-action-editorPDFFormFieldsetCalculateAction
getCalculateActionInfo
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.CALCULATE_ACTION
复合组件配置 Text Field 和 Combo Box 的计算规则

表单单选框、复选框共用属性编辑组件

组件目标对象关联 API变更事件
AnnotUpdatedType
FormFieldPropertyName
组件类型说明
form-designer-v2:normal-caption-selectorWidgetsetNormalCaption
getNormalCaption
DataEvents.annotationUpdated
AnnotUpdatedType.formWidgetNormalCaptionUpdated
下拉框设置 Radio Button 和 Check Box 的按钮样式
form-designer-v2:export-value-editorWidgetsetExportValue
getExportValue
DataEvents.annotationUpdated
AnnotUpdatedType.formWidgetExportValueUpdated
输入框设置 Radio Button 和 Check Box 的导出值
form-designer-v2:checked-by-default-checkboxPDFFormFieldsetCheckedByDefault
isCheckedByDefault
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.CHECKED_BY_DEFAULT
复选框设置 Radio Button 和 Check Box 是否默认被选中

表单按钮属性编辑组件

组件目标对象关联 API变更事件
AnnotUpdatedType
FormFieldPropertyName
组件类型说明
form-designer-v2:push-button-layout-selectorWidgetsetIconCaptionRelation
getIconCaptionRelation
DataEvents.annotationUpdated
AnnotUpdatedType.formWidgetIconCaptionRelationUpdated
下拉框设置 Push Button 的图标和文字的显示布局
form-designer-v2:push-button-show-icon-fit-dialog-buttonWidgetsetIconFitOptions
getIconFitOptions
-按钮点击后打开 form-designer-v2:icon-fit-dialog 对话框
form-designer-v2:icon-fit-dialogWidgetsetIconFitOptions
getIconFitOptions
-对话框设置 Push Button 的图标缩放方式
form-designer-v2:push-button-behavior-selectorWidgetsetHighlightingMode
getHighlightingMode
DataEvents.annotationUpdated
AnnotUpdatedType.formWidgetHighlightingModeUpdated
下拉框设置 Push Button 在鼠标按下后的高亮模式
form-designer-v2:push-button-caption-editorWidgetsetMKCaption
getMKCaptionOptions
DataEvents.annotationUpdated
AnnotUpdatedType.formWidgetCaptionUpdated
输入框设置 Push Button 在不同状态下显示的文本,其 "状态" 由 form-designer-v2:push-button-icon-caption-position-selector 组件决定
form-designer-v2:push-button-icon-editorWidgetsetMKIcon
removeMKIcon
getMKIcon
getMKIconOptions
DataEvents.annotationUpdated
AnnotUpdatedType.formWidgetIconUpdated
-用于预览和修改 Push Button 不同状态(包括鼠标按下、抬起和移入)下的图标, 其状态由 form-designer-v2:push-button-icon-caption-position-selector 组件指定,需要搭配两个组件使用
form-designer-v2:push-button-icon-caption-position-selectorWidget--选择框form-designer-v2:push-button-caption-editorform-designer-v2:push-button-icon-editor 组件一起使用,用于指定 Push Button 的不同状态 (包括鼠标按下、抬起和移入)。
form-designer-v2:push-button-caption-editorform-designer-v2:push-button-icon-editor 则用于设置对应状态下的文本和图标

表单文本框属性编辑组件

组件目标对象关联 API变更事件
AnnotUpdatedType
FormFieldPropertyName
组件类型说明
form-designer-v2:text-field-alignment-selectorWidgetsetAlignment
getAlignment
DataEvents.annotationUpdated
AnnotUpdatedType.formWidgetAlignmentUpdated
下拉框设置 Text Field 的文本对齐方式
form-designer-v2:text-field-default-value-editorPDFFormFieldsetDefaultValue
getDefaultValue
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.DEFAULT_VALUE
输入框设置 Text Field 的默认值
form-designer-v2:text-field-scroll-long-text-checkboxPDFFormFielddescribeFieldFlags
updateFlagByOptions
setFlags
getFlags
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.FLAGS
复选框滚动显示长文本:当 Text Field 字号设置为固定数值,并且内容长度超出文本框大小时,是否需要通过移动光标自动滚动文本内容以显示全部文本
form-designer-v2:text-field-max-length-editorPDFFormFielddescribeFieldFlags
updateFlagByOptions
setFlags
getFlags
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.FLAGS
复选框 + 输入框设置是否对 Text Field 的文本长度进行限制,并可以设定最大长度限制
form-designer-v2:text-field-password-checkboxPDFFormFielddescribeFieldFlags
updateFlagByOptions
setFlags
getFlags
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.FLAGS
复选框设置 Text Field 是否为密码框。开启此项后,不允许设置拼写检查、文本组合以及多行输入
form-designer-v2:text-field-check-spellingPDFFormFielddescribeFieldFlags
updateFlagByOptions
setFlags
getFlags
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.FLAGS
复选框设置 Text Field 是否开启拼写检查。开启此项后,不允许设置为密码框
form-designer-v2:text-field-comb-of-editorPDFFormFielddescribeFieldFlags
updateFlagByOptions
setFlags
getFlags
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.FLAGS
复选框 + 输入框设置 Text Field 为组合输入框,并设定组合的字符数。开启此项后,其他项将不可用,包括滚动显示长文本、限制文本长度、密码框、拼写检查以及多行输入
form-designer-v2:text-field-multiline-checkboxPDFFormFielddescribeFieldFlags
updateFlagByOptions
setFlags
getFlags
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.FLAGS
复选框 + 输入框设置 Text Field 为多行输入框。开启此项后,Text Field 将不能设置为密码框和多行输入框

表单组合框属性编辑组件

组件目标对象关联 API变更事件
AnnotUpdatedType
FormFieldPropertyName
组件类型说明
form-designer-v2:combo-box-edit-checkboxPDFFormFieldupdateFlagByOptionsDataEvents.formFieldPropertyUpdated
FormFieldPropertyName.FLAGS
复选框设置 Combo Box 是否允许编辑

表单列表框属性编辑组件

组件目标对象关联 API变更事件
AnnotUpdatedType
FormFieldPropertyName
组件类型说明
form-designer-v2:list-box-multille-selection-checkboxPDFFormFieldupdateFlagByOptionsDataEvents.formFieldPropertyUpdated
FormFieldPropertyName.FLAGS
复选框设置 List Box 是否允许多选

表单单选框属性编辑组件

组件目标对象关联 API变更事件
AnnotUpdatedType
FormFieldPropertyName
组件类型说明
form-designer-v2:radio-button-unison-checkboxPDFFormFieldupdateFlagByOptions
describeFieldFlags
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.FLAGS
复选框设置 Radio Button 是否同时选中具有相同名称和值的单选框

表单签名属性编辑组件

组件目标对象关联 API变更事件
AnnotUpdatedType
FormFieldPropertyName
组件类型说明
form-designer-v2:signed-action-editorPDFSignaturesetMDPAction
getMDPAction
DataEvents.formFieldPropertyUpdated
FormFieldPropertyName.SIGNATURE_MDP_ACTION
复合组件编辑签名字段的 MDP 配置

基于以上内置表单属性编辑组件,开发者能够快速地实现定制表单属性编辑的用户界面布局。为了帮助您更好地理解,您可以参考以下示例来获取更多信息: /examples/UIExtension/form-properties-editor/index.html

版本兼容性

最低支持版本:福昕 PDF SDK Web 版 11.0.0