# Dynamic page from collection item

> Learn how to create a dynamic page from an item in a collection using PandaSuite. This guide covers creating detailed pages and saving a reference to the selected item.

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

**Create a dynamic page from an item in a collection.**

[Video: Creating a dynamic page using collections](https://www.youtube.com/embed/Gskr6GbnDO8?&hl=en&cc_lang_pref=en&cc_load_policy=1)

> **Warning: Use a Collection source**
>
> This workflow stores a **Reference** to the selected item, so it needs a
> **Collection** source. With an **Array** source you only get **Current Index**
> (the row's position): you can read fields with **By Index** but you do not get
> a reusable reference. See
> [Current Index](https://docs.pandasuite.com/essentials/data/data-binding/#current-index).

## Create a detailed page

Create the page to present your item in more details. You can create it wherever you want: on a new screen, in a linked state, in a [Pop-up](https://docs.pandasuite.com/essentials/components/pop-up/)...

To create the content of the view, we recommend using the [Flexbox](https://docs.pandasuite.com/essentials/components/flexbox/) component. This component automatically adapts its layout according to its content and can display a scroll bar if needed.

[Image: Item View pop-up of the Paris guide: its Flexbox, framed in the objects list, holds the photo, title, district and About text]

## Save the selected item reference

To display the right data in the detail view, store a reference to the selected item in a variable.

Go to the [Datastore](https://docs.pandasuite.com/essentials/data/datastore/).

Create a new [Reference](https://docs.pandasuite.com/essentials/data/data-types/#reference) property pointing to your collection. In our example, it has been named: *selected*. A reference stores a pointer to a specific item in the collection, giving you direct access to all its data, rather than storing a plain text identifier.

> **Info**
>
> In this example, the reference points to a **Transform** component that
> normalizes data from Airtable before exposing it to the app. If you are using
> the Datastore or another source directly, the reference will point to your
> corresponding collection.

[Image: Datastore with the selected property, of type Reference, pointing to the /results collection of the Transform18451 component]

Click on **Save** and **Go to Production**

Select your list item within your collection and add an action: **On Click** > **Interact with a data source** > **Datastore** > **Create/Update Data (Local)**.

[Video: tap/click action on the list item: Create/Update Data (Local) sets the selected reference to the Current item]

## Display data from the selected item

Because the variable stores a **Reference**, you can bind directly to the fields of the selected item in your detail view: data binding [follows the reference](https://docs.pandasuite.com/essentials/data/data-binding/#following-a-reference) to the item it points to.

Select the text block and click on the Content data binding.

[Video: the detail title Content: Transformed Results, By Id with the selected reference as Identifier, then the Name field]

Do the same with all the objects in the view.