Form Builder
The form builder is the visual designer for a Form view. Open it from the admin panel: navigate to a feature → form view → "Configurar view".
It opens as a dialog with two modes, selectable from the top toggle: Auto and Avançado.
Auto mode
Auto mode is the quick-edit path. It does not require familiarity with layout concepts.
- 1/2 columns toggle — switches the form between single-column and two-column layout globally.
- Field visibility chips — each field is shown as a chip; click to toggle whether it appears in the form.
- Reorder — drag chips to change the field order within a section.
When you are done, click "Guardar" to save and close. An isDirty chip appears in the header whenever there are unsaved changes.
Avançado mode
Avançado mode gives full control over layout. The dialog splits into three panes:
| Pane | Width | Purpose |
|---|---|---|
| Palette | 240 px | Draggable layout components and field columns |
| Canvas | flexible | Live layout being designed |
| Properties | 280 px | Settings for the selected canvas item |
Building the layout
Drag items from the palette onto the canvas:
| Palette item | What it creates |
|---|---|
| Section | A collapsible group of rows |
| Row 1-col | A single-column row inside a section |
| Row 2-cols | A two-column row inside a section |
| Toolbar | A toolbar row for action buttons |
| Field columns | A field cell, placed into an empty row slot |
| "+ Novo campo" | Creates a new Featurecolumn inline via a dialog, then places it |
Click any item on the canvas to select it and see its settings in the Properties pane.
Field properties
When a field cell is selected, the Properties pane exposes:
| Setting | Description |
|---|---|
| Width | widthCode — how much horizontal space the field occupies in its row |
| Help text | Short guidance shown below the field input |
| Required | Override whether the field must be filled before saving |
| Default value | Pre-fill value when creating a new record |
| Visibility rules | Conditions under which the field is shown or hidden |
Canvas actions
- Collapse / expand section — click the chevron on a section header.
- Duplicate / delete — open the triple-dot menu (⋮) on any canvas item.
- Undo / redo — Cmd+Z / Cmd+Shift+Z, up to 20 operations.
Preview
Click the eye icon to open the preview pane. It renders a live FormDefaultView and updates within 200 ms of any layout change.
Wizard mode
Enable the Wizard mode toggle to render tabs as numbered steps (Step 1, Step 2, …) at runtime with Back / Next / Submit navigation. Disable to return to the standard tab layout.
Tips
- Press / at any time to focus the palette search and filter available components by name.
- Undo history holds a maximum of 20 operations. Changes beyond that cannot be undone.
- The isDirty chip in the header is a reminder that changes have not been saved. Navigating away without saving discards them.
- "+ Novo campo" triggers a field-creation dialog and places the new field on the canvas when the dialog confirms. If the dialog is cancelled or times out (5 s), the pending drop is discarded.
- Preview reflects the form as end users will see it, including conditional visibility rules and wizard chrome.