Now Bubble AI created this project page for me, and I can view my projects in this table. In the last column, I have the options to edit or delete.

Now, I also have a popup called popup edit project popup, and this is where we need to configure our inputs to accept existing data, because we have data already and would like to make changes. We're not creating a new project — we're editing a project.

And I can see that a bit of work still needs to be done here, and that’s okay.

So how do we, first of all, display information back to a user, and for them to be able to edit that information?

The first thing I'm going to do is, on the popup itself, I'm going to match the content that we're trying to edit. So that's going to be a project, because we're trying to edit a row in the database — or a row in the table that we're looking at.

I'm going to leave the data source empty, because we're not quite sure in which row the user is going to click — they could be wanting to edit any of those three projects that we have. But we need to make sure that data flows from the popup into the next element, and then into the inputs.

I'm going to look at my elements tree on the left-hand side, and I can see that we have another group here. With this group, all I'm going to do is pass the project data through by referencing the parent group's project.

If I expand this group, I can see that I have more groups — and this is very good design practice because it allows granular control over the layout of the elements in these groups.

I can see that Bubble AI went ahead and created these individual groups. To save a bit of time, I'm going to highlight all of them and select the data source: project.

Now for the data source, we just need to go to each one and select the parent group’s project. We can get a bit more granular here.

Now because we've done that, if I go back to Group B, let’s focus now on this input here. Beneath it, Bubble gives us the option to display initial content.

What this means is that if there is a project name, let’s show it back to the user that potentially wants to edit this field. To do that, because we passed data through, we can access the parent again — parent group's project. So we’re accessing the data type project, and what do we want to display here? Well we want to display the name. We can see the label above the input.

Let’s do the same for description — initial content: description.

Let’s do the same for the start date — initial content: start_date.

If we didn’t do this, when a user clicks on edit project, it’ll just be a blank popup with empty fields. So that’s why we are displaying information back to them, and then they can edit it from there.

Then we have some options here — I’m going to leave out status. Doesn’t look like Bubble AI managed to finish this particular one.

So we have set up the data for this popup to be able to receive data and for us to edit it.

Now, how do we pass data into that popup?

I'm going to click on this edit button and I'm going to choose edit workflow. Now, I'm going to click on the plus icon. Now we go to element actions and choose show the popup — so show an element and then select the popup.

As it stands, what's going to happen is Bubble will show a popup. But remember, the popup needs a data source — and we left that blank intentionally.

Let me go back up and open the popup again — remember, we left this data type empty. That’s because we want the option to be able to click on any of these three and pass the data through dynamically.

So let’s continue with this expression.

I'm going to add another one between these two. I'm going to go down to element actions and I'm going to choose display data in a group or a popup.

Let’s display it in the popup edit project. And which data do we want to display contextually? We want to display the row of data that we’re clicking in — that would be the current row’s project.

I could be clicking in any one of these three, so I need to access the current one I’m clicking — current row’s project.

Let’s test this out.

Why don’t we test this middle one — Mobile App Design: develop cross-platform mobile data. By the way, Bubble AI also created this test data for me based on my early prompt when I first created/deleted it.

Let’s click on Edit — and there we go. Mobile app data: develop a cross-platform mobile network. And here are the dates.

Let me cancel that.

Come out of that and try another one — Website Redesign. And there’s our website redesign.

And lastly, Data Migration.

So from here, we can make any change we like, and then configure our workflow on this button to save the data back to the database.