A repeat element allows you to show a list within a page by repeating the elements for each result in the data source. It allows you to repeat a set layout for each item in a container, making it easier to manage large amounts of similar data.
In this section, we’ll set up a repeat element, the configuration options, and how it generally works.
Repeat elements allow you to display lists or collections of data. Instead of manually creating multiple instances of similar elements, repeat elements can dynamically generate as many instances as needed based on the data source.
Using repeat elements ensures consistency across the application. When you update the design or functionality of a repeat element, the changes are automatically applied to all instances. This makes maintenance easier and reduces the risk of inconsistencies.
You can customize the element properties and style of the element using the element settings panel on the right side of the screen.
You can create two types of hierarchies using the Repeat element:
To add a repeat element, click the +
icon and select Repeat.
Place the element wherever you want it on the page. Don’t worry if it’s not perfectly positioned initially; you can always move it later.
Learn more about how to add and remove an element from a page.
Now, you can configure the element’s properties to make it function and look the way you want. This involves settings related to repeat style and adding child elements to the repeat element.
To list rows in the repeat list, set the data source service type as List rows. Learn more about data sources and how to configure them.
After adding a repeat element to the page from Elements, you need to select the data source which you want to import your data from. This is done from the General tab of the element settings.
You can choose how many items appear in the list by default. The field must be an integer and must be less than or equal to 100.
If there are more items to display than the defined number, a Show more button will be added at the end of the list, allowing the user to expand the list and view the additional items.
This setting controls how repeated elements are arranged on the screen. You can choose between two orientations:
When choosing horizontal orientation, you can further define the number of elements displayed per row for different device types. This allows you to customize the layout for optimal viewing on various screen sizes.
Properties of items per row:
Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions—we’re ready to assist you.