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.
-
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.
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.
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.
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:
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.
Access Path Parameters in a Page
Path parameters play a crucial role in enabling dynamic and targeted content retrieval within the Twidget no-code API platform. This documentation outlines the fundamental concepts of path parameters, their implementation in Twidget pages, and their utility in enhancing page interactivity and config...
reCAPTCHA
Twidget integrates Google's reCAPTCHA, a security service designed to protect websites from spam and abuse by distinguishing between human and automated access. reCAPTCHA operates by requiring users to complete simple tasks, such as identifying objects in images or clicking a checkbox, thereby provi...
Page Layouts
Page layouts in Twidget provide a structured way to organize and present content on a web page. The primary purpose of page layouts is to enhance user experience through effective content management and visual hierarchies. Key Concepts. - Header & Sidebar Layouts: These layouts subdivide the page in...
Page Commands
The new page commands in Twidget are designed to enhance the interactivity and responsiveness of web pages created with the platform. These commands allow developers to retrieve contextual information about the current page session and manipulate its content dynamically. Key Concepts. - Page Variabl...
Layout Controls
Layout controls are essential components in Twidget, allowing developers to manage the visibility and behavior of various layout elements, such as modals and drawers, within a user interface. These controls enable dynamic user interactions by facilitating the opening, closing, and toggling of layout...