Repeatable

The Repeatable block renders a single child template for every element of a bound data array. Design the row once, and the block stamps it out for every item with that item's data in scope. It supports vertical and horizontal list layouts, CSS grid layouts, optional drag-to-reorder, page-based and scroll-based pagination, and a per-row state collection feature that lets you read every row's inner block values from outside the list.

Tip: Use Repeatable when your rows need a free-form layout you design — contact cards, product tiles, feeds, checklists. Prefer the Table block when users need columns, sorting, filtering, or bulk actions. Prefer Kanban when items must be dragged between groups.

Repeatable List and Repeatable Grid are sibling blocks that use the same rendering engine but ship pre-configured as a list or a two-column grid, respectively. They intentionally omit callable methods, pagination wiring, and the per-row state collection that the base Repeatable offers.

Data Binding

Two properties power everything: the array the block iterates, and the unique key for each row.

Warning: If your data source returns {{ query1.data.items }}, bind to that path — not {{ query1.data }}. A non-array value renders no rows without any error.

Item Template

The Repeatable renders one template block — a Card by default — once per row. Select it on the canvas or layers panel and edit it like any block. Everything added to the template repeats for every row.

Row-Scoped Bindings

Inside the template, a special set of bindings expose the current row's data. Either dot or bracket notation works — they are the same expression. The builder inserts the bracket form:

{{ repeatable1['context']['item']['name'] }} ✅ correct {{ repeatable1['context']['index'] }} ✅ zero-based row position {{ repeatable1['context']['primaryKey'] }} ✅ the row's resolved key {{ repeatable1.context.item.name }} ✅ dot notation works too {{ repeatable1['currentItem']['name'] }} ❌ no such shorthand

Note: While editing bindings in the builder, the expression picker always previews with the first row's data. At runtime each row correctly receives its own data.

Per-Row Isolation

Every block placed in the template gets its own copy per row automatically:

• A sibling reference like {{ price_input.value }} resolves to this row's copy of the input.

• A method call on a sibling (e.g., Form submit) targets this row's copy only.

• An event handler on an inner block fires for that row only — perfect for per-row automations.

Content Properties

Appearance Properties

Pagination

Pagination is an add-on that loads rows in chunks. It comes in two modes:

Page-Based vs Scroll-Based Pagination

Page-Based: A numbered pager bar renders below the rows. Bind your data source's limit/offset inputs to {{ id.pagination.pageSize }} and {{ id.pagination.offset }}. Bind Total Records to show the page bar (required).

Scroll-Based (Infinite): More rows load as the user nears the list bottom. Same wiring required. Also unlocks the On Pull Down event for pull-to-refresh.

Warning: Binding a static 200-element array with page size 30 renders all 200 rows. Pagination only works when the data source itself consumes the block's page size and offset and returns one page at a time.

Pagination State Keys

Events

Methods

Call these with the Trigger Component Method action: pick the Repeatable as the block and choose the method.

Exposed State

The Shape of instances

When Collect Child States is on, each element of {{ id.instances }} holds currentIndex, currentPrimaryKey, and one entry per direct child block. Three special lookups are also available:

• instances.byKey(key) — returns a row's full aggregate by its primary key

• instances.indexOfKey(key) — returns a row's position by primary key

• instances.keys — returns every row's primary key as a plain array

{{ repeatable1.instances.keys.map(key => repeatable1.instances.byKey(key).checkbox1.value) }} → [true, false, true] // one entry per row's checkbox1

Repeatable List & Repeatable Grid

Warning: Repeatable List and Repeatable Grid show the Pagination add-on and the Collect Child States toggle in the properties panel, but neither works on these blocks. Paging can't be driven, and instances isn't filled. If you need either feature, use the base Repeatable block.

These are pre-configured siblings that use the same engine as Repeatable but with different defaults and reduced capabilities:

Note: Repeatable List and Grid are excellent for quick mockups and simple displays. For any flow that needs pagination, per-row state reading, or imperative control (next/previous selection, scroll-to), use the base Repeatable block.

Nesting Repeatables

A Repeatable's template can contain another Repeatable — ideal for 2D data like orders with line items:

// Inner Data Source binding: {{ outerRepeatable['context']['item']['lineItems'] }} // Reading inner row state from outside both: {{ outerRepeatable.instances[0].innerRepeatable.instances[1].skuInput.value }}

Behavior & Gotchas

⚠ Sortable toggle is hidden until a Primary Key is set

The Sortable toggle does not appear in the panel until a Primary Key is chosen. Set a Primary Key first, then the toggle becomes available.

⚠ Enabling pagination silently disables Collect Child States

Saving with a pagination add-on forces Collect Child States off. Paginated lists recycle off-screen rows, so per-row state collection would be partial. Choose one or the other per Repeatable.

⚠ Selection clears when the row disappears from data

When the selected row's key no longer exists (a refetch removed it), the selection resets automatically. With Auto Select active, a new item is immediately selected and On Select Item fires.

⚠ New rows land at the bottom of a user-sorted list

After a drag-reorder, incoming rows are appended after the remembered order, not at their natural data position. Call resetOrder to restore data order.

⚠ Per-row state persists across reuse

Collected instances state persists until cleared. A Drawer or modal that reuses the same Repeatable shows previous open's row state (e.g., ticked checkboxes). Call resetInstances on the Drawer's open event.

⚠ Mobile limitations

In mobile apps: drag-to-reorder and the numbered page bar are not available. Lists use infinite scroll and pull-to-refresh instead. The methods selectNextItem, selectPreviousItem and resetOrder do not work on mobile (their error branch runs). The methods scrollTo (scrollable lists), goToPage, clearSelection, resetPageOffset and resetInstances do work.

Common Patterns

Card List with Selection Drawer

1. Bind data and set primary key: Set Data Source to your query result and Primary Key to the record's id field.

2. Design the template card: Open the template card and bind its blocks using row-scoped pills: {{ repeatable1['context']['item']['name'] }}.

3. Wire On Select Item: On On Select Item, open a Drawer bound to {{ repeatable1.selectedItem }}.

Paginated Product Grid

1. Set layout to grid: Set Layout to grid and pick a column count (e.g., 3).

2. Add pagination add-on: Enable the Pagination add-on, set type to Page based, and bind the data source's limit/offset inputs to {{ id.pagination.pageSize }} and {{ id.pagination.offset }}.

3. Bind Total Records: Bind Total Records to the data source's count output. The page bar appears once this is set.

Sortable Checklist

1. Enable sorting: Set a Primary Key, then toggle Sortable on. Optionally pick a Drag Handle Block inside the template.

2. Persist order: On On Order Change, persist {{ repeatable1.order }} to your backend.

3. Add a reset button: Offer a "Reset Order" button that calls the resetOrder method.

Related Blocks