Bookmark/Favorite

Bookmarking allows users to save and access a list of their favorite items.

In the Paris City Guide app, the user bookmarks favorite spots (by clicking on the heart icon) and finds them in a dedicated section of the app.

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

Prepare your data structure

⚠️ Important: You must first have a Collection containing all the items that can be bookmarked. This collection serves as the base from which users can select items to add to their favorites. For example, if you are creating a product catalog, you need a collection listing all available products.

Open the PandaSuite database.
Create a new property of type Multi-references in your database.
Name this property, for example, “Favorites”.
In the properties, set up the collection to which this multi-reference points.

This property will store the items that the user adds to their favorites.

Implement actions to add/remove favorites

The Multi-state component is particularly useful for implementing a favorites feature because it easily manages different actions (adding and removing) with immediate visual feedback.

Create a button that allows adding or removing an item from the favorites list.
Configure the action to dynamically update the “Favorites” property (of type Multi-references).
- Add a favorite: Add the ID of the selected item to the “Favorites” property and change the visual state (e.g., switch from an empty star to a filled star).
- Remove a favorite: Remove the item ID from the “Favorites” property and return to the initial state.

Display the list of favorites

Use a Collection/List component to dynamically display the items present in the “Favorites” property.
Configure this component to only display items marked as favorites by the user.