Drag - Drop Reorder Your Repeating Group

Tips
63

2 Likes
64

That’s slick!! :+1:

65

Hi all, after implementing pretty much every suggestion in this thread, I found they were all lacking for me, the main issue being that the order numbers didn’t say in a nice linear sequence.

I.e. even though the order may have been rearranged properly, you’d end up with weird numbers, like 2/3/5/7/8 instead of 1/2/3/4/5 (e.g. @fayewatson’s https://faye-demo-app.bubbleapps.io/version-test/drag-and-drop ) or even weirder, like 2.25/2.75/3.4/4.5/5.75 (e.g. @gf_wolfer’s https://topshelf-elements.bubbleapps.io/version-test/drag-drop-list?debug_mode=true ), and those numbers just get weirder the more times you reorder.

So I’ve created a solution that, while it does use 4 actions, it doesn’t require extra hidden fields, doesn’t make used of ‘Advanced’ in the filter, only changes order numbers for records that need to be reordered, and most importantly for me, keeps the numbers in a nice, sequential order of 1/2/3/4/5.

There may still be a more efficient solution out there, but I hope this is helpful to someone :slight_smile:

Editor: https://bubble.io/page?type=page&name=drag-and-drop-order&id=phil-testing&tab=tabs-1
Preview: https://phil-testing.bubbleapps.io/version-test/drag-and-drop-order?debug_mode=true

Cheers,
Phil

10 Likes
66

FYI, I think there might be a bug in your idea. See image… I was just moving it around playing with it to test it out. These are the results.

Capture

67

Hmm, I spent 5 minutes trying to break it before and I couldn’t, but you’re right. The main problem seems to be when you drag and drop while a previous drag/drop is still processing. Let me see if I can fix…

68

Also possibly due to multi-user on the same list :stuck_out_tongue:

Would it be more efficient to store on a single row’s field, a list of the ordered things, rather than updating many of the things for each change in order?

69

That may have been the issue, or if not, even when I’m dragging and dropping on my own, it seems about 1 out of 4 times, Bubble decides to be its usual slow self and it takes 5-10 seconds to run the workflow instead of a fraction of a second. If I drag and drop while that delayed workflow is running that’s where the things breaks.

One way I can think to deal with that is to, at the beginning of the workflow, run an action that hides the repeating group or the drop area or something like that so that multiple drag/drops aren’t run at the same time, and then shows it again at the end of the workflow. I’ve now done that (hidden the drop area during the workflow) and most of the time, the hide/show isn’t noticeable, but on those occasional slow workflows, it helps slow the user down.

That said, if there are multiple users reordering it at once, you may need to use the database to hide the repeating group from all users while the workflow is running. But of course, the interface should be designed so multiple users aren’t editing the exact same data at the same time anyway, right?

The nice thing about Geoff’s ( topshelf-elements | Bubble Editor ) is that it has fewer actions, but as I said earlier, your numbering system is going to devolve into fractions.

I’m not sure what that would entail, but perhaps that’s what Geoff is doing at the link above. He does have some extra fields for making calculations.

70

What would happen if an item was deleted? Wouldn’t that leave a hole in the numbering? Could the workflow be set up to renumber the remaining items based on the “Current Cell’s Index”?

71

Depends on your exact logic for Ordering. If you use Whole numbers only in sequential order, then yes Deleting an item could cause an issue, but not necessarily (still in numerical order even if one is missing). Recalculating the order after every deletion might be more work than you want (and could have a delay)

A perk of the Averaging order method I linked to above is that there are fewer workflows and there is no need to re calculate the Order numbers on items if one is deleted

72

Phil,

I think you’ve done it! Works brilliantly. Thank you.

74

I wonder if leveraging @gaurav BDK list tools could help by processing the list in the front end and then committing the whole list to the database at once.

Thoughts?

1 Like
75

Absolutely loving the straight forward post sharing the answer to the problems originally brought up on this thread.

Always the most helpful when people share solutions rather than opinions…Oops, just shared an opinion

1 Like
76

In step 3, your “Search for Contacts” box on the left. How do I get to that?

1 Like
77

Never mind. I think I figured it out. That dialog is only available when doing a search.

78

I’ve got everything set up and working, except dragging and dropping doesn’t change the order. I think that’s because I’m not doing a search. So the Repeating Group isn’t trying to organize the list by the Order. Any help would be much appreciated.

79

Anybody know how to set a custom state onto a current cell in a repeating group?

Trying to save data into the database after the repeating group has been manipulated using drag and drop. Would like to set a current cell to have a custom state so I can keep an inputs value the same in the database after the text elements have been moved around using drag and drop.

2 Likes
80

Is there any reason for not using a search to populate the RG?

Stated differently: I understand that it might be possible to populate the RG with all items of a particular data type. Would it be possible to change this to use a search so you’d have access to the ordering field?

81

General Assessment of this Topic:

It seems to me that …

  1. There is a very real need for a solution to the challenge of ordering lists via drag-and-drop.
    All the techniques described in this topic appear to have shortcomings.
  2. Bubble engineers could solve this problem with more robust handling of list updates on the front-end coupled with more effective batching of updates to the back-end.

Since I am developing on Bubble as a non-coder, I expect more from Bubble to support this kind of real-world UI need.

2 Likes
82

So I think I was able to do what I wanted; although not in the way I wanted to.

After trying 50 plus different possible ways with no luck, I decided to create a “temporary” data table. In this table I save the information at the same time that I save the data in the table that will be saved as a final version. This first save is done at the time the user is inputting information that gets saved and displayed in a R.G. in real time.

After they input all data and the R.G. is fully populated they can use the drag and drop functionality to change the sort orders. In the “temporary” data table I “tie” the sort order to information that I don’t want changed as the user drags and drops and re-orders other data from the data table that the R.G. is referencing.

After the user drags and drops, there is a button for them to save the data. At this point I save data in the “final” data table using the information saved in the “temporary” data table.

Using this method I have enabled a user to create multiple Activities for a day. They are able to select a start and end time for each activity and then re-order those activities while the original start and end time stay in the same “slot” but the activities move into different positions.

Saving a sort order in the “temporary” data table I believe made it possible for the time input to not be changed.

This is for a tour booking platform’s admin panel. Not the optimal way, but it works and the drag and drop has no issues. Took me about 20 hours to do using all information from this topic posts without any background in coding.

3 Likes
83

Hey Laurence,

Like your clear voice here. Actually I solved this a few years ago. I’ve just been busy and haven’t posted my solutions here. Bubble is working their butt off to implement and roll out solutions continuously on a triage basis :smiley: drag n drop lists is not their top priority.

Happy Bubblin!

1 Like