How to group items vertically in a Repeating Group

Hi all,

I’m trying to group items inside a RepeatingGroup based on their category and display different categories vertically, like in the screenshot below.

Please visit this page for a live demonstration - Products

The setup in the above example is achieved by having 3 different repeating groups stacked vertically inside a group. I don’t believe having 3 different RGs for the same datasource will be a good idea performance wise, hence I’m trying to achieve this with 1 RG. However, I’m not sure where to begin.

Anyone done something similar?

Tagging @adamhholmes for any advice :slight_smile:

Hi there, @rlslimited… if I understand your post correctly, you should be able to achieve the desired result by having the vertical repeating group’s data source show the categories, and then have a horizontal repeating group within the vertical repeating group that does a search for items with a constraint where the item’s category equals the current cell’s category. Does that make sense?

Best…
Mike

Hi @mikeloc , currently I don’t have a vertical repeating group. That is what I’m trying to achieve. Right now, I have a main Group set to column → Inside of this, I have 3 individual Groups stacked on top of each other vertically → Inside each Group, I have a RepeatingGroup where I have manually filtered to show only 1 category.

If I understood your suggestion correctly, as a first step I need to create a RG and set the datasource to Product filtered by category? I tried doing this, but I’m not sure how to actually set an unknown number of Categories dynamically. Please see screenshot below

How have you defined your categories? I am suggesting that the vertical repeating group’s data source be set up in a way to show the categories. So, if the categories have been defined via an option set, for example, the repeating group’s data source would get all of the options from the set and display them in the repeating group.

1 Like

If you only ever plan on having 3 categories then what you’re doing is fine (just set a Category content type on each group, and constrain the RG product search to the parent group’s category)…

But if you’re planning on having more than 3 categories, then (as @mikeloc has already suggested) use a RG (vertical) for your categories, then inside each cell put another RG (horizontal) for the products, with the product search constrained to the current cell’s category.

Simple.

Edit: Here’s an example if you need to see one: Products & Categories (bubbleapps.io)

2 Likes

Ah this helped clear things up and achieve exactly what I was after. Thank you so much!

Woah! I wish I could select 2 posts as answered. Thank you so much for taking the time do this demo for me. This is very useful. I will go over it to make sure I’m following the same structure to the dot.

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.