Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 27

Managing User Favorite Tools

Recommended resources

Hello again! In our last session, we laid the essential groundwork for the favorites feature by adding a Favorite Tools list to the User data type. Your database is now properly structured to remember which tools each user likes.

Today, we'll build the interactive part of this feature. You'll learn how to create the user-facing "favorite" button and the workflows behind it that actually add and remove tools from the list you created. This lesson will bring the feature to life, allowing users to manage their personal collection of tools directly from the UI. By the end of this session, you'll have a fully functional "add/remove from favorites" system.

The Anatomy of a "Favorite" Action

At its core, a favorites system involves three components that work in harmony:

  1. The Trigger: A UI element, typically an icon like a heart or a star, that the user clicks to express their preference.
  2. The Logic: A workflow that checks if the item is already in the user's favorites list and then performs the correct action—either adding it or removing it.
  3. The Feedback: A visual change in the trigger element to confirm that the action was successful (e.g., a hollow heart icon filling with color).

We'll build this logic by creating two separate workflows, each tied to a different version of the icon, and using conditional rules to show the correct one.

Manipulating Lists in the Database

In the previous lesson, you created a field that is a list of Tools. Now, we need to modify that list. In Bubble, when you want to change a list field that's saved in the database, you don't use operators like :plus item or :minus item (which are for custom states). Instead, you use the workflow actions add and remove.

This article from NocodeAssistant provides a great reference for list operations. The animated GIFs are particularly helpful for visualizing the process.

Complete guide to Operations on List in Bubble.io

This guide covers the essential operators for working with lists in Bubble.

Focus on these sections: First, review the list of Common Bubble operators. Notice the difference between operators like :plus item and actions like add list. Next, carefully study the step-by-step guides for adding and removing items from a list stored in the database. Watch the GIFs for both adding an item and removing an item.

As you can see, the process involves the "Make changes to a thing..." action, where the "thing" is the Current User and the field is your Favorite Tools list.

Building the Toggle: Two Icons, Two Workflows

The most intuitive way to provide user feedback is to change the icon's appearance. We'll achieve this by using two overlapping icons and showing only one at a time.

  • An "unfavorited" icon (e.g., a hollow heart) will be visible when the tool is not in the user's list. Clicking it will add the tool.
  • A "favorited" icon (e.g., a solid heart) will be visible when the tool is in the user's list. Clicking it will remove the tool.

Let's set up the workflows for these actions. The following video demonstrates this exact process of adding and removing individual items from a list field on a database record.

Bubble.io Lesson on Modifying List Fields

This video from Coaching No Code Apps clearly demonstrates how to use the 'add' and 'remove' list operators in a workflow. The example uses "managers" for a "company," but the logic is identical for adding "tools" to a "user's" list.

Watch these two key segments: First, see how to add an individual item to a list. Notice the action is Make changes to a thing... and the operator is add. Next, watch the setup for the opposite action: removing an individual item using the remove operator.

The "Add" Workflow

  1. Trigger: When 'Icon hollow-heart' is clicked
  2. Action: Data (Things) > Make changes to a thing...
  3. Thing to change: Current User
  4. Field to change: Favorite Tools add Current Page's Tool

This workflow tells Bubble: "When the user clicks the empty heart, add the tool currently displayed on the page to the current user's list of favorite tools." Bubble is smart enough to not add the tool if it's already there, so you don't have to worry about duplicates.

The "Remove" Workflow

  1. Trigger: When 'Icon solid-heart' is clicked
  2. Action: Data (Things) > Make changes to a thing...
  3. Thing to change: Current User
  4. Field to change: Favorite Tools remove Current Page's Tool

This workflow is the inverse. It tells Bubble: "When the user clicks the solid heart, remove the tool currently displayed on the page from their favorites list."

Here's an example of what the "remove" action's configuration panel looks like. In this image, the data types are "Event" and "SavedItems", but the structure is exactly the same for your "Tool" and "Favorite Tools".

