[New Plugin] Drag It - Enhance Your Repeating Groups with Drag-and-Drop Functionality: Rearrange, Sort, Reorder, and Transfer Items Between RGs Effortlessly

[ken1]

1. My RG data source is the DragIt’s Sync Source.
2. My DragIt’s data source is a field in my DB Current User’s: SortedLists: Inbox

From elsewhere in my app, the user creates a new item and in addition to the normal record creation, I am adding the unique ID to the Current User’s: SortedLists: Inbox.

But I cannot get the plugin to display the added item without reloading the page. All I need to do is refresh the data source because the new item is already there in the list, but the plugin won’t display it.

I’ve tried “Reset a DragIt” in workflows, but that is not correct. It does not refresh the data source with the newly added item.

I also tried to Display List to show the Current User’s: SortedLists: Inbox in the repeating group. This does show the item right away, but is no longer in sync with the plugin and it stops working correctly.

Am I going about this incorrectly? How do I add a new item and have it appear in the RG and still work with the plugin?

Thanks!

[NoCodeDataArtisan]

When you use the grouping feature and items are moved between RGs, the repeating group structure will be destroyed and can no longer be used as normal.
That’s why we don’t synchronize it in this situation (auto sync = no).

Unfortunately, we haven’t been able to find a solution for this situation yet. You can delete items through the Drag-It’s action, but added items require a page refresh, or an independent repeating group is used.

[ken1]

Thank you. Please allow me to explain in a little more detail.

I am not moving items between repeating groups.

I have a data type “ActionBlock” which has a “Type” field. An ActionBlock can be of type Action (aka Task), Project, Agenda, Reference, etc. An ActionBlock is a catch all data type which has fields for relatedAction, relatedProject, etc.

In this way, I can use the same repeating group for any type of data (it’s a reusable element).

The sorted list is stored in a data type SortedLists in a field for each list (“Inbox”, “Actions”, “Projects”, etc.)

The user data type has a field for relatedSortedLists, so that I can reference it directly from the user, but the list is not actually stored there. There is only one SortedLists record per user.

Now, let’s say I need to sort my Inbox. My repeating group’s data source is DragIt’s Sync Source. My DragIt’s data source is Current User’s SortedLists: Inbox.

So far all is okay.

But there is a different place in the app (in the header) where the user can type a new “thing” (action, project, or just any thought) and when they hit enter, a new ActionBlock record is created. In my workflow, I create the ActionBlock and then I append the ID to the end of the list Current User’s SortedLists: Inbox.

This new item now needs to show up in the inbox and be in sync with the plugin. Can’t you add a workflow action to just refresh the data source in the plugin, as if it was first being initialized? This is really all I need. I’ve worked the rest of it out.

For some reason, none of the list plugins make this easy. I just want to add something new and have it show up and be sortable.

I’m not complaining about you, but airing some frustration. I hope I have explained this well enough. I look forward to your reply.

Thank you.

[NoCodeDataArtisan]

Would the method you’re using function smoothly without any issues, even without the Drag-It plugin?

If you refrain from utilizing grouping and have the auto sync option enabled, there shouldn’t be any complications when it comes to creating items and appending them to the list.

[ken1]

OMG! I apologize.

User error.

For some reason, I suppose while testing the different options in the plugin, I changed autosync to “no”.

As soon as I switched it back to “yes”, everything started to work as expected!

Thank you for all your assistance. I will be using this plugin for my new app.

[NoCodeDataArtisan]

No problem bro

It’s important that it’s working fine now.

If you run into another problem, we’re always here to help.

[ken1]

I’m getting some server error from the plugin and it’s probably because of how I’m using it. I’m also having a problem getting my RG to display correctly all the time. Here is my situation:

I have a “card” in each row of a repeating group that displays information about a DB record and gives inputs to make edits. This repeating group, with it’s card on each row, is needed in at least eight different lists in my app.

Naturally, I don’t want to create the same thing eight times, and make changes in eight places, so I have created the RG as a reusable element. This is where it get’s tricky.

I want all instances of this RG to work with the DragIt plugin.

On the repeating group, I created a dynamic ID that includes a part of the URL so it populates with the correct data. I placed eight copies of the plugin inside my reusable element and used a hard-coded ID to refer to the RG.

Then on each DragIt plugin, I specify the correct saved sorted list for that page. In other words, if the page is “actions”, my RG ID is “re-rg-actionblock-actions” and the same ID is hardcoded on one of the DragIt plugins. Then that DragIt’s data source is the Actions saved/sorted list.

Mostly this is working. But there are three problems.

1. First, when the user clicks on navigation to go to a different page (it’s actually a single-page app and the URL is modified but the page is not loaded again), the RG is not populated with the new data source. If I force a “display list” event from a workflow, then it usually shows up, but it’s tricky to get that to trigger at the right times. If I reload the page, then the data is displayed correctly.

2. The second problem is that when my RG data source is DragIt’s RG Sync Source, I also have a need to show a subset of that data. I tried to use the :filtered modified on the plugin data source and that did not work. Instead, I tried to use the :filtered modifier to apply my conditions on the RG data source but that also did not work. For example: the RG data source is “DragIt’s RG ActionBlock - Action’s RG Sync Source:filtered” but this does not filter the list. It still shows the full list.

3. The third problem is that I am getting server errors. I assume it is related to how I’m using the plugin, but there is not more information for me to understand it.

