Skip to main content
A container component that repeats its child components based on a dictionary.

​
Overview

The Repeater component dynamically creates copies of its child components based on a dictionary or array. It’s similar to a for-each loop in programming, but for UI elements. Use Repeaters when you need to display lists, collections, or any data where you don’t know the exact number of items in advance. Inside a Repeater, you can access:
  • @{item}: the current item’s value
  • @{itemId}: the current item’s index (for arrays) or key (for dictionaries)

​
Common use cases

  • Dynamic lists: Display files, tasks, messages, or any collection of items
  • Search results: Show filtered or API-fetched data
  • User-generated content: Display comments, reviews, or form responses
  • Product catalogs: Render product cards or inventory items
  • Data tables: Create rows based on database queries or structured output

​
How it works

  1. Data source: Bind the Repeater to a state variable containing an array or dictionary
  2. Child components: Add components inside the Repeater that define the template
  3. Variable access: Use @{item} and @{itemId} to display data for each iteration
  4. Nested Repeaters: Nest Repeaters to display hierarchical data structures
  5. Input binding: Bind input components to specific items using @{itemId} for interactive lists

​
Configuration options

​
Basic settings

  • Repeater object: The state variable containing the array or dictionary to iterate over (for example, @{myList})
  • Key variable name: The variable name for accessing the current item’s key or index (default: itemId)
  • Value variable name: The variable name for accessing the current item’s value (default: item)

​
Visibility

Set custom visibility conditions to show the Repeater only when data is available (for example, myList to hide when empty).

​
Using inputs within Repeaters

When you add input components (like Text Input, Text Area Input, or other form fields) inside a Repeater, you need to properly bind them to capture user input for each repeated item.

​
Binding inputs to dictionary items

The most reliable approach is to use a dictionary as your Repeater data source and bind inputs using the itemId to target specific dictionary keys: 
state_variable[itemId].property_name
Example - Text Area Input inside a Repeater If your state variable is products and you want each product to have a description property that users can edit:
  1. Set up your Repeater with Repeater object: @{products}
  2. Add a Text Area Input inside the Repeater
  3. Set the Text Area Input’s Link variable to: products[itemId].description
This creates or updates the description key for each specific product in your dictionary. As users type in each Text Area Input, the corresponding product’s description updates in your state.

​
Managing editable lists with temporary state

For more complex scenarios where you need to edit one item at a time:
  1. Create a temporary state variable to hold the draft being edited (for example, current_draft)
  2. Track which item is being edited using a state variable like editing_item_id
  3. Show input fields conditionally using visibility rules that check if @{itemId} == @{editing_item_id}
  4. Display read-only content for items that aren’t being edited
  5. Copy data from the temporary variable back to your main data structure when the user saves
This pattern prevents multiple items from being edited simultaneously and provides a clearer user experience when editing items in a list.

​
Best practices for Repeater inputs

  1. Use dictionaries over arrays: Dictionaries make it easier to target specific items using itemId as the key
  2. Provide clear feedback: Show which item is being edited with conditional styling or visibility
  3. Validate input: Check that required fields are filled before processing
  4. Consider performance: Large lists with many input components can impact performance; use pagination if needed
  5. Test empty states: Ensure your Repeater handles empty data gracefully

​
Example: Dynamic task list with input

This example shows how to create an editable task list where users can update task descriptions. Interface:
  • Button to add new tasks
  • Repeater bound to tasks dictionary
  • Text Input inside Repeater for editing task names
  • Button inside Repeater to delete tasks
Repeater configuration:
  • Repeater object: @{tasks}
  • Key variable name: itemId
  • Value variable name: item
Text Input configuration (inside Repeater):
  • Link variable: tasks[itemId].name
  • Placeholder: “Enter task name”
This setup allows each task to maintain its own editable name field.

​
Dynamic tabs

Repeaters can be used to create tabs dynamically based on your data. Place a Repeater inside a Tab Container, then add a Tab component inside the Repeater. Example structure:
  • Tab Container
    • Repeater (bound to @{categories})
      • Tab (with name @{item.name})
        • Your content here
Each item in your data generates a new tab. This is useful for category-based views, multi-entity interfaces, or any scenario where the number of tabs depends on your data.

​
Dynamic columns

Similarly, you can create dynamic column layouts by placing a Repeater inside a Column Container with Column components inside the Repeater. This allows for responsive, data-driven layouts.

​
Working with pagination

For large datasets, combine Repeaters with the Pagination component to improve performance. The Pagination component provides events (wf-change-page, wf-change-page-size) that you can handle in your blueprints to update the data displayed in your Repeater. Example pattern:
  1. Add a Pagination component to your interface
  2. Handle the wf-change-page event to load the appropriate data slice
  3. Update the state variable bound to your Repeater with the paginated data
This approach prevents rendering hundreds or thousands of items at once, which can impact performance.

​
Additional resources

For a detailed tutorial on building with Repeaters, including nested Repeaters and structured output integration, see Build dynamic UI components with Repeaters.

​
Fields

NameTypeDescriptionOptions
Repeater objectObjectInclude a state reference to the dictionary used for repeating the child components. Alternatively, specify a JSON object.-
Key variable nameTextSet the name of the variable that will store the key of the current repeater object entry.-
Value variable nameTextSet the name of the variable that will store the value of the current repeater object entry.-