This image shows the "Make changes to a list..." action. The "List to change" is modified using a `minus item` operation, which is conceptually similar to the `remove` database operation we're using.

Tying It Together with Conditional Visibility

Now that we have the workflows, we need to make sure the correct icon is shown at the correct time. We'll do this using conditional rules.

  1. Place both icons on your tool page, one directly on top of the other.

  2. By default, make the "solid heart" icon not visible on page load.

  3. Set the following conditional rules:

    • On the Solid Heart Icon (the "favorited" state):

      • Go to the Conditional tab.
      • Define a new rule: When Current User's Favorite Tools contains Current Page's Tool.
      • Select the property: This element is visible and check the box.

    • On the Hollow Heart Icon (the "unfavorited" state):

      • Go to the Conditional tab.
      • Define a new rule: When Current User's Favorite Tools doesn't contain Current Page's Tool.
      • Select the property: This element is visible and check the box.

This setup ensures that Bubble is constantly checking if the current tool is in the user's favorites list and displaying the appropriate icon. When a user clicks, the workflow runs, the list is updated, and the conditional rules automatically re-evaluate, swapping the icons instantly.

The logic here is very similar to what is shown in this Buildcamp tutorial, where an icon's appearance and color change based on whether an item is present in a list.

Create and save list selections | Bubble.io Tutorial

This video demonstrates how to create a toggle effect by changing an icon's appearance and running different workflows based on whether an item is in a list. It uses a temporary 'custom state', but the conditional logic for the UI is identical to our database-driven approach.

Watch how a conditional rule is used to change an icon's appearance when an item is in a list. Then, see how two separate workflow actions are created with opposite conditions (...contains... and ...doesn't contain...) to create a toggle effect.

Your Task: Implement the Favorites Toggle (25 minutes)

Now, it's your turn to build this feature in your app. You'll work on the dynamic tool page you created in Module 3.

  1. Add the Icons: Go to your reusable tool page. Add two 'Icon' elements from the visual elements panel. Choose a hollow heart (like fa-heart-o) and a solid heart (fa-heart). Place them directly on top of each other.
  2. Set Initial Visibility: Select the solid heart icon. In the Layout tab, uncheck This element is visible on page load. It's also good practice to check Collapse when hidden.
  3. Configure Conditionals:
    • Select the solid heart icon. Go to its Conditional tab and create the rule to make it visible When Current User's Favorite Tools contains Current Page's Tool.
    • Select the hollow heart icon. Go to its Conditional tab and create the rule to make it visible When Current User's Favorite Tools doesn't contain Current Page's Tool.
  4. Build the Workflows:
    • Right-click the hollow heart icon and "Start/Edit workflow". Build the "add" workflow as described above.
    • Right-click the solid heart icon and "Start/Edit workflow". Build the "remove" workflow.
  5. Test It Out: Preview your page as a logged-in user. Navigate to a tool page. You should see the hollow heart. Click it. It should turn solid. Click it again. It should become hollow again. You can also verify the changes directly in your app's database under the User data type.

Conclusion

Excellent work! You have now connected your front-end interface with your back-end database logic to create a complete, dynamic feature. This "toggle" pattern—using conditional visibility and opposing workflows—is one of the most common and powerful techniques in Bubble development.

Let's recap the key takeaways:

  • Workflows can modify lists stored in your database using the add and remove operators within the "Make changes to a thing..." action.
  • A user-friendly toggle effect can be created by using two separate UI elements (like icons) with opposing workflows.
  • Conditional rules are the glue that connects the database state to the UI, allowing you to show, hide, or change elements based on data like ...contains... or ...doesn't contain....

You now have a way for users to save their favorite tools. In our next lesson, we will build the page where they can see all the tools they've collected. We will create a dedicated user dashboard page to display their list of favorite tools, making the feature truly useful.