Designing Dynamic Forms: A Frontend Approach by ZooTeam

Introduction

For B2B businesses, as the number of customers grows, the same page faces increasingly diverse form requirements, leading to many IF/ELSE statements and maintenance difficulties. Traditional solutions involve project splitting or code segmentation, both of which incur high maintenance costs.

What is a Dynamic Form

A dynamic form renders different form items based on a schema configured on the management side. It consists of two parts: the management side, which defines the schema and simple interactions, and the rendering side, which builds the UI according to that schema.

Implementation of Dynamic Forms

Form Configuration

The schema configuration aims to reduce integration and maintenance costs. The management side provides a drag‑and‑drop visual editor divided into four panels: component library, canvas, component property panel, and form view properties.

Component Library

The left‑hand library contains three types of components: container components (e.g., form, sub‑form, table‑form), basic components (13 built on Ant Design React components), and custom components that can be registered for business‑specific needs.

Canvas Panel

The canvas maintains component layout and supports drag‑and‑drop ordering, deletion, duplication, and preview. It is implemented with React‑DnD.

Component Configuration

When a component is selected on the canvas, its property panel renders the configurable fields. Below is an example schema for a simple component:

[{label: '是否可见',code: 'visible',widget: 'switchBtn',initialValue: true},{label: '是否可编辑',code: 'code',widget: 'switchBtn',initialValue: true,hide: 'exp: visible === false',required: true}]

The hide field uses an expression prefixed with exp: to conditionally hide the field based on other form values.

Container Attributes

Containers share attributes such as title, code, visibility, and a “skip” flag that determines data transparency. When skip is true, the nested form’s data is flattened, following the Formily open‑source approach.

{"title":"表单","type":"form","fields":[{"name":"name","label":"姓名"},{"title":"子表单","skip":true,"name":"item","type":"form","fields":[{"name":"object","label":"物品"},{"name":"brand","label":"品牌"}]}]}

With skip: false the returned data is nested; with skip: true it is flattened.

Form Rendering

The rendering side provides two components: a wrapper that fetches the schema.json and a main form component that renders UI based on the schema. Example usage:

import { FormPageWrap, MainForm } from './index';
@FormPageWrap({
  prefix: '/api/budget',
  getFormParams: (props) => { return {}; },
  getDataParams: (props) => { return {}; }
})
export default class FormPage extends Component {
  render() {
    return (
// extra content
// extra content
);
  }
}

The wrapper loads the schema, and MainForm dynamically creates the appropriate Ant Design components.

Pending Improvements

Asynchronous loading of custom components to avoid rebuilding the whole project for each new component.

Reusable configuration blocks for frequently used form sections.

Extraction and linkage of identical sections across pages to reduce maintenance cost.

Future Outlook

Second‑stage processing of schema data to support permissions and business configurations.

Using the schema as a data model for static data structures across business systems.

Decoupling rendering components from the management schema to enable lightweight dynamic forms.