Dynamically repeating components

When you place elements inside a repeated list (like a Collection list), page-level variables and workflows are shared across all rows. That often causes every row to respond at once — for example, showing buttons in every row when you hover or focus just one.

The fix is simple: wrap your row UI into a reusable component. Component variables, workflows, and states are scoped to each instance, so each row behaves independently.

TIP

Prefer component-scoped variables and workflows over page-level ones inside repeated lists. It keeps behavior isolated and easier to maintain.

Why rows act in sync

What’s happening: In a repeated list, shared variables and workflows live outside each row, so one change is seen by every row,

What you see: Hover, focus, or click on one item makes all items react at the same time,

How to fix it: Move the logic into a component so every row gets its own isolated state and workflows.

Build the row component

Create a component that represents one row of your list. In this example, it has:

• An Input wrapper (holds the input)
• A Button wrapper (holds the button and the tooltip)

Your list will render many instances of this component — one per item — each with its own state and behavior.

1) Show buttons only when the input is focused

1. In the component, create a Boolean component variable called isFocused.
2. On the input element:
   • On Focus: set isFocused to true.
   • On Blur: after a short delay (e.g., 200 ms), set isFocused to false.
3. On the Button wrapper, set a render condition bound to isFocused.

This makes the buttons appear only for the row you’re interacting with.

TIP

Add a tiny delay on Blur so users can click the button before it hides (e.g., 200 ms).

2) Show a tooltip on hover using states

You can scope hover behavior without variables by using states:

1. On the Button wrapper, enable the Hover state and apply it to children.
2. On the tooltip element:
   • In the default state, hide the tooltip.
   • In the parent’s Hover state, show the tooltip.

Each component instance manages its own hover state, so only the hovered row shows its tooltip.

TIP

States aren’t component-only features, but they’re great to localize behavior — each instance maintains its own state in a repeated list.

3) Use the component inside a repeated list

1. Add a Collection list bound to your array (e.g., a simple list of items).
2. Drop your row component inside the repeated item.
3. Bind any props as needed for that instance (e.g., item label).

Now each row behaves independently: focusing an input reveals only that row’s buttons, and hovering shows only that row’s tooltip.

Why this works

• Component variables live inside the component — each instance gets its own copy.
• Component workflows execute in the component’s scope — no cross-talk between rows.
• States apply per instance — hover/focus effects don’t “leak” to other rows.