Adding Group Focus to Repeating Group Cells
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. What 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.
Appreciating Your Support
If you find videos like this useful, we would really appreciate a like and subscribe. We've got even more videos like this available exclusively on our website planetnocode.com for just our members, so you have to become a member in order to access all of the videos we've ever recorded. That's hundreds of Bubble tutorial videos. There is a link down in the description for you to get started with that.
The Workaround Solution
This is the workaround. I'm going to instead change this into a reusable element and I'm going to call this contact menu. I'm going to set the reusable elements to be a colon and to also say that it is going to have contact data in it. 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 this down. Perfect.
Adding Group Focus
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 80. So it needs to be more than that. Let's go 160. Less than that. I'm just eyeballing it. Yeah, that would do. Now I can add in my button. I'll just use a text element for this. Shift this into column. Just doing this very rough. I'm not designing well. I'm demonstrating how to use their reusable elements to get around the frustration that you can't add a floating, sorry not floating group, a group focus to a repeating group cell.
Creating the Delete Function
Let's just add in a label called delete and we'll add in a workflow. 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. Then I'll add in, I think this is gonna work, I'll add in a toggle. 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.
Implementing the Reusable Element
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. Then we set the sources as current note. We set the source as parent group's contact. Let's preview that.
Testing the Functionality
So now if I click on the ellipse, I get my button. If I click on this ellipse, I get that button and I can click delete. 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. Let's try that again.
Final Touches and Styling
Let's give it a tiny stark. There's my group focus menu. I'm gonna just make that very clear what's going on by adding in the shadow. Make incredibly dark shadow. We'll try that. Okay, there's my group focus. Click delete, it's gone.
Conclusion
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.