Data List

The Data List Widget is a dynamic layout widget used to repeat a block of content based on a connected Data Model, such as an API or a database. It renders a single, user-defined template element for each record in the data set. This ensures consistent styling and structure while allowing dynamic data to populate the content.

Common Use Cases

  • Displaying a list of blog posts or items

  • Creating galleries or card-based views from data

  • Paginated or scrollable lists

Key Considerations

  • Design Once, Repeat Many: Only the first item needs to be designed. The widget automatically clones this template for all other data items.

  • Data Binding Required: Must be connected to a valid Data Model (API or database) for dynamic rendering.

  • Contextual Variables: Inside the item, you can access individual record fields using Data List property (ITEMVALUE) from Formula Editor.

Widget Properties

Search Group

Optionally group data lists for use with a shared search bar or filtering component.

Data Model

Select the data source (e.g., an API endpoint or database collection) from which the widget should pull its data.

Fixed Filters

Fixed Filters let you set default conditions to limit the data shown in your widget.

For Example:

If you only want to show products from the "Dresses" category, you can add a filter like: IF(category) is equal to "Dresses"

These filters work behind the scenes — users won’t see them, and they can’t change them while using the app. If you don’t set any filters here, the widget will display all records from the connected Data Model.

Max Number Of Items While Editing

Controls how many items are shown while designing in the editor. This does not affect live output and is intended for performance tuning during design.

Step-by-Step Guide to Use the Data List Widget

Step 1: Add the Widget

Open the Widget Panel on the left, go to the Layouts section, and pick & drop the Data List Widget onto your page.

Step 2: Connect to Data Model

With the Data List selected, go to the Property Editor. In the Data Model field, choose an API or database model that returns a list (e.g., products, users, posts).

Step 3: Design the First Item

Add and arrange widgets inside the Data List (e.g., image, text, button) and design the first item.

Step 4: Bind Widgets to Data Fields

For each widget inside the template, bind it to a field from the current item using Data List from formula editor.

Step 4: Preview the Result

View the rendered list with real data populated. Confirm the layout is consistent and responsive for all items.

PreviousPage ContainerNextTabbed List

Last updated