Skip to content

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)

Prerequisite

You already have a Collection / List connected to an internal (PandaSuite database) or external (via HTTP component) data source.


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.

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 at the desired spot in the template.

  3. Inside the component, create two linked states:

    StateContent
    0Empty heart icon
    1Filled heart icon
  1. 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:

  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 itemid if you’re in a Collection / List or a Reference variable (see Create a dynamic page))
  1. Enable Automatic evaluation.
  1. 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. ActionsSimple tap / Click
  2. Act on a databasePandaSuite Database
  3. Modify data:
  • Target: favorites
  • Function: Add
  • Value: reference of the current item: (Current itemid 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. SourceFrom a databasePandaSuite Databasefavorites.
  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 +CCtrl/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.

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