Display collection list

Display the data from your collection as a list.

Connect the data source

To connect your collection to a data source:

Insert the Collection / List component.
In the properties, click on Source and choose From a database. Select your data source.
Click on the Validate button.

⚠️ Your application must first be connected to a data source. For an API such as Airtable, you need the HTTP component. Learn how to do this: Connect to Airtable. Test the request and launch the query when the screen containing your component is displayed.

Create a list item

In the collection, a single item will be created and repeated based on the data source.

Customize the design of this item: card, single-line text... Double-click on the component to edit its content.

If you use a design tool, export each element individually so it can be dynamically linked to data.

💡 Need inspiration for your list item UI? Check out: Guide to list UI design: principles and examples (Justinmind)

Insert a Group component. Adjust its size and visually represent a list item inside.

Now that your template is ready, display the fields from the database ( Name, Address, Description, Image, Category...) using data binding.

Bind text

To display the Name field in a text block, select the text block and click on the data binding for Content.

Select Current item data and navigate through your data source.

💡 By choosing Current item data, you directly access the source data, such as a row from Airtable: Rosa Bonheur.

Bind an image

In Airtable, images are exposed as URLs, which are automatically converted into images by PandaSuite.

Select the image and click on the data binding for Content.

Display conditions

Display conditions are an advanced feature that allows you to automatically select the item to display based on a specific condition. This option becomes available when a second item is added to the Collection / List component. It is particularly useful when the design or structure of an item needs to adapt to the nature of the connected data.

For example, you can display an Image or Video item depending on the value of a Type field in your data source. In the Real Estate Catalog template, this feature is used to indicate whether a property is exclusive or not, based on a boolean field.

💡Tip: To make only part of an item conditional without using global display conditions, simply insert the Condition component inside the item. This allows you to add specific actions based on a multi-state setup.

Combine static and dynamic display with display conditions

It is possible to mix dynamic data sources and static elements to meet different interactivity needs. You can maintain a static display for elements requiring specific, non-generic interactivity (leveraging the many interactive features of PandaSuite) while creating dynamic pages using data binding for a standard display.

Display conditions play a key role here in managing these two types of elements. You can use this feature to target static elements and associate them with a specific renderer. For example, the Condition component can check the identifier of the data source and redirect to the appropriate static page.

Conversely, it is also possible to update your dynamic content to include unique identifiers for screens and use them in a screen change action. By linking these identifiers via data binding, you can create smooth and coherent navigation between your dynamic data and static elements.