Display a collection from Airtable
Display the data of your Airtable database as a list. When the user clicks on an item in the list, a detailed view appears.
The Paris City Guide mobile application references a list of good deals in Paris (restaurants, museums etc...). The good plans ( Rosa Bonheur, Chez Alain Miam Miam...) are elements of an Airtable base, each good plan is on a line. The base contains several fields (Name, Address, Description, Image, Category...) which are presented as columns.
In this article
Connect your collection to the base
Click Validate.
⚠️ Beforehand, your application must be connected to Airtable via the HTTP component. Find out how to do this: Connect to Airtable. Test the request and start the request when the screen where your component is located is displayed.
Create a list item
Create a template to display the deal item. This template will automatically repeat from your data.
You can choose any design: card, text on a line... If you use a design tool, export each element individually so that it can be dynamically connected to a data.
💡 If you want some inspiration for the UI of your list items: Guide to list UI design: principles and examples (Justinmind)
Double click on the component Collection/List to go inside. Insert component Group. Adjust its size and inside, visually represent a list item.
Now that your template is ready, display in it the database fields ( Name, Address, Description, Image, Category. ..) through the data binding.
Display text
To display the field Name in a block of text, select that text block and click on the data binding of Content.
Select Current Item Data and browse your data source.
💡 Choosing Current Item Data takes you directly to the source data, in this case to a row in the Airtable database:Rosa Bonheur.
Display an image
On Airtable, images are exposed as a URL which is then automatically converted to an image by PandaSuite.
Select the image and click on the data binding of Content.
Create a detailed view
Create the view to present in more detail your good plan. You can create it anywhere you want: on a new screen, in a linked report, in a component Pop-up...
To create the view content, we recommend you use the component Flexbox. This one automatically adapts its layout according to its content and can make a scroll bar appear if needed.
Save the identifier of the selected item
Each item in your collection contains a unique identifier on Airtable. It allows you to uniquely identify each deal (each row) and then easily access it. To display the right data in the view, we will store this identifier in a variable.
Go to the PandaSuite database.
Create a new property of type Text. In our example, this was named: selected_item.
Display the data of a selected item
The By Id
function allows you to retrieve an element from a given identifier. Use this function and the variable to access the data of the selected element from its unique identifier.
Select the block of text and click on the data binding of Content.
Do the same with all the objects in the view.