Drag - Drop Reorder Your Repeating Group

Hey @philnauta. Great work. You can solve all the speed problems by implementing your idea (I agree that your filtered, limited approach is optimal) in state. Load the data from the database into a state list… have your drag n droppin fun, and then back up the state list to the database in the server… It works beautfully for me… Check it out!

Goooo states!

Sincerely,

Ashley

2 Likes

Thanks, Ashley, for chiming in and for the states tip. I’ll give it a try.

I appreciate what the team is doing. Sometimes my frustration with platform gets in the way of clear thinking, but I respect the work they’re doing, continuing to build and improve this in-flight airship called Bubble.

1 Like

starship

2 Likes

Hey Boston…

Saving to a temporary table… Great idea… That is, to separate the data to be manipulated… However, if you simply execute your idea in states, you can push the designated states into a different section (think regex or change to list of things and change the numbering of the designated states to +10000). Then you can manipulate those items (detected through filters) and replace them.

Any questions on this, or if you’re still stuck, drop me a line.

The struggles we all have are what make us understand this stuff better. :smiley:

Have a great day!

Sincerely,

Ashley

1 Like

Hey Laurence,

Absolutely fantastic to hear. I think this system is perfect for what you’re seeking to build. People from all walks of life accumulate huge stores of insight and Bubble let’s them express their ideas. Happy bubblin’!

What industry are you working in?

Ashley

Hi Ashley

Thanks for the comments. I always appreciate hearing from others about alternative ways to do things. I really don’t understand what you are hinting at though.

What I was working with is an input that when the value is entered, the data is saved into the database to display in a repeating group that inputs value. This is used to create daily itinerary items. In that repeating group there is also two drop down inputs for users to choose start and end times.

It is the drop down values that I couldn’t set a state for. Unfortunately it is impossible to retrieve the state’s value when it is an item in the repeating group. I even tried putting a group into the repeating group to set the state value to and again wasn’t able to retrieve it later for entry into the database when a “save” button would be clicked.

As I am completely without any background in programming, I don’t know how to use regex currently. I am also unsure about what the purpose of changing the numbering of the designated states to +10000 would be.

If you had any kind of demo or fourm app that would demonstrate what you are referring to would be great to get a chance to play around with it to figure it out.

Cheers

Hey Boston,

Someone has created a plugin to detect repeating group position. I know righ’? Not being able to detect position in a repeating group externally is a pain in the butt. There are ways (VERY hacky ways) to get the job done…

