# Add to favorites

> Learn how to let your users add or remove any item from a Collection/List to their favorites.

https://docs.pandasuite.com/essentials/data/bookmark-favorite/

**The favorites feature (or *bookmark*) allows users to keep the items they are interested in and come back to them later from a dedicated view.**

[Video: Paris City Guide app: tapping the heart on two places fills it, then both places appear in the favorites view]

In this tutorial you will:

1. Create a **Multi-reference** variable that stores the favorites
2. Add an animated "heart" button inside your **Collection / List**
3. Control the display of the filled / empty heart using the **Condition** component
4. Update the list of favorites with two actions: "Add" / "Remove"
5. Display the favorites collection in a new list (or reuse your existing template)

> **Info: Prerequisite**
>
> You already have a **[Collection / List](https://docs.pandasuite.com/essentials/data/collection/)**
> connected to an internal ([Datastore](https://docs.pandasuite.com/essentials/data/datastore/)) or external (via HTTP
> component) data source.

---

## Create the favorites variable

1. Open the **[Datastore](https://docs.pandasuite.com/essentials/data/datastore/)** (Project level).
2. Click **+ Add a property**.
3. Choose the type **[Multi-reference](https://docs.pandasuite.com/essentials/data/data-types/#multi-references)**
   - **Source**: your main collection (the one displayed in the list).
   - **Property name**: *favorites* (or any other explicit name).
4. **Save** then **Publish**.

> **Info: Why a Multi-reference?**
>
> It keeps multiple links to the selected items without duplicating data. It can
> be reused directly as a **Source** of a **Collection/List**. Functions like
> *By Id*, *Contains*, etc. remain available.

---

## Add the Heart button (Multi-state)

1. Edit the list item (double-click inside the collection).
2. Insert a **[Multi-state](https://docs.pandasuite.com/essentials/components/multi-state/)** at the desired spot in the template.
3. Inside the component, create **two linked states**:

   | State | Content           |
   | ----- | ----------------- |
   | 0     | Empty heart icon  |
   | 1     | Filled heart icon |

[Image: Fav button Multi-state inside the list item, with two linked states, Not favourite and Favourite, and the heart icon on the card]

4. Adjust transitions and durations for a smooth change.

> **Success: Design tip**
>
> By using *linked states*, any future change in the heart’s position or size is
> automatically applied.

---

## Display the correct state with a Condition component

Still inside the item:

1. From **Components**, insert a **Condition** component (non-graphic): ideally place it in the same object folder as the **Multi-state** for readability.
2. In its properties, click **+ Add** to create a condition *Is Favorite*.

**Condition expression** *Is Favorite*:

- **Source**: *favorites* (or the name of your Multi-reference variable)
- **Function**: `Contains`
- **Value**: reference of the current item: (`Current item` → `id` if you’re in a **Collection / List** or a Reference variable (see [Create a dynamic page](https://docs.pandasuite.com/essentials/data/dynamic-page-from-collection-item/)))

3. Enable **Automatic evaluation**.

[Image: Is favorite condition: automatic evaluation on, and an expression checking that the favorites variable contains the current item]

4. Create the *Is Not Favorite* condition

**Condition expression** *Is Not Favorite*:

- **Source**: the *Is Favorite* condition
- **Function**: `False`

[Image: Condition actions: if Is favorite is true, Fav button goes to the Favourite state; if Is not favorite is true, to Not favourite]

Thus, whenever the variable changes or the collection regenerates, the icon adjusts automatically.

---

## Add / Remove a favorite

Select the empty heart icon (in state 1):

1. **Actions** → **Simple tap / Click**
2. **Interact with a data source** → **Datastore**
3. **Create/Update Data (Local)**:

- **Target**: *favorites*
- **Function**: `Add`
- **Value**: reference of the current item: (`Current item` → `id` if you’re in a **Collection / List** or a Reference variable (see [Create a dynamic page](https://docs.pandasuite.com/essentials/data/dynamic-page-from-collection-item/)))

[Image: Single tap/click action on the empty heart: Create/Update Data (Local), Target favorites, Function Add, current item as value]

Repeat the operation on the filled heart icon (state 1) with the function **Remove item**.

The condition created in step 3 immediately detects the change and switches the heart’s state.

---

## Create the “My Favorites” view

### Option 1: a new list

1. In the “Favorites” screen, insert a **Collection / List**.
2. In **Source**, select the `_favorites_` Multi-reference from the **Datastore**.
3. Redesign or bind data the same as your main list.

### Option 2: reuse the existing template

1. Copy your original Collection/List (`Ctrl/Cmd +C` → `Ctrl/Cmd +V`).
2. Change only the **Source** to *favorites*.
3. All bindings (image, text, etc.) remain functional: it saves a lot of time.

[Image: Favorites screen: a Collection / List whose Source is the favorites variable displays the cards of the saved places]

---

## Quick validation

To test your favorites feature:

- Add a favorite → the heart fills and appears in the Favorites view.
- Remove it → the heart becomes empty and the item disappears from the Favorites view.
- Close / relaunch the app: the Multi-reference variable is local and persistent, so favorites remain available (unless uninstalled).

---

## Go further

- Link favorites to a **user account** by saving the Multi-reference in **[Firebase Session](https://docs.pandasuite.com/essentials/components/firebase-session/)**.
- **Sort** or **search** among favorites using the Collection/List options.
- Combine the favorites system with a **filter**, a **search engine**, or a **map**.

---

## Related resources

- [Data types](https://docs.pandasuite.com/essentials/data/data-types/#multi-references)
- [Condition component](https://docs.pandasuite.com/essentials/components/condition/)
- [Multi-state component](https://docs.pandasuite.com/essentials/components/multi-state/)
- [Filter a collection](https://docs.pandasuite.com/essentials/data/filter-a-collection/)
- [Create a dynamic page](https://docs.pandasuite.com/essentials/data/dynamic-page-from-collection-item/)

[Template: Paris City Guide](https://pandasuite.com/templates/paris-city-guide/)