Understanding Bubble Groups

As you’re learning Bubble, one of the first things you’ll see are the Groups found in the Containers category on the left toolbar. They carry names like Repeating, Floating and Focus Group – but what exactly are the Bubble Groups used for? In this article, we’ll dive into what groups are in general, and then have a close look at each one. Let’s explore.

Bubble's Container category showing the different group types.
Under the Containers category you’ll find five different Group Types.

What are Bubble groups?

To understand Bubble Groups, you first have to understand the term elements. Everything that you place on the blank canvas that is your Bubble app is an element – text, buttons, images – or indeed groups.

Groups can contain other elements

So a group is in itself an element, but it’s different in one way: it’s the only element that can contain other elements. The group is known as a parent and every element inside of it is known as children.

This makes them different both in the editor and in your app. As you’ll notice in the editor, anytime you move a group, every element inside of that group will move along with it. In this way, groups make the editing of your app a lot easier, since you can group elements together and easily move, copy/paste or delete all of them at once.

You can place groups inside of each other in as many levels as you want, and you’ll notice in Bubble’s element tree that groups make up a hierarchy where you can see each element as part of its parent:

The Element Tree in Bubble showing groups in a hierarchical structure.
Every group works as a folder in the element tree, letting you navigate your app in a hierarchical structure.

This let’s you quickly identify and navigate groups in your app. In the example above, we’ve named our group Edit User, and you can see it contains two input elements for first and last name. Clicking the eye symbol will hide any of the elements (including children) in the editor, but will not affect your app.

Groups can contain data

When you place a group on a page, you can also decide that this group should contain a specific kind of data, and every element inside of that group will inherit the data reference from it. That bit sounds a bit more complicated, so let’s look at an example to make it a bit more digestible.

Let’s say that you are setting up a form to change details one current logged in User, such as first name and last name. In that case, it makes sense to set up a group that has the data type User, to quickly allow elements inside of it to reference that user.

Showing how a Group can contain data in the Bubble editor.
Here we’ve set up a simple group that contains the type User. We then tell Bubble that the Current User is the one we want to load – this way every element inside of the group can reference the currently logged in User easily.

In the example above, we’ve set up a simple group with just the two fields that we want to be able to edit. Now, how does Bubble know which User to edit? This is where the Group comes in – we can tell Bubble that we want the group to contain a User, and in the next step we tell Bubble which one. In this case, we’d like to edit the currently logged in user – aka myself.

Note that Group’s Type of content can never change, but the Data Source can be a dynamic value or it can be changed with an action.

Because Bubble now knows that the Group should contain a User and which one, that information is automatically passed on to all the Group’s children element. Take a look at the illustration below:

Showing a Bubble element getting data from the parent group.
Since Bubble knows what kind of data we have loaded into the Group, we can now reference that. Here we’ve selected the First name field, and told Bubble that we want the field’s initial content to be the First name of the Parent Group’s User.

This is the quickest way to instruct Bubble which User to work on. In the example above, we’re fetching the first name of the User loaded into the Group – which we set to Current User in the last step.

You can load any kind of data into the Group this way – even a text value, number or Option Set. Sometimes it’s even practical to set up a group that’s invisible to your Users, just to store some kind of data in it.

Even though we illustrated it with a regular Group, this applies to all Group types. They can all contain specific data of a certain type, and child elements can reference it.

All types of Bubble Groups

Ok, so now that we know a little bit about how groups work in general, let’s have a look at each type and how they’re different.

Groups

The first type is the regular group. A group can be placed directly on the page, or inside of any other Group type. On the editor side, groups can be used to organize the content on your page, and to pass data (such as a User in the example above) to child elements.

Groups let you set up responsive settings efficiently

In your app, Groups are important in other ways. First, you can save your responsive settings directly on the group, instead of setting up each child element one by one. Responsive settings are any settings that you place on an element that concerns how it behaves as the screen size changes, such as how long it should maximally stretch or shrink. By placing these settings on the Group, you’re working more efficiently than having to edit each and every child element on its own.

Showing how to set responsive settings directly on a Group instead of its child elements.
Setting responsive settings directly on the Group makes it easy to control the behavior of its child elements without having to edit every one of them on its own.

Groups are collapsible

One of the most important features of the Group element, is that you can choose to collapse its height when it’s hidden. This means that whenever the Group is invisible in your app, its height will collapse to 0 pixels and any element underneath it will be pulled up the same amount of pixels as the Groups original height, thereby “replacing” it.

This is why you’ll see that many apps consist of Groups stacked on top of each other like a game of Tetris – this is how you build Single-Page navigation. As long as Groups are perfectly stacked on top of each other with no overlap, they’ll replace each others Y coordinate perfectly and instantly when a Groups is set to invisible and another one made visible.

Two steps displaying how to leave a Group's height collapsed on page load.
By combining the Visibility setting (1) and Collapse setting (2) a Group can be collapsed to 0 pixels on page load and not take up any vertical space until you decide to show it.

Repeating Groups

Repeating Groups behave a bit differently than the rest of the group types. As the name suggests, a Repeating Group is basically a group that will render one row for each record in a list that you provide. As an example, think about Gmail – your inbox will be displayed with one row that represents each email conversation, and each one of those rows would be one cell of a Repeating Group.

