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

[marcus-lp]

Awesome! Thank you.

[NoCodeDataArtisan]

Hello Julius,

Thank you for reaching out and sharing the detailed insights regarding your setup and the challenges you are facing while using the plugin. We value your effort in setting up a structured Kanban board using the plugin, and we are here to assist you in ensuring it operates seamlessly.

Have you had a chance to check out our demo setup for implementing Kanban-like repeating groups (RGs)? It has been structured to address these kind of nuances and might provide a more streamlined solution to the problems you are currently facing.

Given your current setup, I would recommend considering some modifications to your database structure to incorporate a hierarchy, which would inherently facilitate smoother transitions between different statuses in your Kanban board. This would potentially resolve the issues you’re encountering.

Alternatively, if you prefer to maintain your existing setup, another approach could be to implement a ranking index system. While this method could solve the problem, it is indeed a bit more intricate to set up and might incur higher costs.

To provide you with a more precise guidance, it would be extremely beneficial if we could have a look at your editor to understand the nuances of your setup. This way, we can work together to find a solution that is most aligned with your vision and current structure.

Please let us know your preference and how you’d like to proceed. We are here to assist you in any way that suits you best.

Looking forward to hearing from you soon.

Best regards,

[marcus-lp]

Hi @NoCodeDataArtisan

The drag-and-drop movement is very fast and so provides a good UX.

Probably something I should have checked before, but is there a way that you suggest that we keep the order of the dragged/dropped data from being lost on page refresh?

Have you or other plugin users dealt with this via writing the modified list to the DB to be recalled after page refresh - and if so - how often has been a good cadence of this, per drag and drop event or by some other event or metric?

Thanks!

[NoCodeDataArtisan]

Hey @marcus-lp

Sure, you can use the Drag It events to trigger your workflows and also use the states of it to access needed details.

We are working on providing a tutorial video for saving index for sorting purpose, but meanwhile you can checkout our latest video to get familiar with Drag It’s event

Thank you for your patience and understanding

[NoCodeDataArtisan]

New Features and Fixing Issues
2.14.0

Dear Valued Users,

We’re thrilled to announce the latest updates to our Drag It Plugin. We always strive to improve your experience, and these new features are designed to give you even more control and flexibility:

1. Next Item Unique ID Storage:
   We have introduced a more optimized method for preserving the order of your items in a sequence. Now, each item will have a field specifically for storing the unique ID of the next item in the sequence. This ensures a consistent sequence flow.

• How to Apply:
  The order of the items is maintained by this method, as each item has a field that stores the unique ID of the next item in the sequence.

• 

• For a more user-friendly experience, you can easily access and modify the “Changed Next ID” for up to three items using the new “Changed Items” state.

• For example, to update the first item, use Make changes to thing action and simply select it in the " Changed Items" state and set the first item of “Changed Next ID” to the field with the unique ID of the next item in the sequence. Follow the same process for the second and third items.
  We’ve also given you the freedom to implement additional modifications, especially when transitioning between separate groups or categories.

• 

How to set Dynamic State

2. Dynamic Updates for Locked and Sortable Fields:

• No more action to change them! With this new update, you can dynamically change the Locked and Sortable fields without needing any actions. This brings more interactivity and adaptability to your drag-and-drop experiences.
  

---

These enhancements are a direct response to the feedback and needs of our users. We hope they significantly elevate your building experience with the Drag It.

Please feel free to share your feedback, suggestions, or any queries you might have. We’re always here to support you!

Warm Regards,
No Code Artisan

[joaquintorroba]

Hello guys, I need help allowing the user to perform drag and drop (and save this action) between two distinct but interconnected data types.

• Data type 001: files to folders (e.g., 3 files can be saved in 1 folder).
• Data type 002: folder to files (1 folder has 3 files attached).

Here a quick video of the interface. The goal is to be able to drag those files between those folders.

Your help is much appreciated. Thanks in advanced!

[NoCodeDataArtisan]

Hello, @joaquintorroba

We’re thrilled that you’ve chosen our plugin for your project! Yes, you’ve got it right, you’re aiming to transfer some data from one place to another. This process is indeed very straightforward with Drag It!

The interaction you are trying to create, where files can be dragged and dropped into folders and vice versa, is quite similar to using a Kanban board. In this scenario, think of your files as tasks and folders as boards. Our Kanban demo page provides an example on how you can implement this functionality. If you haven’t checked it out yet, we recommend giving it a look, as it can be really helpful.

Here is the link to the Kanban Demo Page Editor for your reference.

Additionally, don’t hesitate to reach out if you encounter any challenges or have any questions. We’re always here to support you and ensure your project is a success!

Warm regards,

---

This can be extremely helpful, thanks Thomas for sharing his experiences. @tmxl

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

Hey @NoCodeDataArtisan - thanks for your help here, I’ve managed to solve all my issues with a combination of your help and a bit of trial and error. Here’s a clip of the result: As you can see, cards are now swappable within their own phase and between other phases. I want to explain this as well as I can in case there is someone out there trying to achieve the same result, so… Here’s what I did: I took your advice and created a list of Journey Cards that exist in each Phase, the …

