📑List view
Last updated
Last updated
The List View component displays rows of data in a structured format. Similar to Form, Modal, and Drawer components, it serves as a container for other components or modules. To see data in a list format, first link the data to a List see component and set naming rules for the elements. You then create the layout for the first row by arranging components using drag-and-drop functionality. This layout will subsequently be applied to all elements in the component, guaranteeing consistency throughout the shown data.
The following is a demonstration of List View, showcasing a selection of the BEST BOOKS OF 2021 from Goodreads
Place the List View component onto the canvas by dragging and dropping it. Ensure that each item within the List View includes an Image, a Text, and a Rating component. Customize the appearance of the entire List View component by configuring the layout of the first entry.
Upon clicking the Image component, you will observe the defaulted image source.
The List View component fetches data from a JSON array of objects and presents an Image, a Text, and a Rating component for each entry. Additionally, you have the option to pass query results to a List View.
The data for a List View component can be either an integer or an array.
You can access detailed information about the List View component, including its items, properties, and more, in the data browser.
Once you've bound valid data to the List View component and designed its internal components, you can populate these components with data. The List View supports local variables currentItem and i. It's important to note that you only need to modify the data of the first row, as the same settings are automatically applied to the other rows.
You have the option to bind a static URL address to the Image component for image display. Since the URL address remains static, the same image will appear in all rows.
You have the option to define the names of item indices and item data within a list structure. This proves beneficial when incorporating one list within another. For instance, assigning the index of the outer list as i and the inner nested index as j helps prevent naming conflicts.
By default, the item index is labeled as i, indicating the index of list data starting from zero. Apart from using i as numerical indices, you can also employ i to dynamically retrieve data from query results.
For instance, to retrieve the book_name field from the fiction table within the Text component, you would write the following code.
{{getFictions.data[i].book_name}}
You can observe the names of fiction books being displayed in the List View according to their index order.
By default, you have the ability to access the value of each item within a list using the variable item. For instance, if you wish to exhibit a serial number alongside the book name, you can utilize the following code in the value field of text1.
{{i+1}}.{{item.book_name}}
Circular dependency errors may arise when you attempt to reference the data of a row using listView.items[i] from a component located within a List View component. It is advisable to utilize such references only outside the list to avoid such issues.
To facilitate rapid navigation to a specific page, enable the "Show quick jumper" option or set its value to true.
You have the option to configure whether users can customize the number of items displayed per page by enabling or disabling the "Show size changer button," or you can adjust its value in JavaScript. If you choose to disable it, you can set the default page size.
If enabled, you can configure several page sizes for your users to select.
The default total row count of a List View component corresponds to the number of current data items. Alternatively, you can insert a value from a query. For instance, {{query.data[0].count}} can be used.
List View facilitates the exposure of data from inside components through the Items field. You can explore this feature via the Data Browser located in the left pane.
For instance, if you drag an Input component into a List View, you can reference the value of the Rating component in components outside the List View using the following code.
