Create a list
The List 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 Table, 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 here and add it to resource.
To add a text to your page, find Elements -> List and drag it onto the page.
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 accessor to access data. $item.product_name means to extract the value of the product_name key in each JSON object.
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 layoutClick 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"
Flex + Row
Gird + 1fr 1fr 1fr
Last modified 20d ago