---

Kanban + Filter

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

We are thrilled to share with you the results of our hard work, which took longer than expected due to the complexity of the task. You can check out our sample on the demo page and see how we did it. [image] Drag It - Easily move cells between repeating groups (bubbleapps.io) We have also added some comments on the workflows to help you follow the logic behind our solution, and we will soon release some training materials for you to learn more. Data-visualization-plotly | Bubble Editor […

[joaquintorroba]

I’ll do that. Thanks!

[NoCodeDataArtisan]

During its implementation, wherever you have a problem or have a question, we will be happy to help you.

[Bubbleboy]

I’m using your plugin and it does exactly what i need, great work. My question is this… will this work (or should it) on API calls? My use case:

I have a thing and with a list of things (all native bubble) in another page of my app i make a call to the DB via the api (this mitigates the privacy rules for non logged in users who need to see the content. Now when i set the source of drag it to this api and the RG group to RG sync source i don’t get anything. this is not a complaint btw. great plugin

[NoCodeDataArtisan]

Hi @Bubbleboy,

Firstly, I’d like to express my gratitude for your kind words and feedback on our plugin. It’s always heartening to hear when our tools meet the needs of our users.

To address your question, as of version 2.9, Drag It has enhanced its synchronization capabilities with the DataSource. This means that in both single and group mode, any item you add manually to the database will appear in the corresponding Repeating Group (RG).

Regarding your specific setup with the API call as a data source for Drag It: Could you provide more details on how you’ve set this up? It would be beneficial to understand the sequence and way you’ve set the Drag It data source. It probably won’t call it automatically.

Furthermore, have you tried replicating this situation without using Drag It? I mention this because, in rare instances, Bubble might not reflect data updates promptly, especially when reusable elements are in play.

Rest assured, our primary goal is to assist you in resolving any challenges you face, even if they might not be directly associated with Drag It. We’re here to support you every step of the way!

Warm regards,

[Bubbleboy]

Thanks for the prompt reply, like most things, it was user error (mine) i should have checked before asking for your assitance. All working, thanks. Just a little feedback for you. There seems to be a few plugins that offer this capability… the reason i opt’d for yours and didnt even try the others, was due to this active thread and how responsive you are are,

[NoCodeDataArtisan]

These are the feedbacks that show us the way and we are always appreciated our users.

Honestly, I did not understand whether you were able to successfully implement what you intended?

Can you explain a little about this feature that you mentioned?
As you said, we are eager to improve our plugins, thanks a lot.

[tmxl]

Hey @NoCodeDataArtisan

Sharing a bit of progress on my project that someone may find helpful:

@tmxl

I took your advice and created a list of Journey Cards that exist in each Phase, the cards are now rendered per phase based on that list.

I’ve applied the same logic to the Phases, so they exist as a list in the Journey. Phases can be reordered by dragging them around, which works great - however I struggled with this issue for a little while:

If a user decides to drag a Phase into a Journey Card RG, it will accept it in the UI and remove the phase from the phase list. Once the page is refreshed it corrects itself. You can see the behaviour below:

I had configured the Drag It element for the Phase RG like so and thought that should be enough to disallow this from happening:

However, the solution was to set the Journey Card’s Drag It element ‘Allow from group’ to the group name (shared) that was set above.

Result:

[NoCodeDataArtisan]

Hey Thomas,
@tmxl

Firstly, we truly appreciate you taking the time to share your progress with us. Your feedback is instrumental in enhancing the user experience for everyone.

We also appreciate your transparency in sharing the challenge you faced. Such insights not only help us make our tools better but also assist other users who might be navigating similar paths.

Thank you for being an integral part of our community and for your continuous support. We value users like you who are always pushing boundaries and inspiring us to be better.

Warm Regards,
Mehrdad

[joaquintorroba]

Hey @NoCodeDataArtisan,
I did the implementation as you adviced and it worked.
Thanks a lot for the help!

[aj11]

That is such a cool UI, what is this project?

[NoCodeDataArtisan]

Awesome, @joaquintorroba
You can always count on us if you need any assistance or have any doubts in the future.

[tmxl]

@aj11

That is such a cool UI, what is this project?

Thanks a lot @aj11. I call it Subjourney.

It’s a collaborative journey mapping tool designed to make it easier for product teams to build living, breathing journeys that reflect how their users flow through their products (although really anything temporal can be mapped).

It’s based around service design blueprinting, which I’ve always found to be super useful but extremely tedious to design and maintain - Miro is great but whiteboards/stickies become overwhelming quickly for complex journeys. So I saw an opportunity to help solve this for myself and others.

Its called Subjourney as any touchpoint (card) can contain nested (sub)journeys. This helps to break down complexity while keeping things presentable and maintainable. You can see the structure in the outliner below (built with native Bubble):

I’m hoping to launch a closed beta around December, if you’re interested in being involved just let me know. Cheers

[Bubbleboy]

@NoCodeDataArtisan if the RG is larger the visible page, is there anyway to detect that the dragged item as reached the visible limit of the page and the RG will scroll to allow the item to be dropped elsewhere