Repeating Group 'Snake Around' style

[aaron.marsh]

Hi Everyone,

I’m hoping someone may be able to help how to create a style for a repeating group, so instead of it just being either horizontal or vertical, it ‘Snakes around’. I’ve attached a mocked up image so you can visually see what I mean.

Is there a was I can achieve this or is a Repeating Goup not the correct way to think about this?

Many Thanks

[ntabs]

I haven’t seen anyone use this so far. What’s your use case for this?

[aaron.marsh]

It’s for an internal company tool, we have a set of data we visualise in this way - like a type of diagram for mapping pipes and connectors. I currently use Google sheets which has this type of layout as a template and it works well but I was hoping to integrate it into my bubble app which is going to replace out internal database, having the 2 tools together would reduce duplication of work for us.

I guess it can be compared to a flow chart/diagram but I couldn’t see any plugins for flow charts etc so wondered if it could be done with repeating groups

[mikeloc]

Hi there, @aaron.marsh… this suggestion might not be a good one, but what you are showing could be done with multiple repeating groups, and it could look something like this (but not nearly as crappy, of course).

The first repeating group’s data source looks like this.

The second repeating group’s data source looks like this.

Anyway, maybe someone will come along with a much better idea, but I didn’t think it could hurt to throw this example out there as food for thought. Hope it helps.

Best…
Mike

[Nothing]

Hey Aaron, i think its only possible with a sort plugin, so i just create a free plugin to sort any data in “Snake” style

Final result:

How its work?

First add the plugin, its free!

Now a new element should appear called “Snake Sort”, add it to your page (it will self-destruct on the page, so don’t worry about the space taken up):

Then fill in the fields with the necessary data:

That way sort should be done automatically so you can pull into your repeating-group like this:

In addition, the plugin has two additional events workflows:

• When the draw starts.
• When the draw ends.

Editor link:

Bubble Editor - Repeating-group-solved

If you still have questions, feel free to ask.

[aaron.marsh]

Hi @Nothing

This is really beyond what I expected for a solution to my issue. It works really great and can’t thank you enough for this.

I just have 1 small issue with the alignment though, I’ve copied the same alignment settings from your example bubble app (as far as I can tell) but mine is aligning to the left so there’s a gap on the right. I’ve attached a couple of screenshots so you know what I mean.

Current

And this is what I’m aiming for

So the idea is connectors and pipes can be added and the chart will ‘grow’ accordingly like a snake if this makes sense.

Thank you so much for the plugin and help you have provided

[Nothing]

Hello @aaron.marsh

I think i founded a solution, look:

First of all, update the plugin, then we can start !!!
You will need to create a new object in your DataBase, to be your “empty space”, like that:

So now in the plugin element, there is a new field, where it must reference this object that will be our empty space:

if we test, we get the following result:

Notice that the places where supposed to be whitespace are now filled by our referenced object.
We can just create a new condition, so that when the space inside the repeating group is filled with the referenced object, it becomes invisible:

Now its working!

Remember to update the plugin to the new version!!!

Editor link: Repeating-group-solved | Bubble Editor

If you still have questions, feel free to ask.

[aaron.marsh]

Hi @Nothing ,

Sorry for my late response, work’s been mental recently. This is a really great plugin and works exactly as I hoped. Thank you very much for your help with this literally couldn’t have done this without you.