Add to favorites
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.
In this tutorial you will:
- Create a Multi-reference variable that stores the favorites
- Add an animated “heart” button inside your Collection / List
- Control the display of the filled / empty heart using the Condition component
- Update the list of favorites with two actions: “Add” / “Remove”
- Display the favorites collection in a new list (or reuse your existing template)
Prerequisite
You already have a Collection / List connected to an internal (PandaSuite database) or external (via HTTP component) data source.
Create the favorites variable
- Open the PandaSuite Database (Project level).
- Click + Add a property.
- Choose the type Multi-reference
- Source: your main collection (the one displayed in the list).
- Property name: favorites (or any other explicit name).
- Save then Publish.

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)
-
Edit the list item (double-click inside the collection).
-
Insert a Multi-state at the desired spot in the template.
-
Inside the component, create two linked states:
State Content 0 Empty heart icon 1 Filled heart icon

- Adjust transitions and durations for a smooth change.
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:
- From Components, insert a Condition component (non-graphic): ideally place it in the same object folder as the Multi-state for readability.
- 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))
- Enable Automatic evaluation.

- Create the Is Not Favorite condition
Condition expression Is Not Favorite:
- Source: the Is Favorite condition
- Function:
False

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):
- Actions → Simple tap / Click
- Act on a database → PandaSuite Database
- Modify data:
- 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))

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
- In the “Favorites” screen, insert a Collection / List.
- Source → From a database → PandaSuite Database → favorites.
- Redesign or bind data the same as your main list.
Option 2: reuse the existing template
- Copy your original Collection/List (
Ctrl/Cmd +C
→Ctrl/Cmd +V
). - Change only the Source to favorites.
- All bindings (image, text, etc.) remain functional: it saves a lot of time.

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.
- 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
Paris City Guide
Add this template to your account in just a few clicks. Edit and customize it freely.
→ Add this template to your account