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.

2

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

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?

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.

6

@joe5

Here is an example on how to achieve this in Bubble

image

7

Hey @joe5,

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

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!

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.

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.

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!