This guide will teach you the difference between both the ‘current user’ and ‘current page user’ options in Bubble. If you’re building a feature that requires a user profile page, this is a fairly common dilemma you’ll run into throughout the process.
This complete guide will cover everything you need to know about working with the ‘current user’ and ‘current page user’ options. This includes:
- What causes both options to become available
- Understanding the difference between both options
- How to insert dynamic data for each option
- How to restrict features to the current user
Full Transcript of Tutorial
Like anything in Bubble, the best way to learn is by showing you a real-world example. If we open my Bubble editor and run a preview of my app, you’ll see on my homepage that I have a repeating group displaying a list of all the users in my app.
Inside each repeating group cell, I’m showing a series of information about each user. This includes their profile photo, their name, their bio, and a ‘view profile’ button.
When I click on the bottom element, Bubble will redirect us to a profile page that displays all of the information for the specific person we’ve selected.
1. What causes both options to become available
After previewing my application, we can open our Bubble editor and review how this was built.
When we open the user profile page, the first thing you’ll notice is that the page has a type of content set on it. This allows us to create a dynamic page.
One of Bubble’s core features is the ability to create dynamic pages. These pages allow you to store the value of a specific data type, from which you can then send and display data from your database.
For example, let’s say we had a thousand users within our database and we wanted to display a profile page for each one of these people. Theoretically, you’d need to create a thousand unique pages to do this (one for each user). Thankfully in Bubble, however, you have the ability to create just one dynamic profile page, then display the data of a specific user at any given time.
In my Bubble editor, if I double-click on the overall page, you’ll see I’ve set the content type to be a ‘user’. I’ve selected this option so Bubble knows that at any point in time, I’d like to display the details of a user on this page.
And now it’s at this very point that you’ll see the option to reference both the ‘current user’ and the ‘current page user’ choices.
On my user profile page, let’s say I want to add the details of the person whose profile we’re viewing. In my example, I’ve added a text element to the page.
Within this text element, I’d like to insert some dynamic data and display the name of the person whose profile I’m currently viewing.
If I was to remove the static text and choose to insert dynamic data, we’ll now see the two options of the ‘current user’ or the ‘current page user’.
2. Understanding the difference between both options
So what is the difference between both of these choices?
The best way to interpret the difference is by sharing yet another real-world example.
Let’s say you’re logged into your account and decide to view my profile.
At this point in time, you would be the ‘current user’ because you’re the person who’s currently logged in. That would mean that if you’re viewing my profile, I would be the ‘current page user’ as my details are displayed on the current page.
3. How to insert dynamic data for each option
Based on my example above, if you wanted to display the details of my profile (remembering that I’m the ‘current page user’), you could select the text element on our profile page, then choose to insert dynamic data.
Because the ‘current page user’ is linked to our user data type, we can easily reference all of the data fields within that list. This means we could display my name, my bio, or even my profile photo.
And just like that, you now know the difference between who the current user is and who the current page user is. But of course, like anything in Bubble, just when you think you’re getting the hang of things, there’s more complexity to any scenario.
4. How to restrict features when the ‘current user’ is also the ‘current page user’
What I’d like to point out is the scenario in which the ‘current user’ can also be the ‘current page user’. In that situation, I want to talk about what’s going to happen.
If I was to open the preview of my app again and log into my account, I’d be viewing the home page as myself.
From here, I can also see my own profile being displayed in the list of users inside our repeating group.
If I was to click through to view my own profile, I would now not only be the ‘current user’, but I’d also become the ‘current page user’. Because I’m viewing a user profile page, my own details are being displayed.
At the bottom of the user profile page, you’ll see that I have a small text element that displays the words ‘edit profile’.
Now, if I was viewing someone else’s profile, I obviously shouldn’t have access to edit their details. If I was viewing my own profile, however, this text element should be visible.
To create this experience, we’ll need to make this text element hidden on our page unless the current user is viewing their own profile.
If we select the text element and open the layout tab, we can start by selecting to hide this element on our page by default.
Within our layout tab, I’ll also select the option to ‘collapse this element when hidden’ to make sure it doesn’t take up any empty space on our page when it’s not needed.
Now, we could open our conditional tab and define a new condition. Within this condition, I’d like to recognize when the ‘current user’ is viewing their own profile, in which case I would like this element to become visible. This means we’ll select when the ‘current page user’ is the ‘current user’. When this behavior is true, our text element will be shown.
If I was to run another preview of my application and show you how this functions, what you’ll see is when we view someone else’s profile, this text element is no longer visible.
When we view our own profile, however, it will then become visible once again. If I click on this text element, it will also allow me to edit my own profile.
And just like that, you now know the difference between the ‘current user’ and the ‘current page user’ in Bubble. I hope this helps simplify the whole process of building user profile pages inside your app.