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.

Connect your collection to the base

Display items (the deals) as a drop-down list using the Collection / List component.

Click on Components and insert the Collection / List component.

In the properties, click on Source and choose From a database. Select the HTTP component and select Records.

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.

Click Save and Move to Production

Select your list item within your collection and add an action: Tap / Click > Interact with a component > PandaSuite database > Modify data.

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.