Page List Loop

Watch the walkthrough

Data Mappers, List Loops and Client Functions

Map page data into dropdown options, repeat native cards with a list loop and create a reusable client function that updates a visible page value. Check the result on desktop, tablet and phone.

Watch tutorial (19:03)

Page List Loop

Repeat page elements for the items in a list to display dynamic content.

Recorded with an earlier Twidget interface. Names, control locations and available options may differ; use the linked documentation for current guidance.

Watch tutorial (2:16)

Browse all video tutorials

The Page List Loop Element in Twidget is a powerful feature designed to enable dynamic repetition of UI elements based on a data source. By utilizing this component, developers can create interfaces that automatically display lists of content, allowing for more interactive and data-driven applications without requiring extensive coding.

Core Concepts

• Iteration: The List Loop Element repeats all its contained elements for each item in the specified data source, resulting in a seamless rendering of multiple items.

• Variables: Within the loop, two automatic variables are created:

  • Item Variable: This variable corresponds to the individual items within the data source and provides direct access to their properties.

  • Index Variable: This variable represents the current position of the item in the data source array, enabling developers to customize the output based on the item's index.

Data Source Requirements

For the List Loop Element to function, a valid data source must be assigned. This can either be a reference to an existing variable or a newly created variable that holds a list of data items. The content of the List Loop will then adjust dynamically based on the number of items present in the data source.

Example Implementation

When implementing a List Loop on a page, developers can:

• Define a new list variable (e.g., containing three elements) to serve as the data source.

• Populate UI elements inside the loop with content that references the Item and Index variables.

• Update the design in the editor to see the structural layout prior to going live.

Dynamic Data Representation

Once the page with a List Loop is created and connected to a data source, users can preview the page to see each element rendered according to the list items. The text elements can reflect both the index and the item's associated content, showing how data binding works in practice:

• Each UI component inside the loop displays content relevant to its corresponding item, effectively demonstrating the dynamic capabilities of the List Loop Element.

Summary

The Page List Loop Element enhances Twidget’s utility by providing the means to easily generate dynamic lists from data sources, utilizing item and index variables. This facilitates the creation of responsive and data-driven user interfaces while minimizing the need for extensive coding.