How to display a list in a Repeating Group in Bubble.io

Repeating Groups Jun 01, 2020

A repeating group is used to display a list of items. It can be a list of job applications, products, tasks, images, files or anything else. The important thing to note is that it should be a list. If it's an individual entry, you should display it in a group.

However, a repeating group will display each individual database entry in each cell. But what if you have a list of notes associated with each database entry.

Something like this. A list of texts in each entry

You would notice that it is not straight forward to do so. The reason being that a repeating group is used to display one entry per cell. So, your complete list will be shown inside one single cell.

What do you need?

  • 2 repeating groups
  • Data structure like the one shown above

Setup

Taking the above case as an example, my data structure is this.

I'll create a parent RG and a child RG.

Parent RG

The Parent RG will have the data type as User and data source as a Search for Users with the required constraints. This RG will have multiple rows.

Child RG

The child RG will have the data type as text and data source as current cell’s notes. This RG’s layout style should be Full list. The data type should be text if you're trying to display text and images if it's a list of images. We won't put the data type as user, as the notes are a list of texts. To understand this better, remember that when we're trying to display a list of tasks, we keep the data type as tasks as it is a list of tasks that we want to display.

Next, we’ll place a text field inside the child RG to display the notes.

And it’s done. I’ve entered a few test Notes to showcase the final result.

The output -

Note: If you want to display the current user's notes and not any other information, you can do it in a simpler way. Just put the data type as text and data source of the RG as Do a search for User's Notes.

Editor - https://bubble.io/page?type=page&name=list_in_rg&id=nocodeassistant-tutorials&tab=tabs-1

Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/list_in_rg


I hope you understood and found it easy to replicate. RG's are a very powerful component in Bubble. And understanding how to manipulate them will take you a long way in mastering Bubble.


If you need some help with your Bubble app, hit me up at [email protected] or follow me on Twitter

Become a Bubble power user. Get Bubble tips straight into your inbox

<form method="post"
  action="https://emailoctopus.com/lists/4dcea9c8-c9f4-11ea-a3d0-06b4694bee2a/members/embedded/1.3s/add"
  class="email-octopus-form"
  data-sitekey="6LdYsmsUAAAAAPXVTt-ovRsPIJ_IVhvYBBhGvRV6"
>
    
    <div class="email-octopus-form-row">
        <label for="field_0">Email address</label>
        <input id="field_0" name="field_0" type="email" placeholder="">
    </div>


    

    <div class="email-octopus-form-row-hp" aria-hidden="true">
        <!-- Do not remove this field, otherwise you risk bot sign-ups -->
        <input type="text" name="hp4dcea9c8-c9f4-11ea-a3d0-06b4694bee2a"
           tabindex="-1"
           autocomplete="nope">
    </div>

    <div class="email-octopus-form-row-subscribe">
        <input type="hidden"
           name="successRedirectUrl"
           value="">
        <button type="submit">Subscribe</button>
    </div>
</form>

Tags