Canvas Management
The canvas is where you build your window by placing and arranging fields. It uses a 12-column grid system, so every field you add takes up a configurable number of columns.
12-Column Layout
The canvas is divided into 12 columns. When you add a field, you set how many columns it spans,this controls its width relative to the row.
| Columns | Width | Items per row |
|---|---|---|
| 12 | Full width | 1 |
| 6 | Half width | 2 |
| 4 | One third | 3 |
| 3 | One quarter | 4 |
The layout is responsive. Fields re-align automatically when the screen is resized.
Fields
Drag and drop any of the following onto the canvas, then resize, relocate, or delete as needed.
| Field Type | Description |
|---|---|
| Data Types and Tools | text, number, date, checkbox, etc. |
| Foreign Key Fields | links to fields from other windows in the same system |
| Enumerations | predefined dropdown options |
| Inter-System Fields | fields from windows in other systems |
- Resize: drag the resize handle to adjust how many columns the field spans
- Relocate: drag the field header to move it to a new position
- Delete: click the delete icon to remove it from the canvas
Deleting a field from the canvas removes it from the window layout. If the field already has saved data, the data is not deleted but will no longer be visible in this window.
Fields Toolbar
Clicking any field on the canvas reveals a toolbar above it with quick actions.
The toolbar contains the following actions:
| Icon | Action | Description |
|---|---|---|
| ≡ | Label Alignment | Change the label alignment: left, center, or right |
| ● | Color / Icon | Change the color or icon of the field label |
| Type dropdown | Change Type | Switch to a compatible data type (e.g. Text to Text Area) |
| 👁 | Hide | Move the field to the Hidden Page |
| 🗑 | Delete | Remove the field and send it to the trash |
| CSS | Custom CSS | Apply custom CSS styles to the field |
| ⧉ | Copy | Duplicate the field on the canvas |
Hide moves the field to the Hidden Page, it stays part of the window but is no longer visible on the main canvas. To unhide, go to the Hidden Page and use the toolbar to bring it back.
Delete sends the field to the trash. To restore, open the trash from the canvas and click Restore.
Publishing
Click Publish to push the changes live to the application. Unpublished changes are only visible in the canvas editor.