Have you ever tried adding a group focus to the cell of a repeating group? You will have found that Bubble doesn't let you do this, or at least Bubble doesn't let you do this easily. A prime example would be the repeating group I've got here, it's a list of contacts.

I've got a cool keyboard shift selection up and down. Check out an earlier video on keyboard shortcuts to learn how to do that. But yeah, this is a prime example. if I wanted to add a menu here that popped out and maybe just for now I could say delete and so it's like a menu that pops out when this icon is clicked.

Converting to a reusable element

This is the workaround. So I'm going to instead change this into a reusable element, and I'm going to call this contact_menu, and I'm going to set the reusable element to be a column, and to also say that it is going to have contact data in it, and that's because I need to be able to pass which contacts I'm working with from my table into my reusable element. Just make this a little bit bigger. And then here I'll just change all of this down. Perfect. Okay, now I can add in my group focus, and I can anchor it, reference element, to my ellipse vertical icon, and I would just offset it by say, 18, that's, it needs to be more than that, let's go 160. Less than that, I'm just eyeballing it. Yeah, that'll do. Now I can add in my button. I'll just use a text element for this, shift this into a column. Just doing this very rough. I'm not designing it well. I'm demonstrating how to use a reusable element to get around the frustration that you can't add a floating, sorry, not floating group, a group focus to a repeating group cell.

Workflow delete a thing...

So let's just add in a label called delete and we'll add in a workflow and we'll say data make changes to a thing. No, data delete a thing. Get my words right. And then the contact menu contact. So that's the repeating group's contact. And then I'll add in... I think this is going to work. I'll add in a toggle. So toggle is the same as a show and a hide but it just does the opposite of the current state of the element, so toggle is a perfect work for action for this and we will toggle our group focus. Right, now let's go back into our contacts table, delete the one I started with, go down into our reusable elements and add in our contact menu and then we set the sources as current, no we set the source as parent groups contact, right let's preview that. So now if I click on the ellipse I get my button, if I click on on this ellipse, I get that button and I can click delete, and I've missed one thing which would have made that perfect. If I go back to my contact menu, when delete is clicked, I want to hide the group focus.

Demo

Let's try that again. So let's give it a Tony Stark, there's my group focus menu. In fact I'm just going to make that very clear what's going on by adding in the shadow. Just make an incredibly dark shadow. Let me try that. Okay, there's my group focus. Click delete, and it's gone. So, that's it. That's how you can add in a group focus into the cell of a repeating group. You just create the icon and the group focus as a reusable element you add in, and then you pass through the data type that you're wishing to manipulate with the menu items in the group focus.