How to Hide any Repeating Group Cell in Your Bubble.io No Code Web App

Making a Cell Disappear in a Snap (or Click!)

You’re probably already familiar with using a Repeating Group (“RG”) to show a list of things in your Bubble.io no code web app. If not, check out https://echolaketech.com/2021/01/02/how-to-handle-a-list-of-things-using-repeating-groups-in-your-bubble-io-no-code-web-app/

Typically you manage what data is shown in the RG by adding constraints to the Data Source Search. However there is a way to simply hide any cell in a RG without the need to do a search or any additional search constraints. To do so you will add a Group Element in the primary (first) RG cell. Let’s walk thru it.

Step #1 – Adding a Group to the First Repeating Group Cell

Once you have your RG added in your Bubble.io design you’ll need to put a Group Element in the first cell (NOTE: the first Cell in a RG determines all of the Elements in every RG Cell – it’s the only Cell you can edit). Make the Group the same size as the Cell’s height and width. Reason being – when you want to hide a RG Cell, you’re actually hiding the Group in that Cell (so make the Group the same size as the Cell)

Group Element in RG’s First Cell

Two other things are important when setting up the Group:

  1. Make sure your Group’s Data source is the same as the Repeating Group (ie “Current cell’s User” above)
  2. Make sure you select the collapse Group’s height option (see image below)
Collapse Group’s Height When Hidden

Step #2 – Setup Conditionals Using Custom States to Track Hidden Cells

Now that you have a Group in the first RG Cell you need to add two conditionals, one to hide the Group and one to make it visible (refer to image below).

Conditional to Show and Hide the Group

There is one Custom State called “Hidden Users” used in the Conditional to show or hide the Group. If you’re not familiar with setting up Custom States, check out https://echolaketech.com/2018/10/10/how-to-add-custom-states-to-your-bubble-app/ or watch the video at the bottom of this post.

The “Hidden Users” Custom State is used to track all the Users who should not be visible in the RG. This means the corresponding RG Cell will be hidden for any specific User in the “Hidden Users” list. Note in the image below that “Hidden Users” is of type User and “List” is checked off because the Custom State is keeping a list of Users (not just one User).

Custom States To Track Hidden and Visible Cells

Step #3 – Workflow to Hide a Cell

In the demo is a Button which when pushed starts a simple Workflow with only one Step to Set State for the Custom States. Below you see Workflow Step where there are two Custom States – “Hidden Users” mentioned earlier and “Visible Users”. Reason for both which you probably already guessed – one to keep track of all the hidden Users (or hidden Cells) and one to keep track of all the visible Users (or visible Cells)

Workflow Step to Hide a Cell

Step #4 – Workflow to Un-Hide a Cell

Now that you have seen how to hide Cells, let’s look at the Workflow to un-hide a Cell. In this example a Dropdown Element was used to show all of the Users (Cells) that are hidden.

Dropdown to Unhide a Cell

To start the Workflow to unhide any Cell (User) a Button was used. Once the button is pushed the following single-step Workflow runs. Similar to the Workflow to hide a Cell, the “Set state” Step is used to change the “Hidden Users” Custom State by removing (“:minus item”) the Dropdown’s value. And for the Repeating Group to show the Cell, the “Visible Users” Custom State needs to add (“:plus item”) the Dropdown’s value.

Workflow Step to Show a Cell

Check Out The How To Video!

For an even more detailed overview on how to implement hidden Repeating Group Cells in your Bubble.io no code web app, check out the video.

FREE ACCESS to this Bubble.io design when you join our email list!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s