Binding the repeating of items

With binding, you can dynamically repeat items/elements and use each respective item's data inside bindings. This powerful feature allows you to create lists, grids, and other repetitive UI patterns that automatically update when your data changes.

Creating repeating items

The main use-case would be to display a list of items coming from your backend. Let's say you want to display a list of products coming from your backend:

1. Create the design for the product cards. You just need to create 1, as we will dynamically repeat the cards.

2. Place the product card into an empty flexbox. You can do this very simply by pressing ⌘+G on Mac, or Ctrl+G on Windows to place the selected element into an empty flexbox.

3. Turn on the repeating of items and bind our list of products:

DIFFERENT ELEMENTS, DIFFERENT LABELS

This example uses a flexbox, so you will see Repeat Children and Children. If you use a Columns element instead, turn on Repeat Items and bind Items.

1. Select the parent flexbox.
2. Turn on Repeat Children.
3. Bind Children to your list of products:
4. In the binding window, open the Data tab.
5. Expand your table view under Table Views.
6. Select data.
7. Close the binding window.

Our product card is now being created for every item in our bound list of products

BINDING A LIST

When binding the repeating of items, you MUST bind it to a list of items (also known as an array). If you do not pass in a list of items, then it will not be able to automatically process the items and detect how many elements need to be created.

4. Before we connect each piece of data from our products, let's style the list of products:

5. In the right panel, open the Style tab.

6. Open the Display select.

7. Select grid.

8. Add 4 columns.

9. Add a Column gap.

10. Add a Row gap.

5. Finally, bind each field on the product card to the matching field from the current row. Select an element inside the repeated card, open its binding, and at the bottom of the binding window expand item.data to choose a field:

6. Select the tag element, bind its text content, expand item.data, and select tag.

7. Select the image element, bind the image source, expand item.data, and select image.

8. Select the title element, bind its text content, expand item.data, and select title.

9. Select the description element, bind its text content, expand item.data, and select description.

10. Select the price element, bind its text content, expand item.data, and select price.

11. Open Preview to confirm each card shows the correct item data.

ITEM DATA

Whenever you dynamically repeat items using a bound list of data, each element created will automatically have access to its respective item's data.

To recap the steps in the example above:

1. Created a blank product card whose content we would later dynamically bind
2. Placed the blank product card into an empty flexbox (that we named 'Products List')
3. With the parent flexbox selected, turned on Repeat Children and bound Children to our products data
4. Styled the list so it appeared as desired
5. Bound each content element inside the product card to its respective field in the item data

Visually detecting repeated items

To tell if an element in the layout tree is repeating its child element, you can look for this purple icon:

This indicates that its child element is being repeated.

When you expand a repeating container in the Layout Tree, you will see a Repeater node and a Template (n) child that shows how many items are repeated.

Working with item data

When you bind a property inside a repeated child element, the binding window lists data for the current row under item.data. Expand item.data and select the field you need.

Common repeating patterns

Here are some common UI patterns you can create with repeated items:

Pattern	Container Type	Use Case
List	Vertical Flexbox	Displaying a series of items in a column
Grid	Grid Container	Showing products, images, or cards in a responsive grid
Carousel	Horizontal Flexbox	Creating a scrollable row of items
Table	Table Element	Displaying structured data with rows and columns

Using AI to create repeating items

WeWeb AI makes setting up repeating items much faster and more intuitive through natural language commands.

Creating a repeating list with AI

Instead of manually configuring repeating items, you can describe what you want to the AI:

1. Select the element you want to repeat
2. Open the AI chat panel
3. Describe the repeating behavior you want to create
4. Pass in the list of items you want to repeat

For example, you could ask:

"I want to repeat this product card for each item in my products data in a 4 column grid with 24px spacing. I want to bind each field of the product card to its respective field in the item data"

1. Select the element you want to repeat.
2. Switch to AI mode.
3. Input your prompt.
4. Pass the relevant data.
5. Submit.
6. Review the bindings the AI created.
7. Confirm the element is in a container with repeating bound to your list of items.
8. Check that each field on the card is bound to the matching item data.

Ensuring the AI can correctly map fields

In the example above, the AI was able to correctly map the content of the product card to their corresponding fields in the item data, due to the names of the elements closely mirroring that of the fields in the data:

Creating filtered repeating lists with AI

WeWeb AI can also create sophisticated filtering logic for your repeated items:

1. If you already have a repeating list you want to filter, select the list element. If not, select the element you want to repeat
2. Open the AI chat panel
3. Describe the filtering you want to create
4. If you do not already have the list created, pass in the list of items you want to repeat

In this example, we are adding filtering to an already created list of items:

"In this Products Grid, I want to only show items whose price is less than 35 dollars"

1. Select the element that is repeating its child element.
2. Switch to AI mode.
3. Input your prompt.
4. Submit.
5. In Edit mode, open the repeating binding and confirm the filter the AI added.

Best practices for repeating items

1. Optimize for performance: If you're repeating many items, consider implementing pagination or infinite scrolling to avoid performance issues.

2. Use the right container: Choose the appropriate container type (flexbox, grid, etc.) based on your layout needs.

3. Consider empty states: Add visual feedback for when your table view has no data.

4. Implement sorting and filtering: Allow users to sort and filter repeated items to find what they're looking for more easily.

5. Handle loading states: Show loading indicators while data is being fetched to improve the user experience.