How To Edit Table Data With A Popup In Bubble

Creating a Pop-up for Editing Contacts

In this video, I'm going to demonstrate how to create a pop-up 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.

Setting Up the Pop-up Element

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 and 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. Okay, I've just got one name field rather than a first name and a last name.

Adding Input Fields and Buttons

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 them in height so this ties it all up.

Setting Up Workflows

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 candidly recommends the next step. I need to display data in that pop-up and that is going to be current groups contact because that's referring to the group that the icon is in the current group.

Testing and Refining the Pop-up

Let's check that 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 and the other ways to go about it this way we'll use a save button the other way to go about it will be to use autobinding so watch out for another video on that but for now we're going to use the save button.

Finalizing the Workflow

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 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 that 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.

Conclusion and Next Steps

Okay so that'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 autobinding and I'm going to stop that video this video where I am now I'm going to go and record another one that shows you how to use autobinding to get the same result.