Drag & Drop Repeating Group Plugin - Save order

I just purchased the plugin from @minimumstudio

Unfortunately, I cannot find any documentation on how to save the rearranged RG into the database.
Specifically, when the page is refreshed or reopened, the sorting order should be updated accordingly.

The demo has a save button, but I’m not experienced enough to reverse engineer it. Here’s the link to the demo: Drag & Drop Repeating Group.

Any help would be greatly appreciated.

1 Like

That plugin is pretty minimal and doesn’t make a lot of sense, really. The library it uses “sortable.js” is actually pretty good (and I use it myself in my Floppy plugin), but all the “save” feature does is save the order of the sorted items to localStorage. (This is a feature of the library that I actually find somewhat silly.)

But this isn’t really useful in any meaningful way in Bubble. Because what you really want to do is have access to the reordered items back in Bubble. This is a much bigger challenge, but one that I’ve solved in my Floppy plugin.

Floppy is a plugin that’s mostly for browser storage (and handles pretty much any Bubble data type), but it also has advanced list manipulation features, including the ability to make an RG sortable while also getting the new order of the items back via the plugin.

Most recent video about this feature is here:

The latest versions also allow drag/drop between RGs (simply by giving them the same “drag group” name in the main interface), but I’ve not finished a video about that.

Anyway, sorry your previous purchase of somebody else’s plugin wasn’t actually useful, but you may want to watch my video(s) about Floppy and test it out should it look promising. The Floppy plugin itself contains an ever-growing number of plugins, and not just the Floppy element itself.

2 Likes

Hi there!
Thanks a lot for the purchase and your message. We’re happy to help you out :wink:
You can actually view the editor here and see what happens when you click the “save” button in the workflow tab. But I’ll explain it here for you as well.

(@Keith, this might be helpful for you as well since our plugin actually saves new orders in your database if you use a simple workflow for it)

You can use the plugin to ‘link’ it to a repeating group on your page. Then, when users drag and drop items in a new order, you can add a “save” button to your page (or any other event that can trigger the workflow of saving). In that workflow, you make changes to a list in your database where you want to store the data in a new order.

In this picture below, we make changes to the user and edit the list field for “Saved Items”. That is a list of options from an option set. If you save the new list (by using “set list”) the list will be updated to the right order. The “drag_drop_one” and “drag_drop_two” are two instances of the plugin on the page. You can pretty much change any list in any record with this workflow. You just have to access the ordered list from the plugin instance!

Please let us know if you still have any questions!

1 Like

Thank you @minimumstudio for the help.

I managed to store the new order as a list into a data field. This field is attributed to the user. Like in your example.

However I would need to apply this order to the newly sorted data type (“events”), which is not the user. How can I apply this? In the “search for” settings I can only access the fields of events, and not the user, where the order is stored.

Great to hear that you’ve figured it out!
About your second question, could you send us a loom or some screenshots so that we can take a closer look at your problem. Is it an issue with the plugin or just a general Bubble question?
Please let us know and hopefully we can help you out!

I guess it is a general Bubble question. However I asume also others interested in your plug in would need this help, to correctly use your widget and get the value out of it.

Here some screenshots:

This is the list I need to provide the drag & drop feature for. The RP group shows the data type “Nennung”. It is sort of sports event registration for athletes. The order of the athlets, which is refelected by one row, needs to be rearranged with the drag & drop feature.

I managed to store the new order to the field “Sort_Nennung”. This field belongs to the data type “user”.
image

However I do not know, where to apply this new sorting order, when loading the RP group of “nennungen”. See UI build in the next screenshot

So far I am pulling the order of the RG “nennung” from “data source / search for Nennungs / Sort by”. See screenshot

However there I cannot access the “Sort_Nennung” list, as it is stored in the “user” data type and not "

Or is there a way I can directly store the new order to the data type “nennung”? I tried to use “Make changes to a list of Nennung” but was not able to pull together the right syntax for “list to change”. See screenshot
image

Hi!
Thanks a lot for the screenshots.
So by saving the order of ‘Nennungs’, you save an entire list to your user.
So if you want to display that list again in the repeating group, you can simply make the datasource ‘current user’s sorted Nennungs’. However, I think it’s more appropriate to have some kind of sorting field on the Sport Event level. So if I understand correctly, an event has a list of Nennungs and that order can be changed. So you would just make changes to that list when saving the new order from the drag and drop plugin.

Let me know if that makes sense!

1 Like

Correct a sport event has a list of nennungs (=athlete entries). And the list of nennungs need to be sorted, stored and being able to reload with the new order.

However I do not understand how to do this by using your script. So if you could give me more hints, this would be great.

Thanks

1 Like

I think it’s best to display the list of entries on that page for the sport event, make sure you don’t use any :sorted operators to get the right order of athletes! And add the drag&drop feature to that repeating group. Then, if you click ‘save’ or any other type of event. You have to create a workflow that ‘make changes to thing (sport event)’ and ‘set list’ of Nennungs. To set the list, you will select ‘draag&drop’s sorted list’ as data source for that new list. The next time you open this page of the sport event, the Nennungs will be displayed in the right order.
Let me know if this works for you!

Thanks again for the help and sorry for my slow understanding.

I managed to store the order. Actually I am surprised that I store it in a list of fields. I thought the best approach is to directly store the order of a nennung (which is a row in a table), directly in the data type “nennung” in each row. So I was expecting a “make changes to many things”.

To follow your instructions I have also now stored it in a ist field of the current user. Storing works.

However when loggin out and in again, the order is not recovered. Do I need to set it somewhere? fyi, in the data source / search for “nennungs” I am aplying two contstraints (current user and a filter constraint). I also tried to remove these constraints, however order was not correct either.

I also checked your demo and could not find a setting, where the order was applied.

No worries.
You must set the data source to the list where you store it. So probably that Event’s Nennungs (list). So not a ‘Search for’ or anything.

Hope this helps!

Hi. I’m having trouble with the same issue. I can store the sorted list in a field of a data type okay. But I cannot see how I restore that sort order.

In your demo app, on page load you set a State to the stored sorted order. But I don’t see where you use that.

And if I set my repeating group’s data source to the state (so I have the right sort order), how do I keep the repeating group updated? It is a “live” list which changes frequently as the user uses the app (think adding tasks to a task manager). So the repeating group must still find all new items that have been added, but it can’t do that if the data source is the State.