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
Section titled “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
Section titled “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
Section titled “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
Section titled “Core properties”Set the source list, starting position, and looping.
Data Iterator selection
Section titled “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
Section titled “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)
Section titled “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
Section titled “Data source”Bind the iterator to an array source (Value/Array, Data Store list, Data View output, API results).
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.
When loop is enabled, next() at the end wraps to the start (and prev() from the start wraps to the end).
Navigation & state
Section titled “Navigation & state”Iterator exposes navigation helpers so you can build robust controls.
Actions you’ll use
Section titled “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
Section titled “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
Section titled “Common patterns”Where Data Iterator shines.
Slideshow / carousel logic
Section titled “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
Section titled “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
Section titled “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
Section titled “Wrap-up”Next, connect iterator navigation to events, state, and formatting.
Next steps
Section titled “Next steps”Pick a related tour to continue.