Table of contents

background

Forms are widely used in actual business. Its main function is to enter information and provide the basis for business digitization. There are a large number of forms in various middle-end systems. It can be seen from its functional positioning that many middle-end systems mainly rely on server-side development, and the functions of the front-end are mainly display and information entry. However, in actual business development, a large amount of development resources must be invested.

Based on the concept of reducing costs and increasing efficiency, it is very necessary to introduce dynamic forms. Form configuration can speed up front-end development or empower server developers.

In the process of developing a smart page building platform - smart PG (pgting) , we designed and developed an open source dynamic form generator forake, which supports drag and drop to generate forms.

Introduction:

formake is a dynamic form generator, developed based on react (above 16.10), antd (5.x), inherits the antd component interface, and adds extensions on this basis. The library provides a variety of application methods. You can pass in json to generate a form, or generate some forms based on json, and dynamically embed the rest.

formake has two core points: one is event configuration, and the other is complex nesting. Its event configuration is inspired by react, react uses data objects to describe pages, and formake uses data objects to describe events. Secondly, formake supports multiple forms of nested combinations of forms. After mastering the api, you can quickly generate different types of forms.

formake provides a drag-and-drop editor, which can generate a form DSL by dragging and dropping, eliminating the trouble of configuring json.

formake Chinese documentation:
https://www.pgting.com/pg-doc/formake

formake editor address: Wisdom PG

The following is an example of the form generated by the formake configuration:

basic use

import React from 'react';
import { GenerateForm, useWatchForm } from 'formake';
// ...
const [form] = useWatchForm(); // 也可以使用antd useForm, useWatchForm不支持扩展

return (
  <>
    <GenerateForm
      formData={formData}
      labelCol={
   
   { span: 6 }}
      wrapperCol={
   
   { offset: 1 }}
      form={form}
      onValuesChange={onValuesChange}
      initialValues={initVal}
    />
  </>
);

nested form

Common form nesting forms in actual business are as follows:

Multiple form items per row
The form has multiple columns, and each column has multiple form items
There are tab switches in the form, and there are multiple form items under each tab
The form item is a list, and there are multiple form items in each list item
other form nesting

Based on business scenarios and technical abstraction, formake provides four form item containers, namely:

rowContainer row container
colContainer column container
tabContainer tab switch container
listContainer list container

The above four containers can be nested with each other, and there is no hierarchical limit. During configuration, forms can be quickly generated according to actual business needs.

Special note: listContainer does not support nesting listContainer itself, and there are no other restrictions.

Example:

A simple demo, such as two form items in one row, can be configured as follows:

[
  {
    "marktype": "rowContainer",
    "title": "rowContainer",
    "param": "param_848636",
    "required": true,
    "items": [
      {
        "marktype": "input",
        "title": "input",
        "label": "输入框",
        "disabled": false,
        "rules": [],
        "eventConfig": {
          "filter": [],
          "modify": []
        },
        "placeholder": "",
        "id": 1685199851734,
        "param": "param_851734"
      },
      {
        "marktype": "inputNumber",
        "title": "inputNumber",
        "label": "数字输入",
        "disabled": false,
        "rules": [],
        "eventConfig": {
          "filter": [],
          "modify": []
        },
        "placeholder": "",
        "id": 1685199853300,
        "param": "param_853300"
      }
    ],
    "label": "",
    "id": 1685199848637,
    "expanded": true,
    "column": 2
  }
]

Complex form:

See formake Chinese documentation for specific usage

Drag and drop to generate form

There are many dynamic form products with good functions, but in practical applications, configuring json is also very cumbersome, especially for some complex forms. Formake provides a drag-and-drop editor, which can generate forms by dragging and dropping.

Editor address: formake editor

event configuration

formake uses the form DSL to describe the side effects of events.

formake abstracts events. In general business, form events can be summarized into the following points:

1. Hide other form items
2. Modify the value of other forms
3. Disable other form items
4. Modify the validation rules of other items
5. Modify the options of other form items...

These operations ultimately have side effects on the form, and these side effects affect the view through react to operate the state. Relatively, these states cause the form to change. Formake further abstracts, omits state, listens to values and events, dynamically modifies the form DSL, and directly uses the form DSL to change the description event to change the view.

Event DSL configuration in formake

interface EventConfig {
  filter: Array<
    {
      triggerValue: Array<string>;  // 触发值
      hideFields: Array<string>;    // 隐藏的表单项的param
    }
  >,
  modify: Array<{
    {
      triggerValue: Array<string>;   // 触发值
      modifyField: string;           // 修改的字段
      newValue?: any;                // 被修改表单项的新值
      newFormItemConfig?: {          // 表单项配置更改后的属性，更改什么就填入什么属性
        disabled: boolean;
        // ...
      }
    }
  }>
}

filter is used to hide the form item modify is used to describe the modified form item

demo

{
  marktype: 'radio',
  label: '是否远程',
  param: 'isOrigin',
  eventConfig: {
    filter: [
      {
        triggerValue: ['0'],
        hideFields: ['url', 'method', 'freshTime'],
      }
    ],
    modify: [
      {
        triggerValue: ['1'];
        modifyField: 'method';
        newFormItemConfig: {
          options: [
            {
              label:'get',
              value: '0'
            },
            {
              label:'post',
              value: '1'
            }
          ]
          // ...
        }
      }
    ],
  }
}

The above configuration refers to: When the value of the isOrigin field is '0', hide the field ['url', 'method', 'freshTime'] When the value of the isOrigin field is '1', modify the method field option to ['get' , 'post']

formake extension

formake extends antd form useForm(), useForm() => useWatchForm

useWatchForm is based on the Antd useForm package, inherits all the functions of useForm, and adds functions such as the method of setting the value of the object, the method of obtaining the value of the object, and value change monitoring.

1, useWatchForm monitoring function

When the form value is updated, formake automatically initiates value detection, automatically updates the form configuration file and then affects the view. The latest form configuration file can be obtained through form.store.activeFormData

2，setFormatFieldsValue 和 getFormatFieldsValue

The form values obtained by form.getFieldsValue() and form.setFieldsValue() are flat. For some complex business scenarios, flattening is not conducive to business understanding and setting and obtaining form values.

formake provides setFormatFieldsValue and getFormatFieldsValue:

getFormatFieldsValue extends from getFieldsValue, and can directly get the same data structure as the configuration file when getting the value

setFormatFieldsValue is extended from form.setFieldsValue, which supports setting values as nested objects, and useWatchForm will automatically perform flattening processing according to the configuration file.

setFormatFieldsValue and getFormatFieldsValue are mainly used in the scenario where the above nested components are nested with each other.

formake extension: https://www.pgting.com/pg-doc/formake/extend

formake open source

Currently formake is open source, if you have a good idea or want to participate, please join us.

formake github addressgithub.com/AliSnowaroma/formake

formake document https://www.pgting.com/formake

Wisdom PG (pgting) https://www.pgting.com

antd extends dynamic form formake, supports event configuration and complex nesting