Align Repeating Groups Better - Depending on Contents

Idea
1

I don’t believe there is a way to align repeating group items depending on the content, but I’d love the ability to do so, especially in the case of images in a repeating group.

My issue currently:

I have a list of Events. Each event has some Attendees.

I am trying to show this if there is 3+ attendees:
image

Then if there just 1,2, or 3 attendees - it shows only up to those 3 images and right-aligns all of them, like this 1-attendee example:
image

To make this work currently, I have a parent group with 4 other groups inside:

  1. Repeating group that shows if 3+ attendees
  2. A group with 3 images if it’s exactly 3 attendees
  3. A group with 2 images if it’s exactly 2 attendees
  4. A group with 1 images if it’s exactly 1 attendee

It works, but definitely not efficient or beginner-friendly for teaching others.

4 Likes
2

@erik.bubble this possible at all? anyone I should tag about this?

1 Like
3

Hey! Let me think on it and I’ll let you know what I come up with.

4

@joe5, are the images supposed to be overlapping when it’s 3 or less as well?

1 Like
5

hey Eli! Yes they’re supposed to be overlapping when there is exactly 2 or 3 as well. :ok_hand:

For those I’ve actually just called the current cell’s attendee #1, #2, and #3, and just placed images in groups 2 and 3 for that purpose. Separate from the repeating group that shows when there is 3+ attendees.

1 Like
6

@joe5

Here is an example on how to achieve this in Bubble

image

1 Like
7

Hey @joe5,

Quick video showing how to do this with the ListShifter plugin.

5 Likes
8

Eli I love you man :fire:

didn’t even know that plugin existed!

Going to implement in lots of places on the nucode.co site soon:

image
image1000×1000 198 KB

Will let you know how it goes!

2 Likes
9

would this way actually be faster than using @eli’s plugin he suggested?

I also am not sure if your way works for sliding photos to the right side if there is only 1, 2 or 3 attendees?

10

Hey @joe5

Don’t get me wrong @eli plugin is amazing, its a game changer. Amazing work there. As for the right side loading I am not honestly sure. @eli method needs a plugin to load the data, parse it (work on it) and give an output. This I think is fine for small data sets or having a couple of instances on the page. (@eli can provide more information on this)

The method i suggest above is almost 100% native except for the additional CSS style. Which is simple enough. You can also use the Classify plugin and attached a class to the RG this way you only have one CSS entry for multiple RGs.

1 Like
11

so my method now with the showing/hiding of 4 different groups isn’t complicated and I pre-load the list of attendees up to 3 people, then use the last bubble to show anyone over 3 attendees (eg. +5)

So I’m really trying to go for speed since the page will be loading many event listings and I’ll need to let folks search through them.

I’ll be doing the same with a comment group on our nucode.co forum posts as well.

What would y’alls recommendation be here?

I just need the repeating group images to be shifted to the right side on each card if there isn’t over 3 attendees.

Here’s our upcoming design for forum posts:

image
image968×1022 113 KB

12

@joe5 @AliFarahat As far as performance I doubt you will see any difference at all. In my example, I had an extra input and RG but you wouldn’t have those in your actual app.

Really the only ADDITIONAL action the ListShifter is performing is generating a list of numbers. It’s not fetching any data whatsoever. But even that isn’t really additional activity since a repeating grouped based on users vs numbers will still be generating that same list. The search for and count of users will have to be performed whichever method is used.

1 Like
13

thank you both!

I’ll send back a note once I’ve tried both - either will likely be faster than current implementation with 4+ groups no matter what though. :slight_smile:

Thanks guys!

1 Like