Create a list
Last updated
Was this helpful?
Last updated
Was this helpful?
The element is another valuable tool for presenting elements that follow a common pattern. It is to turn data into a more flexible format instead of a tabular format. Compared to , Lists offer the advantage of creating a more dynamic user interface through CSS techniques such as Flex and Grid. The list element digests an JSON array and convert the array to a list of elements with the same pattern.
In this tutorial, we will use a sample Shopify products dataset to build the list, you can download the data and .
To add a text to your page, find Elements -> List and drag it onto the page.
Similarly, add another text and an image into the list, use ${$item.image_url} as the image url and ${$item.stock} for the text. Use container to control the layout
Click the Preview button to see the result. As you can see, all the values in your data are shown on the page.
Select the list element and try setting the layout to either "Display: Flex" with a direction of "Row," or "Display: Grid" with columns set to "1fr 1fr 1fr"
if you don't have one, or go to the app that you want to add a table
Make sure the list is on editing mode, then drag a Text element into the list and type ${$item.product_name} . ${} tells the system that you are using an to access data. $item.product_name means to extract the value of the product_name key in each JSON object.