The magic of the Repeating Group is that you only need to design the first row, and Bubble will display each cell with those elements repeated. So while a regular Group can contain information about one User, a Repeating Group can contain the info of a list of Users. Inside of each cell (or row), you can reference the single User from that specific row. Let’s again look at an example to make this easier to wrap your head around.

A Repeating Group showing four rows of User information.

So what’s happening here?

  1. We’ve set the content type of the Repeating Group to User, and are searching for all registered Users.
  2. We’ve set the total number of cells to show to 4. You can see those rows on the right-hand side
  3. I’ve placed a text element inside of the first cell. To show the name of the User on that row, I’m referencing the Current Cell’s User. As you can see in grey, that element is repeated for each row we’re showing.

If there are less than 4 Users in the system, Bubble will simply show the number available (no matter the number of Rows you’ve set in the settings). If there are more than 4, Bubble will keep loading as the User scrolls. In the final app, you can see the list of Users displayed neatly on one row each:

A Repeating Group showing User names in a Bubble app.
Bubble displays a “virtual group” for each row, duplicating the elements in the first row for each User in the list.

Popups

Popups, as the name suggests, are Groups that display over all other elements on your page. They’re typically used to display a message (“Are you sure you want to log out?”), but you can use it for whatever you need. Popups are not visible until you till Bubble to show it with the Show an element action in a workflow.

The Show an Element action in the Bubble workflow editor.
Popups remain invisible until you show them using the Show an element action.

Just like regular Groups, Popups can contain any kind of data you want to be referenced by its child elements. But there are some key differences:

  • Popups are above other elements on the Z axis (meaning that if your screen was a 3d space, they would float “above” everything else). This means they don’t affect the layout of the rest of your app in any way (like Groups with collapsing height would)
  • You can use popups to black out or blur the screen partially or completely, only showing the content of the popup
  • Popups have limited responsiveness: they won’t stretch on a bigger screen, but you can control its shrinking (or set it to fixed width)

Floating Groups

Floating Groups are similar to regular Groups, but with one clear distinction: they can be locked to a specific part of the screen even if the user scrolls. In other words, they’re great for bars and menus that you want to stick to the top, bottom or side of the screen and remain there.

A great example is Bubble’s own homepage (which is built on Bubble). The menu bar sticks to the top of the screen as the user scrolls, giving continual access to it.

Bubble's frontpage with a Floating Group used to display a top menu bar.
Bubble are using a Floating Group on their own website to keep it attached to the top of the screen.

Floating Groups can be used in creative was to set up more than just top bars. The setting below would freeze the group relative to the bottom left.

The Floating Group property editor.

This could be used to have elements float away from the edge, but remaining frozen in the same place, like this + button typically seen in Android apps:

A small green button attached to the bottom left of the screen.
A Floating Group can, but doesn’t have to, be attached to the screen edge. This button is floating 25 pixels from the left and bottom edge.

Group Focus

The Group Focus is similar to the Floating Group, but with some key differences. First, the Group focus can be rendered relative to an element on the screen. Secondly, as the name suggests, the Group will hide as soon as it loses focus (you click somewhere outside of it).

Let’s start with the first point: this means that if you want to show a group next to a button that is clicked, you can use the Group Focus and show it at specific coordinates relative to that button. This is great for things such as dropdown menus. The second point means that the Group is only visible for as long as it doesn’t lose focus. If you click somewhere else on the screen, it will instantly go invisible.

Dropdown menu being displayed next to a button.
Group Focus can be displayed relative to another element. In this case the Sort button is the trigger, and the menu shows up next to it. If at any point you click outside of the menu, it will disappear with no actions needed, which is usually the expected behavior from a menu like this.

The Group Focus is a great element to use in cases like the one above. But there are a few drawbacks worth noting: first, the group is not responsive, meaning its size is fixed no matter what. In most cases, this is not a problem, but if you’re using it in a case like the one below, this can be a challenge.

GroupFocus used to show search results underneath a search bar.
This example is from the Bubble-built website www.oceanairtravels.com

In this case we’re experimenting a bit with the use of Group Focus. The challenge here is that the Group Focus showing the search results is bound to the search input field. If we allow the search field to shrink or grow as the screen width changes, the Group Focus will not change size with it, making it look unprofessional. In this case, we’re forced to set a fixed width on the search input to avoid that problem.

How the number of elements affect your app performance

As a final note, it’s worth keeping in mind that the more elements you add to your page, the slower your app will become. This includes any group that you choose to add. It’s best practice to not add Groups unnecessarily to keep the total number of elements as low as possible. As always, that doesn’t mean you should shy away from using Groups altogether – they’re highly useful and often necessary – just to not go nuts and set up groups within groups just for the sake of it. Less is more. You can ready why, and lots of other performance tips in our book The Ultimate Guide to Bubble Performance. If you’re new to Bubble, you may also be interested in our in-depth Bubble review.

Let me know in the comments if you have questions or you think I’ve left out something important!

Share:

More Posts

Bubble’s new expressions: SPLIT BY and ARBITRARY TEXT explained

Bubble quietly launched two new features in July 2021 that are quite useful: split by and arbitrary text. They’re both expressions that solve tiny problems that otherwise would require cumbersome workarounds, and are absolutely worth checking out. You’re not gonna

Combining icons and text in Bubble

Placing icons inside of your text elements by using BBCode is a quick way to reduce the total number of elements on your page and make sure your app runs smoothly. Read on for how to do it.

Leave A Reply

Your email address will not be published. Required fields are marked *

*