# Créer une page dynamique

> Explorez comment créer une page dynamique à partir d'un élément d'une collection avec des étapes détaillées. Utilisez des composants PandaSuite comme Flexbox et Pop-up pour une présentation efficace.

https://docs.pandasuite.com/fr/essentials/data/dynamic-page-from-collection-item/

**Créez une page dynamique à partir d'un élément d'une collection.**

[Vidéo : Créer une page dynamique en utilisant des collections](https://www.youtube.com/embed/Gskr6GbnDO8?&hl=fr&cc_lang_pref=fr&cc_load_policy=1)

> **Attention : Utilisez une source Collection**
>
> Ce workflow stocke une **Référence** vers l'item sélectionné : il lui faut
> une source **Collection**. Avec une source **Tableau**, vous n'obtenez que
> **Index courant** (la position de la ligne) : vous pouvez lire les champs avec
> **By Index** mais vous n'obtenez pas de référence réutilisable. Voir
> [Index courant](https://docs.pandasuite.com/fr/essentials/data/data-binding/#index-courant).

## 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](https://docs.pandasuite.com/fr/essentials/components/pop-up/)…

Pour créer le contenu de la vue, nous vous recommandons d'utiliser le composant [Flexbox](https://docs.pandasuite.com/fr/essentials/components/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.

[Image : Pop-up Item View du guide de Paris : son Flexbox, encadré dans la liste des objets, contient la photo, le titre, l'arrondissement et le texte About]

## 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](https://docs.pandasuite.com/fr/essentials/data/datastore/).

Créez une nouvelle propriété de type [Référence](https://docs.pandasuite.com/fr/essentials/data/data-types/#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.

> **Info**
>
> 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.

[Image : Datastore avec la propriété selected, de type Référence, qui pointe vers la collection /results du composant Transform18451]

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)**.

[Vidéo : action au clic sur l'élément de liste : Créer/Modifier une donnée (local) définit la référence selected sur l'élément courant]

## 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 : le data binding [suit la référence](https://docs.pandasuite.com/fr/essentials/data/data-binding/#suivre-une-référence) jusqu'à l'élément pointé.

Sélectionnez le bloc de texte et cliquez sur le data binding de Contenu.

[Vidéo : le Contenu du titre de la fiche : Transformed Results, By Id avec la référence selected en identifiant, puis le champ Name]

Faites de même avec tous les objets de la vue.