How to create "cards" using repeating groups

Hi all,

I’m hoping y’all can help!

I’m looking to create some cool “cards” on my user’s dashboards by using repeating groups. For context, my users will upload songs to their dashboard, and then I’ve used a repeating group to display all of their songs.

At the moment they are displayed one on top of the other in fairly long (width) but short (height) format. However, I want to move it towards a “card” based view like can be seen on Zeroqode’s plugin page:

Or on bubble’s showcase page:

Or on deliveroo’s restaurant page:

I can’t figure out how to have the functionality of a repeating group (i.e I’m able to display all of their tracks, which are variable in number etc) but the presentation like the above. I would assume just using groups would mean I could do it, but then I lose the functionality.

Any ideas?

Thanks,
Greg

1 Like

From your post, I take it that you know the mechanics of how to set a repeating group up. (Ie. the first cell is a template for all the other cells to be displayed, defining the data source, etc.) But let me know if you’re still navigating that.

When you want to have a repeating group with columns, go to the setup panel for the repeating group, and select the number of columns you’d like (3) and adjust the repeating group’s width accordingly.

1 Like

Hi @greg_mosley, @dan1’s answer should help you with the column/row layout. You mentioned losing functionality when adding groups…

A group element inside the RG cell is definitely what you need to create the look of a card (border, dropshadow, etc.), but you need to make sure to set the Type of Content of the group to Song and the Data Source to “Current Cell’s Song” - that way, you continue passing the cell data through to the group.

Everything inside the group would then reference “Parent group’s Song”

Also, make sure to set the RG’s separator to “none” so that you remove the RG’s built-in cell borders. It’ll make the cards look more standalone.

Hope that helps!


Gaby at Coaching No Code Apps (formerly Coaching Bubble)
Courses & Products, Tutorials, Private Coaching, and High-level Development
Start for Free

3 Likes

Thank you!

1 Like