Airtable list ▶️

Ce template Airtable list vous permet d’utiliser une liste Airtable dans votre app. Vous allez pouvoir gérer une liste de données connectée à votre compte Airtable.

Composition du template :

Ce template est composé d’un noeud Airtable à l’intérieur duquel on trouve :

d’une section avec un noeud Texte pour le titre, et un noeud Input qui sert de barre de recherche pour votre liste.
un noeud Conditon avec :
- un condition True avec un noeud Spinner et un noeud Texte pour le temps de chargement de la liste.
- une condition False avec une grille

Mettre en place votre base Airtable :

Database Airtable list.png

La base Airtable que vous allez connecter au projet doit être composé de la manière qui suit :

une colonne “Name”* de type Single line text pour le nom du lieu, de la ville, du site...
une colonne “Image”* de type Attachment, qui pourra contenir une ou plusieurs images illustrant le lieu.
une colonne “Description”* de type Long text pour contenir un petit texte explicatif.
une colonne “Latitude”* de type Number au format décimal avec la précisoin maximale, contenant les coordonnées de la latitude du site.
une colonne “Longitude”*, sur le même schéma que la précédente, contenant les coordonnées de la longitude.
une colonne “Id”* de type Formula, au format “RECORD_ID()”.

*Ces nominations doivent être strictement respectées pour que l’appel à la base Airtable puisse se faire correctement. Si vous souhaitez leur donner un autre nom, reportez-vous au tutoriel complexe Ton App from Scratch.

Connecter votre base Airtable à votre projet :

Copier votre clé API que vous trouverez dans la page Aperçu de votre compte Airtable.
Retournez sur Voltapp puis dans le noeud Airtable, supprimer la précédente clé API, et copier la vôtre. Sélectionnez ensuite la bonne base de données puis la table correspondante.
Cliquez sur Actualiser.

Votre base de données Airtable est maintenant connectée. Depuis le noeud Airtable, passez en mode Graphe. Deux blocs ont été supprimés lorsque vous avez connecté votre base. Il va falloir les recréer pour que Voltapp puisse correctement faire appel à votre base de données.

Tirez un lien depuis le bloc supérieur définir isLoading puis ajoutez le bloc Action récupérer des lignes.
Connectez la sortie du bloc à l’entrée du bloc supérieur définir spots et connectez le paramètre “lignes” au paramètre “spots” du même bloc.
Répétez la même opération depuis le bloc inférieur définir isLoading avec le bloc inférieur définir spots.
Cliquez sur le nouveau bloc récupérer des lignes, puis au niveau du paramètre “filtrer par formule” cliquez sur l’icône connection.
Dans le menu déroulant qui apparaît, choisissez Convertir en formule puis rentrez la formule suivante : SEARCH("@searchQuery", {Name}) >0

Votre base de données Airtable est maintenant connectée. Cliquez sur Aperçu pour vous en assurer.

Personnalisez la page À Propos :

La Page À Propos de ce template peut être personnalisée à votre guise. Cliquez sur chaque noeud pour en adapter le contenu.

Si vous souhaitez ajouter des éléments, comme un lien vers votre site internet par exemple, voici comment faire :

Dans About, ajoutez un noeud Section que vous configurerez à l’horizontal.
Placez tous les noeuds de la page à l’intérieur.
Ajoutez un noeud Lien. Puis renseignez les champs comme vous le désirez.

De cette façon votre ajout sera automatiquement bien ordonné dans le reste de la page par rapport aux autres éléments.