Design Form

This guide explains how to create a form from scratch, including adding controls, adjusting the layout, and saving your design.

Create a New Form

1. Enter the Workspace: Navigate to Tools -> Form -> Form Design. You will enter a blank visual drag-and-drop canvas.
2. Arrange Form Structure: In the left Controls Panel, find the required control type (Text Box, Dropdown, etc.), then click or drag it into the central layout area. (See layout rules below).
3. Save and Store:
   • Once the design is complete, click the top right drawer/menu button and choose to save (upload) it.
   • The system will bring the structural tree data directly into a dedicated save interface.
4. Fill Basic Info: On the right panel, configure the key info for your newly designed form:
   • Name: Give an intuitive name, like "Equipment Inspection Record".
   • Type: Choose the business domain it belongs to (e.g., General, Development, Maintenance).
   • Description & Remark (Optional): For internal records.
5. Finalize: After verifying the info, click the Insert button in the bottom right corner to save!

Supported Control Types

Control Type	Usage Scenario
Text Box	Short text such as names or addresses.
Multiline Text	Long text such as remarks or descriptions.
Number Box	Numerical values like quantities or amounts.
Dropdown	Select one item from a preset list of options.
Date/Time	Select a date or a specific time with hours and minutes.
Color Picker	Pick a color value.
Radio/Checkbox	Yes/No or limited multiple-choice.

Advanced Layout: Containers

To prevent forms from becoming endlessly long flat lists, the system uses invisible "Containers" to manage page layouts:

1. Row Container

Used for horizontal alignment.

• You can drag a "Row" onto the canvas first, then drag smaller controls (like "Name", "Age") into this "Row".
• Controls placed inside a "Row" automatically shrink in width. This helps to tightly pack related data on a single line (e.g., Province on the left, City on the right).
• Adaptive width is supported. If elements exceed the screen width, horizontal scrolling will be enabled gracefully.

2. Column / Group

Used for vertical stacking or logical grouping. If you want to logically tie several complex inputs together (e.g. three different inspection records for a vehicle), use these.

💡 Container Nesting Rules

Layout containers follow strict structural safety rules:

• No Rows Inside Rows: The system prevents you from nesting one "Row" inside another "Row".
• Mutual Exclusion: For specialized controls (like mutually exclusive "Radio button groups"), it's recommended to place them alone in a dedicated row/column. The engine manages their internal states, but avoid mixing unrelated data objects in these specific layout containers.

Configure Control Properties

After selecting a control, you can configure its related properties:

• Label: The text name of the control displayed on the form.
• Required: If checked, users must fill in this field when submitting.
• Default Value (Optional): The pre-filled initial value.
• Options List (Dropdown only): Configure the available options data.

Save Design

After completing the FormDesignStructure editing, click the Save button.

• The saved form remains in the Draft status, and you can edit it at any time.
• Only Draft forms can have their content modified.

Note

To let other users fill out data using this template, you must publish it. See the "Publish Form" chapter.