How to add Group Focus to Repeating Group cells
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.
Unlock the secret: Add group focus to repeating group cells with this simple workaround!
Master Bubble's limitations: Learn how to create popups and menus within repeating groups effortlessly.
Boost your Bubble skills: Transform frustrating limitations into powerful features with reusable elements!
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.