How to add Group Focus to Repeating Group cells

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

Bubble doesn't make it easy to add a Group Focus into a Repeating Group cell. Here's our workaround using a Reusable Element and icon.

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