Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

How To Edit Table Data With A Popup In Bubble

In this Bubble.io tutorial video we demonstrate how to use a Popup to edit data in a repeating group. We show how to create a Popup and the Workflow needed to display the Popup pre-populated with any existing data.

In this video, I'm going to demonstrate how to create a popup to allow me to edit these contacts without leaving this page. So I've got a repeating group here that lists through contacts in my database. And I've just put in an edit icon on the far right. So let's bring in a pop up element and I'm going to make this a column and I'm going to give it some padding.

Header

Then add in a header and the field. Let's just focus on editing the name. So I'm going to check in my contacts. I've just got one name field rather than a first name and a last name. So I'm going to put in an input and I'm using the new responsive engine here.

So I'm going to set it as 100%. I'm also going to add in some spacing here between each element and so the placeholder this is name.

And let's add in a save button as well.

So you could of course add in as many different fields as you like.

And then let's get rid of the min height so it tidies it all up and right, let's get some workflows in motion. Oh, before we do that, because I want to be able to tell this pop up the type of data that I'm editing. So I set it as type contact. So that means that I can then go and create a workflow of this button which will show the pop up. And then I need to tell it and it handily recommends the next step.

I need to display data in that popup and that is going to be current Group's Contact because that's referring to the group that the icon is in the current group. So let's check if that works.

Okay, now I can't tell that it's actually working or not because I've not got any data being filled into this field. So ideally I want this field to contain existing data. So this is one way of going about creating a pop up to edit data. The other way to go about it this way we use a save button. The other way to go about it will be to use auto binding.

So watch out for another video on that. But for now, we're going to use the save button. So if I go back onto my pop up, I then need to give my input name, initial content. And because I've said that the parent which is the pop up is of Type contact and I filled in that contact, I can refer to it here as Name. I can then even tick that this should not be empty.

Show and hide

And that's when I now create a workflow, make changes to a thing I can make changes to. This is the same as selecting here. They're both the same location and then Name and I find my input field brilliant. And then this is the step that's easiest to forget. I want to hide my pop up when I click the save button.

Okay? So now it's filled in, and you can see that it's updated and it's saved. So there is another way to go about this. As I mentioned a moment ago, that would be to use Auto binding. And I'm going to stop this video where I am now.

I'm going to go and record another one that shows you how to use Auto binding to get the same result.

 

Latest videos

menu