Créer une page dynamique
Créez une page dynamique à partir d’un élément d’une collection.
Créer une page détaillée
Créez la page pour présenter de manière plus détaillée votre bon plan. Vous pouvez la créer où vous voulez : sur un nouvel écran, dans un état lié, dans un composant Pop-up…
Pour créer le contenu de la vue, nous vous recommandons d’utiliser le composant Flexbox. Celui-ci adapte automatiquement sa mise en page en fonction de son contenu et peut faire apparaître une barre de défilement si besoin.
Sauvegarder la référence de l’élément sélectionné
Pour afficher les bonnes données dans la vue détaillée, nous allons stocker une référence vers l’élément sélectionné dans une variable.
Rendez-vous dans le Datastore.
Créez une nouvelle propriété de type Référence pointant vers votre collection. Dans notre exemple, celle-ci a été nommée : selected. Une référence stocke un pointeur vers un élément précis de la collection, ce qui permet d’accéder directement à toutes ses données sans stocker un simple identifiant texte.
Dans cet exemple, la référence pointe vers un composant Transform qui normalise les données issues d’Airtable avant de les exposer à l’application. Si vous utilisez directement le Datastore ou une autre source, la référence pointera vers votre collection correspondante.
Cliquez sur Sauvegarder et Mettre en production
Sélectionnez votre élément de liste à l’intérieur de votre collection et ajoutez une action : Au clic > Agir sur une source de données > Datastore > Créer/Modifier une donnée (Local).
Afficher les données de l’élément sélectionné
Comme la variable stocke une Référence, vous pouvez binder directement les champs de l’élément sélectionné dans votre vue détaillée.
Sélectionnez le bloc de texte et cliquez sur le data binding de Contenu.
Faites de même avec tous les objets de la vue.