Form Layout

The layout consists of tabs, sections, and columns into which you place fields and widgets.

How the Layout Is Structured

A form consists of tabs, a tab consists of sections, and a section contains fields and widgets. Each section has its own grid (1, 2, 3, 4, 6, or 12 columns), and each field inside it takes a portion of the section's width (shown in the designer as a percentage, e.g., 50% or 100%). You edit the layout on the Layout tab of the designer; see Designer Overview.

• A form must have at least one tab. A tab with no visible fields is hidden from the user at runtime.
• Each field can appear in the layout only once. A duplicate is a validation error and blocks saving.
• The Community edition supports up to 2 tabs. Additional tabs cannot be added (the + Tab button is disabled); see Licensing.

Tabs

Tabs split a long form into clear parts. If a form has only one visible tab, the tab strip is not displayed.

• Add: click + Tab after the last tab. A new tab starts with an empty section.
• Rename: choose Rename tab in the Tab options menu, or edit the Tab title field in the tab inspector.
• Order: Move left and Move right in the tab menu or inspector. Tabs are not reordered by dragging.
• Color and icon: Tab color (blue, green, orange, red, purple, teal, gray, or custom HEX color) and Tab icon (such as Overview, Documents, Finance, Tasks, People, Dates, History, Risks).
• Dynamic color: in the tab inspector, color can be derived from a selected field's value (for example, Approved in green, Rejected in red). Color can also be changed by a rule; see setColor action.
• Default behavior: Visible tab and Read-only (all fields in tab) toggles. A rule can change them at runtime (setVisible, setReadOnly). A tab can also have its own Visibility conditions.
• Delete: Delete tab removes the tab along with all its sections and fields. The designer shows the impact dialog first.

The icon key (icon on both tabs and sections) is matched case-insensitively and ignores surrounding whitespace, so Info and info show the same icon. In addition to menu keys, aliases work: checkmark, check, todo (same as task), finance, cash, budget (same as money), attach, attachment, attachments, files (same as folder), and kpi, analytics (same as chart). An unknown key renders as its first two characters.

Badges on a tab in the designer indicate that the tab is hidden, read-only, or controlled by rules.

Sections

A section groups related fields under a heading. Section properties are configured in the inspector after clicking the section header.

In the header of a section on a tab without columns, there is a 50% | 100% toggle for quick section width changes. Any other width (e.g., 67%) is shown as text with neither option selected; finer control is in the section inspector.

On a tab without columns, reorder sections using Move section up and Move section down in the Section options menu. Add a new section with + Add section.

Deleting with the Delete Key

On the Layout tab, pressing Delete deletes the currently selected field, widget, or section. It uses the same flow as the Delete button in the inspector, so an impact dialog for rules and scripts is shown before deletion. The key is inactive while typing in a text input or when a dialog or menu is open. Backspace does not delete anything. You can revert a deletion with Undo or Ctrl+Z in one step.

Columns and Field Width

Field Width in a Section

The grid has 12 units. Set field width in the field inspector (Width in section, colSpan from 1 to 12). Without an explicit setting, a field uses the section's grid: 6 units in a 2-column section, 3 units in a 4-column section. Newly added fields (dragged from the palette, added with +, or created as a new column) receive this default width. Full-width widgets (banner, image, related items, etc.) stay at 100%; narrower widgets (KPI, process button) receive the section's default width. On narrow screens (under 640 px), fields always stack full-width.

If you change Default field grid in the section inspector (1, 2, 3, 4, or 6 columns), field widths adapt: fields that currently have the previous default width (or no custom width) receive the new default. Full-width fields and fields with custom widths (e.g., 8 units) remain unchanged. The entire update is a single Undo step and applies only to the layout you are currently editing (shared or per-mode).

Tab Columns

To arrange sections side by side in independent columns (each column has its own stack of sections), choose Tab columns in the tab menu and pick a preset:

• 1 column (12),
• 1/2 + 1/2 (6 + 6),
• 1/3 × 3 (4 + 4 + 4),
• 2/3 + 1/3 (8 + 4), 1/3 + 2/3 (4 + 8),
• 1/4 + 3/4 (3 + 9), 3/4 + 1/4 (9 + 3),
• By rows (automatic): columns are created from current section widths.

Before converting, the designer shows a confirmation Split sections into columns?. Choosing Remove columns (stack rows) and confirming Remove column layout? removes the columns and stacks sections full-width. Both actions can be undone with Undo. In column mode, each column has a Column options menu (Add section to column, Delete column).

Reordering by Drag and Drop

• Fields and widgets can be added to a section by dragging from the palette (both Fields and Widgets tabs) or clicking "+". Existing items can be dragged by grabbing their row on the canvas: reorder within a section or move to another section on the same tab. Alternatively, use Move to a section in the inspector footer. To move a field to another tab, use Move to tab… in the Field options menu ("…" button on the field row): the field is placed at the end of the first section of the chosen tab and the designer switches to it. Tabs without sections are disabled in the menu.
• From the palette, drag a field into a section or click + next to it.
• Sections are dragged by the Drag section handle in the section header, within the tab or between columns in column mode. Alternatively, use the up/down actions in Section options. The Move to tab… command in the same menu moves the entire section to another tab (into the first column on a columned tab) and switches to it; the move can be undone with Undo.
• Tabs are reordered using Move left and Move right.

Every move is a single step and can be reverted with Undo.

Deleting and Rule Impact

Removing a field from the layout, deleting a section or tab, or deleting a rule first opens an impact dialog (for example, Remove field "Status"?). The dialog shows:

• the number of fields to be removed,
• rules that will become invalid (they will be kept, but not evaluated),
• scripts that reference the removed fields and will not be updated automatically.

Deleting fields therefore never loses rules. Invalid rules are flagged in the editor and can be restored by fixing the reference or reverting the deletion with Undo. A removed field returns to the palette and can be added again.

Per-Mode Layouts

By default, New, Edit, and Display modes use a shared layout. If you want them to differ (for example, showing only a summary in Display or a simplified version in New), create a custom mode layout. Technically, this corresponds to the modeLayouts setting.

1. In the bar above the canvas, click New, Edit, or Display (default is Shared).
2. For a mode that does not yet have a custom layout, click + NEW (or + EDIT, + DISPLAY). The designer copies the shared layout including display type and width.
3. Edit the mode layout independently of the others. The style button in the top toolbar now also changes display type and width only for this mode.
4. You can return to the shared layout via More options using EDIT → Shared (or NEW / DISPLAY). The designer shows the Restore shared mode layout dialog and discards the custom layout.

Form Display Style

Configure the display style via the style button in the top designer toolbar (SharePoint layout type). Options, dimensions, and the technical key are described in Form Settings.

• Centered dialog (Card): the form is centered up to the configured maximum width.
• Side panel (Right): the form slides in from the right (640 px); clicking the backdrop closes it.
• Full width: the form fills the page with configured margins.

Large Widget Configuration Dialog

Complex widgets (Related Items, Related Documents, Repeating Table, and Version History) have a spacious tabbed configuration dialog with live preview alongside the narrow inspector. Open it with Open detailed settings in dialog in the widget inspector, or via the Configure gear icon on the widget card on the canvas.

The gear icon is on every field, not only on widgets. For other fields it opens a dialog with the same settings as the side inspector (general, appearance, visibility, field-type settings, default value) and a live preview of the field. Edits apply only after Save (one undo step); Cancel and the Close (X) button in the header discard them.

• Tabs: for Related Items and Documents: Data source and binding, Columns, and Sorting and behavior; for Repeating Table: a single panel with table columns. These are the same settings as in the inspector, laid out more clearly.
• Draft: changes are committed only when you click Save and form a single Undo step. Cancel and the Esc key discard changes.
• Preview: at the bottom of the dialog, the actual widget renders according to the draft settings. In SPFx it loads real list data; in the local sandbox it shows sample data. If no data source is selected or data connection is unavailable, a hint is displayed instead of the preview.