Ohhhhh, my friend… If you’re wanting to play in the coding realm, start to tinker with regex! It’s a great friend… (https://regexr.com/) Check that out… It’s all, always, and only step by step. no background in programming? pishaw (sp?) At the heart of programming is logic. So, any time that you visualize yer problems CLEARLY, then you’re thinking algorithmically. Just keep practicing with things.

If you have something you’re working on, throw it my way and tell me where you’re stuck.

Why do you want to set a state value for your drop down items?

Sincerely,

Ashley

1 Like

I wanted to set the state for the drop down so that after drag n drop of the R.G. cells main data I could save the start and end times (the drop down data). This was an issue because there is no way to save the state of the drop down into the database because it is inside of a R.G. cell. There is no way to reference anything’s states within the R.G. to save it to database.

This is why I ended up just saving to a temporary folder so that the start and end times do not cause the issue when drag and drop is taking place. Before I would have errors, such as times changing from a drag and drop (not supposed to happen) and ultimately errors that caused the drag and drop to not function after a certain number of drag and drop performances.

I had a similar issue with saving the state of an item in a R.G. before. I was trying to reference the state of an item in a R.G. of photos to send the data to a popup where the photos data would be manipulated. This was for a photo tagger. Was never able to reference the state set on an item from a current cell in R.G. ( I did however get the tagger to work )

What is the plugin for detecting the repeating group position? Wouldn’t just the cell index tell us that? Or does this plugin allow me to reference an inputs value from a specific cell in a repeating group by using the R.G. position number that the input value is located?

Cheers

Howdy Boston,

Are you saying you want to catch the start time of… opening the drop down menu? And you wanted to catch the end time of the drop down menu? Is that for the purpose of monitoring the user’s length of time spend holding the drop down menu?

Perhaps I’m not feelin your use case scenario-do-hicky

You can simulate a RG if you like… Then you can have full control over your content… That being said, go find that plug-in that reveals the location within a RG.

Are you trying to record the start/end times of…
the ‘drop down menu’ is visible?
the draggable element within the drop down menu being dragged?

Q: What is the plugin for detecting the repeating group position?
A: I don’t know… I saw it recently in the plug in sections… Go have a look.
Q: Wouldn’t just the cell index tell us that?
A: Yes, the cell index is given during a workflow, like upon release of a draggable element… However, it sounded to me like you wuz tryin to fix a lock on a draggable item within an RG (repeating group) at the TIME of contact (prior to release)

Q: Or does this plugin allow me to reference an inputs value from a specific cell in a repeating group by using the R.G. position number that the input value is located?
A: Yes, I believe that was the essence of that lovely plugin.

Ciao friend!

Ashley

Hi Ashley

I’m not doing anything like what you are thinking. It is much more basic and straightforward.

It is to fill in a daily itinerary. User inputs the activity, the R.G. gets populated with activity description. Then the user can select from dropdown menu a start time and end time for activity. User can drag and drop to re-order activities at any moment in time. The start time and end time selections remain the same as user drags and drops itinerary descriptions in the R.G.

Here are a couple screen shots.

By the way I checked out that plugin. It basically shows a position. I assume there are some reasons to have that ability. I think referencing the index # of the R.G. item could be easier, unless somebody wanted to add another element to overlap the R.G. at a certain position rather than a specific R.G. cell.

I am interested in the possibilities, especially like what you thought I was trying to do about fixing a lock on a draggable item. I will be in the near future attempting this to enable a user to create shapes and position them onto the screen. This would be for purposes of restaurants putting together a table layout or hostels doing it for bed positions in a dorm room.

For now I am mostly just trying to get a solid handle on CRUD apps.

Howdy @boston85719,

Nice idea. Managing time, activities, people, n resources is critical. Good work~!

shapes…

Cool, I did a process redesign for Hard Rock Cafe in Korea. I made a dashboard of the restaurant showing live updates about the table status… Very nice!

YES, CRUD fluency is a noble and just pursuit.

Keep on Bubblin!

Ashley

I have a drag and drop inside a repeating group which has vertical scrolling as its layout style. When a user is scrolled down in the repeating group and tries to drag, the selections scroll to the top.

https://vimeo.com/318119907

This is fairly confusing for a user. I have a lot of data in some instances of the repeating group and would prefer to use a vertical scrolling group. I’d prefer not to paginate or something. Any thoughts?

Hey @grottofilms,

pulling draggable objects in a VRG (vertical repeating group)… I hear dat!

You can’t use a vertically expanding RG and expect it to scroll my friend. I suggest using a full list. That drags just fine… (It’s a little sticky, and not the most fluid experience when dragging objects beyond the screen.)

Just off the top of my head, here are a few thoughts on the matter. (I’ve been there bro, I feel ya…)
You should think very specifically about your use case. Make granular decisions about the experience for the user. A concrete idea will guide your requirements to build a well thought out, intuitive, use case scenario for the user.

For example…

  1. How many things do you want to drag? 1? more? neighboring items? selectively picked (non neighbor items?)

  2. How far would people like to drag them? (through the entire range of your data?

  3. What is the range of your data set? (are you expecting your data sets to go far beyond the viewport/viewable section of the website?)

  4. I could imagine grabbing an item, then when I approach a part of the screen (top n bottom) then it would trigger scrolling thought the RG. (to accomplish this, I suggest that one way to do this would be sticking two drop zones in to two floaters… one floating group anchored to the top,and the other to the bottom. In this most basic version of a drag/scroll combo GUI, you could trigger scrolling to sections in the RG… There’s a plug in to detect that.)

  5. I agree, scrolling elegantly with dragged items is a far more lovely experience than pagination.

  6. A while ago, I ran into this… (I believe we’re all chewing on similar challenges) and in addition to a simple drag n drop, I added the ability to select a group, then drag that whole group to a new location in a 2d treed map.

Those are my 2 cents.

Happy Bubblin!

Ashley

Many thanks for the thoughtful response. I will consider my use case. I can use a full list in most circumstances, but occasionally, I will have many items that for the sake of what I’m doing need to exist on the same page. This causes some bloat in load times, etc. I will investigate some of the ideas mentioned here and get back to you. Thanks again!

1 Like

I have a pretty basic example of drag-drop reordering in a repeating group.

image

It’s part of a larger page with diagnostic info and the ability to add items to the list.

The up and down arrows are not part of the drag-drop operation. They move items to the top or bottom of the list respectively.

The arrows are important because, in realistic situations, the list that’s being reordered is much longer than what’s visible in the rg, and this is an example of where Bubble’s dragging and dropping fail to work well.

In this example, there are two odd behaviors:

  1. additional rows dropped down below the area of the rg. The rg stops at yak #10.
  2. the hand (cursor?) is separated from the item that’s being dragged, zebra #11.

These are clearly buggy behaviors.

Other than this, the delay in assigning new numbers is highly variable. The result is that it’s easy for the user to begin a second drag operation with items that don’t reflect their correct numbering from the first operation. This has resulted in duplicate numbers and gaps in sequential numbering.

I know that @ashley.benson.tait suggested using a list in state to speed up reordering. That won’t resolve the weird UI problems though.

NOTE: I have submitted a bug report.

@laurence We have received similar reports and unfortunately this is not a quick fix. We recommend using ‘full list’ on the RG as a workaround in the mean time.

Goodmorning my friend,

I’m guessing that’s a user.code.glitch. (not Bubble’s problem, but I could TOTALLY be wrong!)

Drag’n’drop lists can be built beautifully (no delays on updates, pulling smoothly) on Bubble.

I’m not sure how you’ve built yours. I’m often to blame for a logic glitch when I’m first trying to implement a new concept. I can’t say you’re making logic mistakes there, but I can only suggest you rethink things… Have you run several experiments to rule out problems there?

I’ve seen funny teleporting hand/cursors in dragging groups when a RG is moving (such as with a move element and make the group move slowly).

Can you share this to me (publicly or privately) so I can have a look at that?

If you want to drag n drop beyond the viewport, execute a ‘full list’… Trying to drag an object in a vertically expanding RG does not work well.

Ashley

Oh… on the delay in assigning numbers…

That’s not a bug. That’s the coder’s decision to interact with a Database server 100s of KMs away and expecting the return values to repopulate a repeating group all before a user attempts to pull another item.

Run your concept through states (Those numbers are calculated and stored locally, rather than shipped back to Bubble’s servers).

No bugs there.

Peace n Bubbles

Ashley

2 Likes

At this point, I’m lost. I don’t know what state(s) to create and how to manipulate them. I’ve studied the Bubble manual and reference with regard to states and lists. No help.

I tried creating a custom state that is a list of type Thing and binding that to the RG, (“Thing” is the name of the data type I’m using drag-drop to reorder.) Reordering works, but data is being written to the database with every dropped on event so the time lag will still show up at some point, fouling up the user experience.

What I’m envisioning as a custom state is a list of types that look like the database thing but are disconnected from the database and can be manipulated separately. I don’t see the workflow actions needed to do what I’m envisioning, so I must be missing something elementary about the suggestion to work in states.

Here are a few snapshots of what I have hooked up:

image

and

and finally, the salient action, when a drop zone is dropped on:

image

What I don’t have a clue of is how to do the equivalent of Make changes to a list of Things in state and defer the database update until all the dragging and dropping is done.

2 Likes

Great work! I’m guessing that Bubble, like Javascript, limits the number of digits to 16 (i.e. double float)?

We can always have a normalization event that we do manually when we get to that point, but something to keep in mind.