Interface Builder

Appearance

Areas ​

Type: Reference | Audience: Interface builder user

An Area groups consecutive rows on the canvas so they share visibility rules and, optionally, a loop. Areas appear as coloured overlays in the builder -- the colour is a builder aid only and is never visible to end users.

See Using Areas for a step-by-step guide.

Builder canvas with five rows wrapped by two areas: a blue 'Header' area covering Rows 1 and 2 and a green 'Body' area covering Rows 3, 4, and 5. Each area has a coloured badge with its name floating above the top-left corner.

Area Settings ​

Open Area Settings by clicking an area's badge on the canvas. The panel has the following sections.

Basics ​

SettingDescription
NameA name for the area, shown on the badge above it.
RowsThe rows the area covers. Edit by toggling row numbers in the visual row selector at the top of the panel, or by clicking the Add Row N (above/below) buttons that appear for adjacent unowned rows. Only the area's edge rows can be removed -- areas must stay contiguous.
ColorThe area's colour on the canvas. Pick Blue (default), Green, Purple, Orange, Red, Teal, Pink, or Gray. Colour is a builder-only aid.

Conditional Visibility ​

Toggle Enable conditional visibility to show or hide the whole area based on data.

SettingDescription
ConditionA Data Picker expression. The area is hidden when this resolves to empty or "false".
Hide (keep space)The rows disappear but their vertical space stays reserved.
Remove (Recommended)The rows are removed entirely; the layout closes up.

Loop ​

Toggle Enable loop to repeat the area's rows either per item in an array, or a fixed number of times.

SettingDescription
Loop modePick Array (repeat once per item in an array) or Count (repeat a fixed number of times).
Target arrayShown in Array mode. Pick an array from your data via the Data Picker.
Loop countShown in Count mode. Enter a number or bind it via the Data Picker.

In Array mode, Data Picker tags inside the looped rows resolve against the current iteration's item. In Count mode they stay bound to the view's normal data.

A loop index (starting from 1) is exposed inside the loop through the loopItem tab in the Data Picker -- use it to show a sequence number or detect the first/last iteration. The loopItem tab only appears when the cursor is inside a looping area.

Cap: a single area loops at most 1000 times. Iterations beyond that are dropped and a warning is logged in the browser console.

Forms inside a loop: looped form inputs submit under suffixed names (name, name_loop_1, name_loop_2, …) and the submission payload additionally carries an oc_loop array with one object per iteration. See Form Submission Types for the exact shapes.

Delete Area ​

The Delete Area button at the bottom of the panel removes the area but leaves the rows in place on the canvas.

Area Settings sidebar for the green 'Body' area. The panel shows the Body name, the visual row selector with Rows 1 and 2 disabled (owned by Header) and Rows 3, 4, 5 selected, a 'Rows in this area (3)' list, the eight-colour palette with green active, Conditional Visibility enabled with an empty Condition field and 'Remove (Recommended)' selected, Loop enabled in Array mode with an empty Target array, and a destructive Delete Area button at the bottom.

Rules ​

  • Areas cannot overlap. If you try to extend an area into rows that already belong to another area, the change is rejected.
  • Rows inside an area stay reorderable -- moving them within the area is fine; dragging them out detaches them from the area.