One of the things that would help the most is if there was a way to tell the plugin to simply refresh the data from the source. That way I could trigger this on the plugin to pull the correct data into the repeating group.

I appreciate any help you can provide! Thank you.

[ken1]

Of course, 10 minutes after posting my last message, I worked out problem #1. I am using a custom state to help know when to display to the list. It would still be much cleaner to just have an action in the plugin that I can trigger that refreshes the list.

[ken1]

I now have #2 filtering working okay too. So you can ignore that one! (sometimes I think just posting a question on a forum actually fixes the problems. LOL)

[NoCodeDataArtisan]

Hello there! Wow, you’ve been working really hard, and it’s truly delightful and an honor for us to see that Drag It has been able to bring you closer to your goal.

However, there might be certain areas where the plugin falls short in meeting your needs. This is because our control over the RG is quite limited, and some actions can only be executed through the bubble.

I’ve read your message a few times, and I’m glad to know that the first issue has been resolved, as I didn’t quite understand it before.

Regarding the third matter, could you provide more details about the error? Is it a persistent issue, or does it occur under certain circumstances? Unfortunately, sometimes the error message doesn’t provide enough guidance for us to assist you effectively.

As for the second issue, RG Sync Source is our solution for RG control. Depending on the settings in Drag It and how it’s used, we can manipulate the data provided to the RG.

In fact, there’s no need for a separate action to update the data. As soon as the data source you’ve provided to Drag It is updated, the plugin will try to update the RG if necessary.

It’s great to see you tackling these challenges. I believe your application must be truly unique, especially in the bubble space.

We’re always here to help you, so please don’t hesitate to ask any questions, even if you manage to find the answers yourself

[ken1]

Thanks for the reply.

I do need to update the display. I think it’s because I’m using a single repeating group and I am changing the data source for the repeating group based on the current page. So, although the data source changes correctly (as validated in the debugger), the repeating group does not update what it shows unless I force it with a “display list” in a workflow. This would not be an issue with a normal repeating group and a link to a single DragIt as it was designed for.

Regarding the server error, My guess is that it is triggered by one or more of the DragIt’s on the reusable element that are “not” currently linked to the repeating group. Because the repeating group they are looking for does not exist (technically, the ID on the RG is different), I suspect this is the cause of the error. Other than receiving server errors, it does not seem to be causing any functional problems.

[NoCodeDataArtisan]

Thank you so much for providing such a thorough explanation.

If you believe it would be helpful or necessary, we can take steps to prevent the error caused by the missing element.

Your input and suggestions are greatly appreciated!

[ken1]

Thank you. I now believe it will be necessary. I received a new error with more detail, but it still seems to be related. I think it is because the ID for the RG changes, and that leaves the plugin without a RG to link to.

I will be happy to work with you to resolve this if necessary. This function is a deal-breaker for my app, and I must find a way to get it to work. Please let me know how else I can help.

Thank you.

[NoCodeDataArtisan]

We are currently developing an exciting new action that we believe would be highly suitable for you.

Furthermore, we are actively addressing the error issue associated with this situation.

[ken1]

That is awesome to hear! Thank you.

I’m working on a different part of my app in the meantime. I look forward to your update.

[sppreus]

Hi NoCode, this plugin is great, thank you. I find the no sync option best when re-ordering and moving items from one RG to another. Is there a fix to make newly created items movable without a page refresh?

[NoCodeDataArtisan]

Hi there! @sppreus

I’m glad to hear that you’re finding the plugin useful.
However, I’m sorry to inform you that it’s not currently possible to make add items without a page refresh within the context of repeating groups (RGs) in Bubble.

Repeating groups in Bubble have a specific way of functioning, and when items within them change in ways other than the default behavior, they can behave unexpectedly. For example, a new item is generated in another RG because the last item is responsible for generating new items in the RG

A potential workaround for this limitation is to use an independent RG to generate new items and allow users to drag and drop them into one of the desired RGs. By separating the generation of new items from the main RGs, you can maintain better control over the drag-and-drop functionality.

I understand that this may not be the ideal solution you were hoping for, but I hope this explanation clarifies the situation. If you have any further questions or need assistance with anything else, feel free to ask!

[sppreus]

Hi Erick2, this is a great example and nice work in setting this up!

Curious, did you have the insync option as ‘yes’ or ‘no’. I am struggling to create a kanban, when new items are generated and you can move items without funny stuff like you shared earlier, from happening.

Cheers
Sean.

[quickiwi]

Love the plug-in, a no-brainer purchase! It’s working great to help reorder images.

I am running into an issue though.
I have a “Thing” called an Item and the Item has an array of Images. When I delete an image from the repeating group and then save the changes to the database the deleted images comes back. I think I have things configured right, but I’m doing something wrong. I’m just not sure what more to check.

Here is how I’m updating the database:

Here is how I’m deleting the images from the Item’s Images array

Here is how the repeating group is configured (the ID Attribute is set correctly)

Here is how the DragIt element is configured

Is there something specific I need to do if I delete something from a repeating group?

[NoCodeDataArtisan]

Well done, that’s great. @quickiwi

Did you have a problem saving the list? Because you did not post a photo of the workflow details.

To fix the deletion problem, it is necessary to use the Drag It Delete Action in addition to the existing one.

Or you can let the users use the Remove Dropped out feature. (+ the existing action)