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 28

Building a User Dashboard

Recommended resources

Welcome back! In the last two lessons, you did the essential database and workflow setup for a user-specific "favorites" feature. Users can now log in and mark tools they like, and Bubble saves that preference directly to their user account.

This lesson is where that work pays off for the user. We will create a dedicated user dashboard, the central hub for logged-in users. On this page, you'll build the sections to display both their hand-picked favorite tools and a dynamic list of the tools they've used most recently. This will bring your platform's user-centric features to life and provide a personalized experience.

What Makes a Good Dashboard?

Before we jump into the Bubble editor, let's think about the purpose of a dashboard. A dashboard's primary job is to give users quick access to the information and actions most relevant to them. Given your background in web and graphic design, you know that a good layout is crucial for this.

The following video from Coaching No Code Apps provides an excellent overview of common dashboard design patterns and best practices.

How to Build a Dashboard on Bubble.io

This video covers key design principles for building an effective dashboard, emphasizing user orientation and clean layout.

Watch these two segments to get into the right mindset: First, absorb the initial discussion on dashboard patterns and purpose. Notice the common layouts, like the left-side navigation and the use of distinct sections or "cards". Then, skip ahead and watch the part about user orientation. The key ideas here are clear labeling and using styles consistently to help users scan information quickly.

As you saw, a clean structure and clear labels are key. We'll apply these principles by creating a new "Dashboard" page with distinct sections for "Favorite Tools" and "Recently Used Tools."

This is an example of a well-structured dashboard in the Bubble editor. Note the clear sections for navigation on the left and content on the right, which is broken down further into logical groups.

Part 1: Displaying Favorite Tools

You've already done the hard part: creating the Favorite Tools list on the User data type and building the workflow to add tools to it. Now, we just need to tell Bubble to display that specific list on the dashboard. The Repeating Group element is perfect for this.

The process involves two main steps:

  1. Set the Data Source: Point the repeating group to the list you want to display, which in this case is Current User's Favorite Tools.
  2. Populate the Cells: Place text and button elements inside the first cell of the repeating group and configure them to show the data for the Current cell's Tool.

This is a very common task in Bubble. This short video clearly demonstrates the two primary methods for showing a user's own data, which we will use for both our "favorites" and "recently used" lists.

Back to Basics - How to Show Only Current User Data | Bubble.io Tutorial

This tutorial from Guil explains how to show only the current user's data in a repeating group.

Focus on the two different methods shown for setting the data source: The first method, using Current User's tasks, is exactly what we will do for our favorite tools. The second method, using Do a search for... with a constraint, is the technique we will use later for our "recently used" list.

The core idea is that since the list of favorites already exists on the User object, we don't need to do a new search; we can just reference it directly. A Bubble forum discussion confirms this is the most efficient method.

Displaying list of data type in a repeating group - Questions

This forum thread discusses the exact problem of displaying a list of bookmarked items from the User's data field.

Read through the main solution provided by the user adamhholmes. Focus on the part where he advises to use the list directly as the data source, and then refer to the Current cell's... item to display the data inside the repeating group. This is the pattern you will follow.

Part 2: Tracking and Displaying Recently Used Tools

The "recently used" feature is a bit more complex. If we just added a "Recently Used" list to the User, we would have no way to know the order in which tools were added. Bubble's lists don't inherently remember their order.

To solve this, we need a different data structure. We'll create a new data type that acts as a log entry every time a user visits a tool.

  • New Data Type: Let's call it RecentView.
  • Fields:
    • Tool (of type Tool)
    • User (of type User)
  • Timestamp: Bubble automatically adds a Creation Date to every new data entry, which we can use to sort our log.

This approach is a standard pattern for tracking activity over time. The following forum post discusses this exact challenge and solution.

Bubble Forum

This forum post addresses the problem of sorting items by the order they were viewed.

First, read the original problem description to understand the limitation. Then, focus on the solution proposed by user hanan1. Pay close attention to the second option, which suggests you create a new datatype. This is the strategy we'll use. Also, note the important point about setting a limit for scalability.

