Fluxo UIFluxo UIv0.4.1

Repeater

The Repeater binds to a dataset and renders its children once per row. It is the generic "for each" container — use it when a table is too tabular (cards, chips, timelines) or when you want custom per-row layouts.

Inside any child, the current row is addressable via Field.<name>. Iteration metadata (index, count, isFirst, isLast, isEven, isOdd) is automatically merged into Variables.* for that iteration scope.

Binding options: a datasource (recommended), or a dataset expression that returns an array. Per-row filter, sortBy (+ direction), offset and limit run in that order before rendering. Layout can be stack, grid, or inline.

1 · Bind a datasource and render a card per row

The simplest shape — a stack layout, a line separator, alternating backgrounds, and Field.* for row access.

First 6 orders

The repeater renders its children once per row. Child expressions use Field.<name> to access the current row.

ORD-1000 · Water Bottle

Region: East · Units: 13 · Revenue $689

ORD-1001 · T-Shirt

Region: West · Units: 1 · Revenue $70

ORD-1002 · T-Shirt

Region: East · Units: 1 · Revenue $60

ORD-1003 · T-Shirt

Region: West · Units: 5 · Revenue $357

ORD-1004 · Wireless Buds

Region: West · Units: 14 · Revenue $4,942

ORD-1005 · Yoga Mat

Region: West · Units: 10 · Revenue $470

2 · Grid of cards

Use layout='grid' to build card catalogues. The child template is a full Columns subtree — any component you can build outside the repeater works inside.

High-revenue orders — 3×3 grid

Wireless Buds

West · Electronics

$4,942

Rep: C. Nguyen

Smart Watch

West · Electronics

$5,073

Rep: D. García

Wireless Buds

South · Electronics

$5,895

Rep: A. Chen

Wireless Buds

East · Electronics

$3,080

Rep: C. Nguyen

Wireless Buds

East · Electronics

$3,078

Rep: H. Tanaka

Smart Watch

South · Electronics

$3,780

Rep: C. Nguyen

Laptop Pro

West · Electronics

$3,729

Rep: G. Müller

USB Hub

North · Electronics

$2,056

Rep: D. García

Smart Watch

West · Electronics

$2,718

Rep: E. Johnson

3 · Filter, sort, and limit with parameters

End users pick a region and how many rows to show. The repeater filters, sorts descending by revenue, and limits. Variables.iterationNumber produces the #1, #2, … labels.

Top-N orders in the selected region

Pick a region and how many rows to show. The repeater filters by Field.region == Parameters.regionFilter, sorts by revenue descending, and limits to Parameters.topN.

#1

ORD-1068

USB Hub

Electronics · D. García

$2,056

8 units

#2

ORD-1009

Smart Watch

Electronics · F. O'Brien

$1,392

4 units

#3

ORD-1039

Rug 5x8

Home · D. García

$1,180

20 units

#4

ORD-1044

Candle Set

Home · G. Müller

$779

19 units

#5

ORD-1067

T-Shirt

Apparel · H. Tanaka

$684

12 units

4 · Iterate over an expression result

No datasource is bound. The dataset expression pulls rows from Datasources.orders — and the filter, sort, limit pipeline applies exactly the same.

Expression-driven dataset

The repeater is not bound to a datasource. Instead its dataset expression pulls Datasources.orders directly and the per-row filter does the work. This is useful when you want to iterate over a projection that has no dedicated datasource — e.g. a derived list.

Orders above $2,000: 80

#1 · Wireless Buds — $5,895

#2 · Smart Watch — $5,073

#3 · Wireless Buds — $4,942

#4 · Smart Watch — $3,780

#5 · Laptop Pro — $3,729

#6 · Wireless Buds — $3,080

Notes & gotchas

  • Field.<name> is the only row accessor. Inside a repeater child, use =Field.region, not Datasources.orders.region — the repeater does not create a row-scoped datasource alias.
  • Iteration metadata lives in Variables. Variables.iterationIndexis 0-based; Variables.iterationNumber is 1-based. These never leak outside the repeater subtree.
  • Component-scoped variables declared on the repeater itself are writable per-iteration via cell-item actions (when the child is a table). Reads from outside see the global / outer scope. Same scope rules as anywhere else.
  • Runtime cost. Each child subtree is rendered per row. Keep the template small, or pair the repeater with a limit when the dataset is large. The repeater itself does not paginate.
  • Children use drag-and-drop. In the builder, the repeater accepts the same child types as a column cell. Drag components into its drop zone; they become the iteration template.