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:

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)

---

Create the favorites variable

1. Open the PandaSuite Database (Project level).
2. Click + Add a property.
3. Choose the type Multi-reference
   • Source: your main collection (the one displayed in the list).
   • Property name: favorites (or any other explicit name).
4. Save then Publish.

---

Add the Heart button (Multi-state)

1. Edit the list item (double-click inside the collection).

2. Insert a 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

4. Adjust transitions and durations for a smooth change.

---

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

3. Enable Automatic evaluation.

4. 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):

1. Actions → Simple tap / Click
2. Act on a database → PandaSuite Database
3. 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

1. In the “Favorites” screen, insert a Collection / List.
2. Source → From a database → PandaSuite Database → favorites.
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.

---

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

• Data types
• Condition component
• Multi-state component
• Filter a collection
• Create a dynamic page