Repeating group dropdown?

Need help
1

Hey guys, trying to come up with a way to display dropdowns on a repeating group.
The way this would work is the repeating group works as a list that displays data, when a user clicks one of the groups a dropdown should pop between that group and the following showing more information (extra data) regarding that specific group.

Haven’t quite figured a way yet to make this work, I’ve obviously came up with other solutions (i.e when user clicks on the group he gets redirected to another website that shows him the details or “extra” data corresponding to that group, but I’d like to show it, in a simple/tidy way, on the same page as the list (repeating group) would be.

Wondering if this is even possible, specifically that an “extra” element would pop in between two groups from a repeating group element, if not maybe I’d have to use just “single” group elements, which defeats the purpose of it being a displaying list of data.

All help is appreciated, thanks!

2

Hi @nico-sm94,

I can think of 2 ways right now to get this going for you:

  1. Have a group (let’s call it group A) that is not visible by default in the RG cell. In the property editor, turn on “collapse height when hidden” (and even the animate option) for that group. Then, add a shape or button to the RG as well to toggle this group’s visibility. When button is clicked > toggle group A. Now, that group will show and hide when you click on your trigger button and when hidden, the height will collapse back to default. The group contains the extra info for that RG cell.

  2. Add a pop-up to your page and make it the same data type as the RG. When you click on your trigger button > show popup > display data in group (popup), data = current cell’s Thing. Now, this popup gives you more space to elaborate about the Thing and it’s on the same page in your app.

Let me know if you have any questions.

Gaby | Coaching Bubble

2 Likes
3

Hey Gaby,

Thanks! Seriously super well explained it took me less than 2 minutes to set it up.
I used option one since it’s closer to what I’m trying to build right now, the second option is a good one too, used that before but decided that if I could pull the “dropdown” on the RG that would be even better.

So, just one little thing I’m still trying to figure out how to make the group’s A height bigger than the RG’s cell that is enclosing it. Struggled a little bit since apparently you can’t drag an element that’s bigger than RG cell into it, but once the element (in this case group A) is inside you can change it’s dimensions in it’s property menu, when I do this, everything looks perfect in the editor but opening the preview it seems like the RG doesn’t deal with this, since it smashes all of the rows in the first one, when toggling Group A, this one will behave normally though, but it looks like it won’t work specifically as a dropdown, but more like a non visible element in the RG cell which has to stay within it’s dimensions, so yeah that would defeat the purpose of it looking like a dropdown between one of the RG’s cell and the other.

If there is a way to make that work that would be awesome.
If not I’ll have to just stick to the popup which is not terrible (but I was trying to avoid it, because who doesn’t hate popups right? I guess it would have to work sort of like Product Hunt lists)

Again thank you, super clear and easy to understand.
By the way checked your website, looks awesome, you got a new subscriber to the newsletter :wink:

Nico.

3 Likes
4

Hey Nico, thanks for the signup :slight_smile:

Do you have a link to share? I might not be understanding the effect you’re going for. Do you want to use the dropdown element? You’re right, anything inside the cell should not be bigger in dimensions than the cell itself.

5

https://remoteok.io this website uses the effect I was aiming for.

“Dropdown” isn’t really the best way to put it, that can be confusing, sorry for that. It’s actually sort of a hidden block that appears in between two RG cells (when a cell in the RG is clicked). But since elements can be bigger than the cells then that’s a problem.

Thanks again Gaby!

6

Ok that example helps and actually this is what I figured you were doing. So this is definitely possible. You need to make the repeating group cell as big as the group inside needs to be in order to fit all the elements. Text elements within that group can “stretch to fit”, so you don’t need to anticipate text box sizes, just make the cell big enough to fit all the elements you need. The cell will still collapse to the height it would be without the group when “collapse height” is checked.

Try it out. You only need the RG to be 1x1 to set this up. If you’ve got a link, too, I can help you get it together too.

3 Likes
7

Awesome! Will try it out and will come back to the thread on Monday to tell how it went, maybe even show something, if I have it ready, so that people looking to build a similar thing have a head start.

Thanks again Gaby, have a great weekend.

1 Like
8

Success! https://whiteboardd.bubbleapps.io/version-test?debug_mode=true

Wanted to share it in editor mode but apparently it is not letting me do that I don’t know why.
Anyway, thanks Gaby!

1 Like