Nested Repeating Groups in Bubble: A Step-By-Step Guide

Adding Nested Repeating Groups in Bubble

Here's how to add nested repeating groups to a Bubble app. To give an example of this, I have a repeating group set up here, which is of type data type contacts. I want to list all of my data type emails that are related to this contact. Let me show you how I have it set up in the database. So I have my contacts as a field in the email, and then I have my emails here I've got listed four out.

Creating a Nested Repeating Group

So how do I show in a repeating group of contacts inside each contact a repeating group of emails? Before I launch into that, if you're learning Bubble, you found our channel, hopefully you're finding many useful videos, but we've got even more Bubble tutorial videos on our website. You can't find them on YouTube anymore. You can only find them over on our website and they're exclusive to our members at planetnocode.com.

Adding and Designing the Repeating Group

Let's add in a repeating group. So we get a repeating group and add it into the cell of my contact and it's going to be type of content email. I'm going to design it first. So we'll just have a column layout, get rid of the default for my emails. I've got a text field of subject. Just going to make this all nice and well designed and responsive as I go through. That's what I'm looking for. Right now they only take up as much space as they need, especially if I get rid of the mid height.

Setting Up the Data Source

Okay. I now need to add an appropriate data source and so I'm going to do a do a search for email and I'm linking it through the email field of type contact. So I need a way of referring to the current cell and if I go in and say contact equals, I don't have current cells contact. I've got current cells index but not current cells contact.

Understanding Element Tree and Group Structure

That's because if we look in my element tree and I think this is where people get confused. I'm using a group here to add in a background group altogether. This can also be useful if you're wanting to link the whole cell. You put everything in the cell into a group, but that means that I can't refer to the current cells contact. But the group does have the current cells contact and so in my repeating group for emails, I can say current groups contact. Let's preview that. Okay. And you can see that the email titles are coming through.

Workaround for Data Referencing

Now you may experience a situation where you struggle to find a way to link the data one up in your tree. And so sometimes I find myself just creating a group that sits as the immediate child of the highest repeating group that's there because as long as that is between this group and this group, I can refer to it in the do a search for. So that's quite a handy work around for when you can't directly refer to the current cell, you can refer to a group that is in the current cell that has got the current cells data.

Considerations for Workload Units

A couple of other things with obviously nested repeating groups is since the instruction of workload units, you'll want to be thinking about how you can limit the strain or the pressure that you put on database on Bubble server side when you do a search for. So just bear that in mind because if you have a hundred records for each contact and you display five contacts, that isn't just five records being looked up. That is five records plus five times a hundred. So you're actually looking at 105 records being recalled from the Bubble database. Obviously that's the true example, but I'm simply wanting to illustrate how it can easily multiply up if indeed you go around the route of using nested repeating groups.