Design and Development of a Low-Code Form Generation Platform

In many business scenarios, building a workflow requires stages such as project initiation, development, and acceptance, which can be time‑consuming even for simple cases. To address the lack of unified management and archiving, a low‑code form generation platform was built on top of the open‑source project VueFormMaking (https://github.com/GavinZhuLei/vue-form-making).

The platform enables template‑based and configurable forms, improving efficiency and traceability. Its core is a drag‑and‑drop interface combined with simple configuration to generate reusable form templates.

Core Functionality Development

The tool consists of three main parts: form‑item component development, form‑template configuration page, and form‑template rendering page. Using VueFormMaking as a reference, the following components are described:

Form‑Item Component Development

Components are described by JSON that defines functionality, style, and events. The JSON is parsed and bound to component props or events, providing high reusability and cross‑library compatibility.

Basic components (e.g., input ) have a scheme with type and options . The type selects the rendering component, while options map to the component’s props.

Advanced components (file upload, tree selector) follow the same principle with more complex JSON.

Layout/container components (grid) store child components in a columns array, each column containing its own component scheme.

Form‑Template Configuration Page

The page contains three sections: a component store, a form‑structure configuration area (drag‑and‑drop), and an options editor for each component. Users can assemble forms by dragging components from the store into the canvas and then edit their options.

Drag‑and‑Drop Implementation

One‑dimensional drag‑and‑drop is realized with Vue.Draggable , using the same group prop for cross‑list movement. Multi‑level nested drag‑and‑drop is achieved by adding Vue.Draggable to the inner containers of layout components, enabling components to be dragged into grid cells.

Form Rendering Component

During rendering, component options are bound to props via v‑bind and values are synchronized with v‑model . On submission, the form iterates over all items to collect their bound values. Additional concerns include validation, visibility control, and recursive traversal of nested layout components.

Maintenance and Iteration Strategies

When component schemas evolve (e.g., adding a prefix field to an input component), a flat configuration structure allows simple updates with Object.assign . Deeply nested structures can cause overwriting issues; therefore, the platform advocates flattening configuration fields and using deep‑clone utilities (e.g., lodash.cloneDeep ) to avoid shallow‑copy side effects.

Style Optimization

Consistent spacing, configurable padding/margin, and v‑bind:style are introduced to improve visual alignment. Manual style reviews and dedicated time slots for UI adjustments are recommended.

Testing and Quality Assurance

Self‑testing is emphasized, with clear boundaries for each iteration: component development, template configuration page, or form‑filling page. Limiting the scope of changes reduces risk to existing templates.

Code Pitfalls

Shallow copies performed by Vue.Draggable events can cause unintended data sharing between component instances. Using lodash.cloneDeep for deep copying resolves this issue, especially for nested layout components that require recursive cloning.

Conclusion

The development of a low‑code form platform requires thorough understanding of page composition, workflow, component architecture, and iterative maintenance. By adopting a modular, flat configuration, consistent styling, rigorous testing, and careful handling of data copies, the platform can achieve high maintainability, scalability, and reliability.