JSON form

SchemaForm is a tool for generating forms based on JSON Schema. SchemaForm will be mapped into different form items according to valueType.

Tips: If you encounter a stuck problem or have higher performance requirements, you can reference example.


SchemaForm provides the same API as ProForm, and adds some APIs, the following SchemaForm new APIs.

Field nameTypeDescription
layoutTypeProFormLayoutTypeForm layout mode used
stepsStepFormProps[]The distributed form configuration in layoutType=steps needs to configure columns to be used as an array
columnsProFormColumnsType | ProFormColumnsType[]The definition of the form is generally a json object. If it is a distributed form, it needs to be generated using a json array Multiple forms
shouldUpdate(newValues: Record<string, any>, oldValues: Record<string, any>) => boolean | booleanFine-grained control whether to render.
When it is true the form items are automatically re-rendered.
When it is false will not update the form item, but can use dependencies to trigger the update.
When it is function, judge whether to re-render according to the return value Renders the form item, equivalent to directly assigning true or false. Reference Example


Field nameDescription
FormProForm is the basic form type
ModalFormPop-up form, after configuration, it supports all configurations of ModalForm
DrawerFormDrawer form, after configuration, it supports all configurations of DrawerForm
StepsForm|StepFormAfter configuration, it is a step-by-step form. There are two modes: one is to use steps and columns to generate, the other is to use layoutType=StepsForm to nest layoutType=StepForm To achieve
LightFilterLightweight filtering, after configuration, it supports all configurations of LightFilter
QueryFilterQuery form, after configuration, all configurations of QueryFilter are supported
EmbedEmbedded mode, only generates form items, does not generate Form, can be mixed with other forms

Schema definition

The most important thing about the SchemaForm form is the type definition of the Schema. We use the same form definition as the table, while extending some fields.

Field nameTypeDescription
keyReact.keyDetermine the unique value of this column, generally used in the case of repeated dataIndex
dataIndexReact.key | React.key[]The key mapped to the entity, the array will be converted [a,b] => Entity.a.b
valueTypeProFieldValueTypeThe rendering method of data, we have part of it, you can customize the valueType
titleReactNode |(props,type,dom)=> ReactNodeThe content of the title, which is label in the form
tooltipstringAn icon will be displayed next to the title, and it will be displayed after the mouse is floating
valueEnum(Entity)=> ValueEnum | ValueEnumSupport object and Map, Map supports other basic types as keys
fieldProps(form,config)=>fieldProps| fieldPropsThe props passed to the rendered component, and also passed when customizing
formItemProps(form,config)=>formItemProps | formItemPropsConfiguration passed to Form.Item
renderText(text: any, record: Entity, index: number, action: ProCoreActionType) => anyThe modified data will be consumed by the rendering component defined by valueType
render(dom,entity,index, action, schema) => React.ReactNodecustom read-only mode dom, read-only mode managed by render method only, edit mode needs to use renderFormItem
renderFormItem(schema,config,form) => React.ReactNodeCustom edit mode, return a ReactNode, will automatically wrap value and onChange. If it returns false,null,undefined, the item will not be displayed It is recommended to use dependent components to control whether to render or not
request(params,props) => Promise<{label,value}[]>Request network data remotely, generally used to select class components
paramsRecord<string, any>The additional parameters passed to request will not be processed by the component, but changes will cause request to request data again
dependenciesstring | number | (string | number)[]After the dependent values changes, trigger renderFormItem, fieldProps, formItemProps to re-execute, and inject values into params example
hideInDescriptionsbooleanHide in descriptions
hideInFormbooleanHide in Form
hideInTablebooleanHide in Table
hideInSearchbooleanHide in the query form of Table
columnsProFormColumnsType[] | (values) => ProFormColumnsType[]nested,when valueType is dependency ,please use (values) => ProFormColumnsType[], other valueType use ProFormColumnsType[]
rowPropsPassed to Row when grid mode is enabled, Applies only to ProFormGroup, ProFormList, ProFormFieldSetRowProps
colPropsPassed to Col when grid mode is enabledColProps

Code example

JSON to generate the form