Flex Repeater

Repeats a view once per item of a bound array. The screen then grows and shrinks with the plant instead of being rebuilt when equipment is added.

Reach for it when you need:

• One card per active piece of equipment, driven by a query
• A list of alarms or orders as rich cards

Component name: FlexRepeater · Category: Container

In the palette: Repeat a view once per item of a bound array

Properties

Any property can be bound to a tag, another component's property, or a query.

Property	Type	Default	Description
data	array	[{"id":1,"label":"Item 1"},{"id":2,"label":"Item 2"},{"id":3… (truncated)	Bound array — one view instance is rendered per element. A positive number renders that many empty instances. Each item has an itemStyle field (opens the style editor) that styles just that instance — e.g. its height, background.
viewPath	view	""	The user-created view rendered once per item
mapFields	boolean	true	Map each item field onto the view's same-named declared params. The whole row is also always available as {{ params.item }}.
indexParam	string	index	The view's param name that receives the zero-based index (read it as {{ params.<indexParam> }})
params	object	{}	Shared params passed into EVERY instance. Bindable. Per-item fields/index override these.
keyField	string	""	Field used as the stable per-item key (falls back to id/_id/key/uuid, then index)
direction	enum	row	CSS flex-direction. row = left→right, wraps into rows, scrolls vertically (card grid). column = top→bottom, wraps into columns, scrolls horizontally. Options: row · column.
wrap	enum	wrap	wrap = items flow onto new lines; nowrap = a single line Options: wrap · nowrap.
justifyContent	enum	flex-start	CSS justify-content — distributes items along the line (main axis). Options: flex-start · center · flex-end · space-between · space-around · space-evenly.
alignItems	enum	stretch	CSS align-items — aligns each item across its line (cross axis). Needs room: lines grow to the container via alignContent: stretch, or use items of differing sizes. Options: flex-start · center · flex-end · stretch.
alignContent	enum	stretch	CSS align-content — distributes the lines along the cross axis when they don't fill the container. stretch grows the lines (so alignItems has room). Options: stretch · flex-start · center · flex-end · space-between · space-around · space-evenly.
shrinkToFit	boolean	false	nowrap only: off = items keep their size and the row scrolls; on = items shrink to fit one line (like a Flex Container — only sensible for a few items). Wrap always fits its line.
gap	number	12	—
padding	number	0	—
useDefaultViewWidth	boolean	false	Off → items fill the available width. On → each item uses the view's designed width (e.g. a grid of fixed-width cards). Per-item itemStyle.width overrides.
useDefaultViewHeight	boolean	false	Off → items fill the available height. On → each item uses the view's designed height. Per-item itemStyle.height overrides.
emptyMessage	string	No items to display	—
style	style	{}	Custom CSS properties

Events

Attach event actions to these in the Event Manager.

Event	Label	Group	Payload
click	Click	Mouse	The DOM event.
dblclick	Double click	Mouse	The DOM event.
contextmenu	Right click	Mouse	The DOM event.
mouseenter	Mouse enter	Mouse	The DOM event.
mouseleave	Mouse leave	Mouse	The DOM event.

Right-click behaves differently in the Designer

contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.

Notes

Pair with Embedded View: the repeater supplies the parameters, the embedded view is the card.