What is a dynamic form system?

Dynamic forms refer to using drag and drop components to create simple Form pages

1. Front-end core implementation

  • Technical architecture: React+TS+Antd

  • Drag and drop controls

  • The target Container

  • Set properties

  • Routing setting

2. Back-end interface implementation

  • Technical architecture: NodeJS+KOA+Mongo

  • Drag and drop the control table

  • Drag and drop the query interface of the control

  • Form base table

  • Add, delete, change and check interface of form list

  • Form property sheet

  • Add and modify form attributes

3. The implementation page is as follows

4. Drag-and-drop component page implementation and table structure

  • Page implementation

    Due to time, Input, TextArea, InputNumber components are mainly implemented at present.

  • Dragdrop table

5. Drag and drop to generate the form and set the properties

  • Logical combing

    • The control is selected when it is dragged into the form Container.
    • Set the control property value to be mounted on the dragged form.
    • Click a control to switch the selected state;
    • Switch the selected state, control properties will be switched accordingly;

  • technology

    • Use H5 drag-and-drop feature

  • Formattr table
    • Note: parentId is the ID in formBase, which associates the parent table (FormBase) with its child table (Formattr)

6. List of forms

Is the entry to create a list of forms, mainly for CRUD, and status update functions.

  • Page implementation

  • Formbase table

Why write a dynamic form system?

  • The initial reason was that to improve development efficiency, simple form requirements could be generated directly from the configuration of the page, and business requirements could be implemented without additional coding.

  • The essence comes from the emergence of the concept of low code platform: low code development platform (LCDP) is a development platform that requires no coding (zero code) or can generate applications quickly with a small amount of code. The visual approach to application development enables developers of all levels of experience to create Web and mobile applications using drag-and-drop components and model-driven logic through a graphical user interface.

How to use the dynamic form system?

1. Form management

The main functions are as follows:

  • The new form

  • Add basic form properties, click OK, jump to create form page

  • To create the form, set the form properties page, and click Submit

  • Submit the new form and go to the form management list page

  • Modify, preview, modify status, delete

2. Menu management (including configuring page routing)

  • Added level-1 menu management, including menu names and routing paths corresponding to menus

  • Added second-level menu management, including menu name and routing path corresponding to the menu (formId also needs to be added for dynamic forms)

  • Edit, delete

  • The configuration takes effect only after you log in to the system again

3. Management of new configuration forms

For example, the newly configured form page includes project information page, annotation process configuration page, and process allocation information page

The second-level menu of project management is as follows:

  • The project management

    • Project information
    • With the process
    • Process allocation information

  • Form management list

4. Value storage problems with the newly configured form

For example, the annotation flow configuration page is configured

  • The new data

  • Modify the data

Four, afterword.

The reason why I picked up the project (I wrote native JS once before, and now implement React) was to familiarize myself with the pattern again and prepare for the subsequent dynamic templates for the company’s annotation platform. After this warm up, I did learn a lot of new knowledge, such as using KOA to write some CRUD back-end interface, using MongoDB to create the corresponding database table, let me learn a lot. In the past, I was only responsible for the front-end implementation, and the corresponding back-end interface was provided by the back-end students. After this development, I experienced the thinking process of the full stack engineer for the whole system implementation, which was also a great breakthrough for myself. Therefore, I can really learn new things.

FE code:

https://github.com/yji234/dynamicform/tree/feature-v1.0-yangjiao
Copy the code

Interface code:

https://github.com/yji234/dynamicFormServer
Copy the code