Transcript
Bubble AI created a really nice dashboard for my project management app and I can see what potentially looks like some dynamic information, such as two active projects, two up-and-coming deadlines, some recent tasks, and some active projects.
Now, let's jump into the editor to see where this data is coming from.
So here we are in the editor and I have an idea to make this page a little bit more welcoming to the user that is using it. I'm going to click on this dashboard text and what I'd like to show is just a little welcome message to the user using the app.
So in the property editor, I'm going to type Hi. Now, Bubble is asking me if I'd like to Insert dynamic data, and this is where the power of Bubble becomes really apparent because instead of this static text, I can pull information from the database and display it back to the user.
So I'm going to click on Insert dynamic data and now I'm going to choose a data source. By default, we have a data source that you'll be using very often. It's called Current User and the Current User is the person holding the mouse. You are the current user, I am the current user. So let's see how we can get the current user's first name.
I'm going to click on Current User and we have a name field. Let me click on that. Okay, Hi Current Users's name. Now, when we're building dynamically, when our expressions are quite long, sometimes the design doesn't look very good just from the editor perspective. Your actual user using the app will basically see, Hi and then first name, but as a developer, I can actually add a placeholder here to make it more realistic within the editor itself. So I'm going to type my name because this is what it would look like if I was logged in.
Now, Bubble AI actually created some accounts for me, so let's have a look in the Data tab. And if I go down to Users and App Data, I can see some names. Okay, looking good.
So earlier on, I signed in as Zara so let's see if Zara is being picked up. Now, I set the Current User's name so what I'm expecting for it to say is Hi Zara Hendrix. Because I just wanted to reference the first name, I'm manually going to edit this record, delete the last name, and click save. Okay, so let's go back to the Design tab and I can see I've got my placeholder, Hi Gregory, but actually I'm tapping into the database by referencing Current User's name.
Let's preview this to see what it looks like from a user perspective and remember I'm now logged in as Zara. And there we go, Hi Zara. That's pretty great! We could even combine this with an emoji, with maybe a little hand that's waving.
Let's continue looking at dynamic data. So in the editor, it said active projects and then it just has the word projects but here it has two, so that means that because Zara is logged in, she's probably connected to two projects. Back in the editor and I can see some placeholder texts Projects, but moreover I can see a dynamic expression here: Search for Projects and then count. Okay, let's click on Search for Projects and here we have what are called constraints.
Now, where do these constraints come from? Owner = Current User, is_active is yes—well this actually comes from the database and these are fields in our database tables. So let's go to the Data tab, Data types and have a look at Project, and here we can see that is_active is a yes/no field and that owner is a user.
Okay and I'm going to go to Users and I can see that Zara's email address is [email protected]. I'm actually going to adapt this so it's easier to read so this is just test data absolutely fine to change in the version-test database. Okay, that's easier.
Let's go to Projects and looking at the owner column. Here, I can see that Zara has one, two, three projects which she is the owner, but hang on, let's take another look at the front end. I can only see two active projects. What's happened here?
Let's go to the is_active column and here I can see that Zara has one of her projects is set to no. Let's change this no to a yes. Naturally, this would be done by a user in a popup or some UI in the dashboard, but now I've set that is_active to yes. Let's see if that's reflected on the front end and, there we go, Active Projects equals 3 and let's just remind ourselves what this expression look like.
Head over to the Design tab, Search for Projects, owner = Current User, is_active is yes. What if I removed owner = Current User? I can click on the bin icon and let's have a look at the front end. Now, I can see that we have 7 projects which reflects all of the available projects in the database and naturally maybe Zara wants to see all Active Projects, maybe she is the team leader.
Why don't we set up a similar expression for tasks, Pending Tasks? Let's first of all see what's in our database and that will allow us to understand what result we're looking for here. So let's go to the Tasks table and we can see that assigned to Zara, we have one, two, three. We also have statuses: Not Started, In Progress, Completed. So let's play with this a little bit.
Let's go back to the Design tab and let's write a dynamic expression. So Insert dynamic data. I'm going to say Do a Search for and now let's choose the Task data type. There we go.
Now, Bubble gives us a little more option here. What happens when I click that? Well, here we have all of these really powerful operators available to us. I'm simply going to say count because that's what we're looking for at the end of the day—go Search for Tasks and bring back the count of all of the tasks that you can find. Now, I'm going to add back a canvas placeholder Tasks just so it's nice and neat from a a developer perspective.
But now I don't want all tasks, I want pending tasks assigned to me so I'm going to say Search for Tasks and now we need a status. So here, I'm just going to type in In Progress. Now, make sure that you get the case correct because it is case sensitive. Okay, so Search for Tasks with the status = In Progress that are assigned_to the Current User so let's say assign_to = Current User.
Okay, let's preview the page and there we have one In Progress Task. Let's make sure that as a developer, we've got our expression correct by checking the database—the single source of truth.
Here, I am in the Task table and I have Zara, Zara, Zara and I have Completed, Not Started, and, here we go, one In Progress task so we are confident that our expression to search for Tasks is correct.