JSON form

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

API

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

ProFormLayoutType

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
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
hideInDescriptionsbooleanHide in descriptions
hideInFormbooleanHide in Form
hideInTablebooleanHide in Table
hideInSearchbooleanHide in the query form of Table

Code example

JSON to generate the form

JSON to generate distributed forms

Embed in ProForm

Use ProFormDependency