Airtable list ▶️

This Airtable list template allows you to use an Airtable list in your app. You will be able to manage a list of data connected to your Airtable account.

Composition of the template :

This template is composed of an Airtable node inside which there is :

a section with a Text node for the title, and an Input node that serves as a search bar for your list.
a Conditon node with :
- a True condition with a Spinner node and a Text node for the list loading time.
- a False condition with a grid

Set up your Airtable base :

Database Airtable list.png

The Airtable database that you will connect to the project must be composed as follows:

a column "Name "* of type Single line text for the name of the place, the city, the site...
an "Image "* column of type Attachment, which can contain one or more images illustrating the place.
a column "Description "* of type Long text to contain a small explanatory text.
a column "Latitude "* of type Number in decimal format with the maximum precision, containing the coordinates of the latitude of the site.
a "Longitude "* column, on the same scheme as the previous one, containing the coordinates of the longitude.
an "Id "* column of type Formula, in "RECORD_ID()" format.

These nominations must be strictly respected so that the call to the Airtable database can be done correctly. If you want to give them another name, see the complex tutorial Your App from Scratch.

Connect your Airtable base to your project:

Copy your API key that you can find in the Overview page of your Airtable account.
Go back to Voltapp then in the Airtable node, delete the previous API key, and copy yours. Then select the right database and the corresponding table.
Click on Refresh.

Your Airtable database is now connected. From the Airtable node, switch to Graph mode. Two blocks were deleted when you connected your database. You will have to recreate them so that Voltapp can correctly call your database.

Pull a link from the top block define isLoading then add the Action block retrieve rows.
Connect the output of the block to the input of the top block define spots and connect the parameter "rows" to the parameter "spots" of the same block.
Repeat the same operation from the lower define isLoading block with the lower define spots block.
Click on the new block get rows, then in the parameter "filter by formula" click on the connection icon.
In the drop-down menu that appears, choose Convert to formula then enter the following formula: SEARCH("@searchQuery", {Name}) >0

Your Airtable database is now connected. Click on Preview to make sure.

Customize the About page:

The About page of this template can be customized to your liking. Click on each node to customize the content.

If you want to add elements, like a link to your website for example, here's how to do it:

In About, add a Section node that you will set to horizontal.
Place all the nodes of the page inside.
Add a Link node. Then fill in the fields as you wish.

This way your addition will automatically be well ordered in the rest of the page in relation to the other elements.