With this new data type in place, the process will be:

  1. Log the View: On your main dynamic tool page, create a workflow that runs when the page is loaded. This workflow will create a new RecentView entry, linking the Current Page's Tool to the Current User.
  2. Display the Log: On the dashboard, add a second repeating group. This time, its data source will be a Do a search for RecentViews, constrained to the Current User and sorted by Creation Date in descending order.

Your Task: Build the User Dashboard (40 minutes)

It's time to put these concepts into practice.

1. Create the Dashboard Page & Layout:

  • Create a new page in your Bubble app named dashboard.
  • As a logged-in user, you should only be able to see this page. On the page's property editor, check the box "Redirect user to a login page if not logged in".
  • Add a main title to the page, like "My Dashboard".
  • Add two Group elements to serve as containers, and place Text elements inside them as titles: "My Favorite Tools" and "Recently Used".

2. Implement the "Favorite Tools" Display:

  • Under the "My Favorite Tools" title, add a Repeating Group.
  • Set its Type of content to Tool.
  • Set its Data source to Current User's Favorite Tools.
  • Inside the first cell, add a Text element. Set its dynamic content to Current cell's Tool's Name.
  • Add another Text element for Current cell's Tool's Description if you wish.
  • Crucially, make the cell itself a link. Select the repeating group, and in its properties, choose "Go to page..." as the action for when a cell is clicked. Set the destination to your dynamic tool page and the Data to send as Current cell's Tool.

3. Set Up the "Recently Used" Data Structure:

  • Go to the Data tab.
  • Create a new data type called RecentView.
  • Add two new fields to RecentView:
    • Tool (field type Tool)
    • User (field type User)

4. Create the "Recently Used" Logging Workflow:

  • Navigate to your dynamic tool page.
  • Go to the Workflow tab and create a new event: General > Page is loaded.
  • Add an action: Data (Things) > Create a new thing...
    • Type: RecentView.
    • Set a field: Tool = Current page's Tool.
    • Set another field: User = Current User.
  • (Optional but recommended) To prevent duplicates, add an action before the "Create" step: Data (Things) > Delete a list of things....
    • Type to delete: RecentView.
    • Source: Do a search for RecentViews.
    • Constraints: Tool = Current Page's Tool AND User = Current User. This ensures that if a user visits a tool they've seen before, the old log entry is deleted before the new one is created, effectively moving it to the top of the "recents" list.

5. Implement the "Recently Used" Display:

  • Back on your dashboard page, under the "Recently Used" title, add another Repeating Group.
  • Set its Type of content to RecentView.
  • For the Data source, select Do a search for.
    • Type: RecentView.
    • Add a constraint: User = Current User.
    • Add a sort parameter: Sort by: Creation Date, and check the Descending box.
  • Inside the first cell, add a Text element. The dynamic content will be Current cell's RecentView's Tool's Name.
  • Just like before, make the cell a link to your dynamic tool page, this time sending Current cell's RecentView's Tool as the data.

6. Test Everything:

  • Log into your app as a test user.
  • Navigate to a few different tool pages. Favorite one or two of them.
  • Go to your new /dashboard page. You should see your favorited tools in one list and the tools you just visited in the other list, with the most recent one at the top.

Conclusion

Fantastic work today! You have successfully created a personalized dashboard, a cornerstone of any user-centric application. This not only makes your platform more useful but also demonstrates your growing mastery of Bubble's data handling capabilities.

Here are the key takeaways from this lesson:

  • Displaying User Lists: You can easily display a list of items stored on the User data type by setting a repeating group's data source directly to that list field (e.g., Current User's Favorite Tools).
  • Tracking Time-Based Activity: For features like "recently used," where order matters, the best practice is to create a separate data type that logs each event. You can then search and sort these logs by their Creation Date.
  • Dashboard Design: A good dashboard presents relevant information clearly and provides quick access to important parts of the application, enhancing the overall user experience.

You have now built a robust system for user accounts, favorites, and recent activity. In our next module, we'll take a major step toward your goal of integrating external tools by exploring APIs. You'll learn how to connect your Bubble app to outside services to fetch and display data, opening up a world of possibilities.