One-at-a-time UI
Shows a single “current” record from a list.
Data Iterator (next/prev through items)
Traverse an array sequentially with first/prev/next/last (and optional looping), ideal for slideshows and step-by-step UIs.
Data Iterator
Data Iterator is a “current item” pointer over an array: move next/prev/first/last and bind UI to iterator.value.
When to use it
Use Data Iterator when the UI shows one item at a time (slides, steps, preview panels) but you still want array-driven navigation.
Navigation built-in
first/prev/next/last/select/random actions.
Reactive bindings
Bind UI to iterator.value.* fields.
Bind to iterator.value
Drive navigation with actions
Disable buttons using iterator.has.*
Where you’ll configure it
This tour focuses on selecting the Data Iterator component in App Structure and reviewing its data, index, and loop properties.
Core properties
Set the source list, starting position, and looping.
Data Iterator selection
The tour selects the Data Iterator component in App Structure so its properties can be highlighted reliably.
Orient yourself in Properties panel
Start with the wider context in the Properties panel so the next control makes sense in the full workflow. In the next step, you will focus on ID (naming) and see how it fits into this area.
ID (naming)
Use a readable ID like slideshow or current_item so bindings stay obvious: slideshow.value.title. This step matters because ID (naming) is part of Selection Panels Properties Iteratorid, and understanding that context makes the next action easier to repeat in your own project.
Data source
Bind the iterator to an array source (Value/Array, Data Store list, Data View output, API results).
Index
Index is 0-based. You can bind it to a value (and keep it in Query Manager if you want shareable navigation).
tip: If the index comes from a query param, remember it is a string; convert with toNumber() when needed.
Loop
When loop is enabled, next() at the end wraps to the start (and prev() from the start wraps to the end).
Navigation & state
Iterator exposes navigation helpers so you can build robust controls.
Actions you’ll use
Use these actions in event handlers (click, keydown) to drive navigation.
first(), prev(), next(), last()
select(index) (0-based)
random() for shuffles
Disable buttons safely
Use iterator.has.prev / iterator.has.next to disable navigation controls at the edges (when loop is off).
has.prev / has.next
Edge detection for navigation buttons.
Better UX
Prevents invalid actions at boundaries.
Works with loop
If loop is on, edges behave differently.
Loop off: disable at edges
Loop on: allow wrap-around
Keep logic declarative
Common patterns
Where Data Iterator shines.
Slideshow / carousel logic
Bind an image/title to iterator.value and use next/prev buttons.
iterator.value.image → src binding
iterator.value.title → text binding
Buttons call prev()/next()
Stepper / multi-step UI
Use iterator.index for “Step X of Y” and iterator.value for the current step config.
Display iterator.index + 1
Use iterator.has.* for navigation
Store progress in session/local if needed
Combine with Data View
Use Data View to filter/sort the array, then iterate through the filtered output.
tip: This pattern keeps filtering logic separate from navigation logic.
Data View shapes the list
Iterator navigates the list
UI binds to iterator.value
Wrap-up
Next, connect iterator navigation to events, state, and formatting.
Next steps
Pick a related tour to continue.