Pages
      Back to home
      1. Betty Blocks Documentation
      2. Building your application
      3. Pages

      Data list components

      Features, options, and common use of the two data components: Data list and List with data.

      After reading this article, you’ll know the following:

      • Major characteristics and options of the Data list and List with data

      • How to use these components in your application

      • The difference between a Data list, a List with data, and other data components

      What are Data list components?

      Betty Blocks offers two primary data list components: the Data list and the List with data.

      Data list component is designed to simultaneously showcase multiple records of a data property. The key feature that sets the Data list apart from the Data container component is its ability to render multiple records at once, rather than focusing on a single record. This makes it ideal for scenarios where users need to view and interact with a collection of data items, such as product catalogs, user directories, or any other data sets that require comprehensive viewing.

      Unlike simple lists, this component is not restricted to a list format but can be displayed in a grid layout.

      List with data component simplifies the setup process by offering a configuration wizard, which guides users through the initial setup, reducing the time and effort needed to get started.

      Data list options

      The Data list component has a set of primary options that include:

      1. Selecting a model to connect to the Data list

        1. Create a filter for a model and set the order for properties

        2. Search on property enables you to add a search bar to your Data list and a property by which this search is processed

      2. Type defines the layout alignment of Data list items on a page:

        1. List: Arrange data items vertically in a single column, one after the other.

        2. Grid: Organizes data items in a matrix of rows and columns, providing a structured, multi-column layout.

        3. Inline: Displays data items horizontally in a single row, aligned side by side.

      Pagination options allow you to divide large datasets into smaller pages for easier navigation and better performance. You can choose one of three pagination options:

      • Always show: Pagination controls are always visible

        • Showing labels like ‘5 of 10 pages’

      • When needed: Pagination controls appear only if records exceed the rows per page.

      • Never show: No controls are displayed, used when all data fits on one page or for alternative navigation methods.

      • Rows per page (max 50): Sets the maximum number of rows displayed per page, up to 50.

      • Placeholder rows: Temporary rows shown during data loading to maintain layout and provide visual feedback.

      The only spacing option you have is outer space where you can choose between having from None to XL outer space. Also, if you press on the cogwheel icon, the menu below with more advanced options will open.

      Messages options: Custom messages displayed with your Data list component to inform users about various states or actions.

      • Error message: Built-in and interaction-based messages for displaying errors, such as “Failed to load data.”

      • Show on load: Options to display a message, content, or a skeleton screen while data is loading.

      • Loading text: Text shown during data loading can be static (e.g., “Loading... ") or dynamic.

      • No results text: Message displayed when no data matches the query, which can be static (e.g., “No results found”) or dynamic.

      Using the Data list component

      Let’s say, a company wants to create an online client directory for staff to easily find their contact information and details. We are going to create a simple page using the Data list and other supporting components.

      1. Drag and drop the Data list component onto your page where the client directory will be displayed.

        • Select a needed model via options

        • Choose the property to order the list by

      2. Choose the layout type for your case. The default list type works in ours but if you’d like to see the images of your users first, you’d better apply the grid

      • We’ll select the pagination type ‘When needed’ and extend the placeholder rows to 10.

      • Go to the messages section and come up with no results text

      3. Now you need to think about what other components would you use to display data from the model. In this case, we’ll use:

      • Title component to show a customer’s name and the

      • Text component to display the email address

      • Drop a Divider at the bottom

      When pressing the + in the Content field, you’ll be able to select the properties.

      4. Finally, compile your page to see how it’ll look in a runtime environment.

      Data list vs other components

      In the context of Data page components, both Data list and List of data have the same functionality, with the only difference being that the latter comes with a configuration wizard that guides you through setting up the component.

      In many cases, one might want to use the Data table component as it provides more extensive configuration options, such as multiple columns, sorting, filtering, and advanced data manipulation, which makes it suitable for detailed data analysis and comprehensive management tasks where complex data structures and interactions are required.

      The Data list component is designed for straightforward data display. It offers simple list, grid, or inline layouts with basic pagination, loading states, and custom messages, making it ideal for simple, visually oriented data presentation.