[New Plugin] Listopia - Your Utopia for Mastering Lists in Bubble ( 🚀 Tutorial)

[NoCodeDataArtisan]

Hi @ken1

I’m a bit confused about certain aspects of the explanation. But no worries, I’ll try my best to put my ideas into action and let you know the outcome.

---

Thank you so much for the feedback!
I just wanted to clarify if your feedback was specific to the video or if it was a general comment. Regarding items 1 and 2, would it be helpful if we included more detailed descriptions on each field’s documentation, or would you prefer a more concise and visual approach like bubble documentation?

Your opinion means a lot to us, and we genuinely appreciate you taking the time to share it with us.

[NoCodeDataArtisan]

Hey @ken1 !

Great news! I’ve spent a good few hours working on it, and I managed to accomplish what you asked for.

You were absolutely right; we use Replace instead of Swap.

I’ve included the link to the preview as well as the editor for you to check out.

Feel free to take a look and let me know what you think.

Preview (Drag It + Listopia)

Editor (Drag It + Listopia)

Challenge Summary

Ken is tackling a complex logical challenge involving two interrelated lists and the use of a “Drag It” plugin for item sorting. The requirement is that any change in the order of items in one list should automatically adjust the corresponding items in the other list to maintain synchronization.

Let’s use Ken’s example to illustrate:

Our Primary List, in original order, is:

• Apples
• Oranges
• Grapes
• Peaches
• Bananas

And we have a Sub List, which contains filtered items from the Primary List:

• Oranges
• Grapes
• Bananas

Now, if a user decides to rearrange the items in the Sub List using the Drag It:

Sub List (After sorting):

• Bananas
• Oranges
• Grapes

The Primary List should also automatically adjust the order of its items to match this new arrangement:

Primary List (After Sub List’s sort):

• Apples
• Bananas
• Oranges
• Grapes
• Peaches

This is a rather complex logical challenge, but we’ve managed to solve it using Listopia. You can check out the solution in action and delve into the editor to understand how we achieved it by clicking on the links .

Please feel free to ask any questions or clarifications you may have. We’re always here to help you understand the process better!

[ken1]

Wow, thank you. I will test this right away.

You are amazing…

[NoCodeDataArtisan]

Thank you so much for your kind words!
They mean a lot to us. We are always here to assist you.

Just wanted to let you know, we’ve recently rolled out an update with some minor improvements and bug fixes. Please ensure you’ve updated to the latest version for the best experience.

[ken1]

Thank you! I’ll check it out now.…

---

Interesting. It will take me a few tries to dissect what you did there! I have one question.

I see that your RG has the Data Source as Drag It A’ RG Sync Source instead of Drag It A’s Updated List. Is this because Listopia now has the updated list (sync’d to the Drag It) and the source changes based on whether the list is filtered or not?

I’m just trying to understand what’s going on so I can repeat this both now and in the future.

Thank you.

---

New questions.

Your primary source in the example is a RG. Does it have to be?

1. I have my primary source stored as a sorted field in the DB, which I access through a related field on the current user:

Current users's Sortedlists' Actions

Can I just substitute this everywhere you used the RG?

2. On the Keeper, you have a condition to use the Keeper’s List Two when a state indicates the list is filtered. Do I have to use the filtered list from the Keeper List Two, or can I use…

Current users's Sortedlists' Actions:filtered

…directly in the condition? In other words, I will check the state and when the state is true, change List One’s Data Source to the filtered list.

The reason I as this question is because I have at least eight different filters that can be applied in all combinations. I’m hoping I can just keep the filtered list as a dynamic source.

If that’s not going to work, can I use more than one Keeper, or will I be tied to just one per Drag It/RG combination?

I’m asking all of this before trying it because I’ll need to restructure a lot to try it out and I don’t want to have to undo all of it if I know it won’t be correct.

Thank you!

---

Update: I think I know a way to have a single filtered RG to cover all combinations of filtering. If this works, I will be able to follow the demo created.

Does anyone know of a good way to account for eight different filters that can be applied in all combinations? I really don’t want to create 255 conditions to cover all possible combinations.

My first thought is to create a hidden RG for each filter. Make the source for each RG the previous RG’s List. Then, using states, each RG will either filter or not. The last RG in the chain will have the final filtered list.

Is there a better way than keeping all of these extra RG’s in memory?

If a list can be expected to have 400-500 items in it (it won’t always, but it’s certainly possible, hence the need for filtering!), will this become a memory or performance problem?

I’m just looking for the best way to apply multiple filters to a list when I don’t know how many, or if any, will be used at any time.

Thanks!

[ken1]

I have another question. Using Drag It and Listopia it looks like I’ll be able to handle my complex needs for manual sorting of lists both when unfiltered and filtered.

I also plan to sometimes sort my lists differently, such as by due date, alphabetically, etc. In those lists, I will not need any manual sorting.

What I’m wondering is if a user completes a task, deletes a task, or decides to move it to another list while not viewing the manual sorting, will this mess up the Drag It/Listopia setup?

In other words, how would I go about adding/removing tasks from the list when not viewing the manual sort mode? (Did I just add a new complication or is this no big deal?)

[georgecollier]

Does this plugin have a solution for this scenario?

Minus only one item in a list

I have the situation described above. I have two lists List A: apple pear pear banana List B: apple banana pear apple Each list is displayed in a repeating group. When a user clicks a button in a repeating group cell, the item is removed from that repeating group and added to the other repeating group. So, if someone clicks the button in List A 2., 2. should be removed from List A and be added to List B. However, :minus item removes both instances of ‘pear’ in the list. Anyone know ho…

[NoCodeDataArtisan]

Hey @georgecollier

Certainly!
This task will be a breeze, just like taking a sip of water.

@NoCodeDataArtisan

2. Add/Remove Items: Conveniently add or remove single/multiple items at a specified index.

If you are interested, we can provide it to you for free so that you can try yourself according to your needs.

[georgecollier]

Sure, can you add to bellychefs app?

[NoCodeDataArtisan]

Yes, please refresh once and click the install button in the plugins tab.

Listopia is at the beginning of the list of plugins.

If you encounter any problem or question we are here to help you.

Enjoy the new style of managing lists in the bubble.

[georgecollier]

Just tried to implement it but finding an issue.

I think my lists are set correctly. They appear correctly on the Keeper element in the debugger.

My repeating group uses it as a source:

But is empty:

[georgecollier]

Nevermind, seems to be because I placed the plugin in a hidden popup rather than on page so it wasn’t visible

[NoCodeDataArtisan]

Thanks for the quick update.

[luke2]

Hey @NoCodeDataArtisan

Nice plugin, certainly can see some uses and probably far more powerful than whats on the surface.

Just a quick question, using this plugin, would it be possible to generate a list of the first item in a nested array. So for example lets say we have a data object Program and a Program can have a list of data typesProgram Terms which contain a start and end date (date field) and a enabled field (boolean field), so:
Program 1 (list of program terms)
Program 2 (list of program terms)
Program 3 (list of program terms)

Would there be a way to generate a list of Program Terms from the above using the first item from each Program? Also would it be possible to use a :filtered method so for each program > program terms we could filter & sort to process, so we end up with a list of Program Terms (3 in the example above) that are enabled and sorted by start date descending = true

Thanks and hope the above makes sense.

[georgecollier]

Works well! I can purchase.

[NoCodeDataArtisan]

Hi Luke,

I’m really pleased to hear that you find Listopia valuable. I appreciate you reaching out with your question.

I must admit, I’m having a bit of trouble fully understanding the challenge you’re facing. However, I believe that you’re asking whether it would be possible to generate a list of the first ‘Program Term’ item from each ‘Program’. Additionally, you’re inquiring about the potential to apply a :filtered method to each program > program terms to process them and sort them according to the ‘start date’ field.

While I think your request could be possible, I’m excited to tell you that we’re currently working on a new feature that might address this in a more efficient way. This upcoming feature focuses on handling Loops, and I believe it might be particularly useful for your use case. I kindly request you to wait for the release of this new feature, which we’re going to announce very soon. We can then revisit your scenario and explore how best to use the new feature to address your needs.

On a separate note, I wanted to express our gratitude for your continued support. As a token of our appreciation, we’re delighted to offer you our Listopia package free of charge. You’ll receive a message from us soon with further information regarding this offer.

Thanks again for your query and your support.

Best regards

[NoCodeDataArtisan]

@georgecollier
We greatly appreciate your support in using our product.

We are delighted to inform you that while you can continue to use our product for free, we would be thrilled if you consider purchasing it to help us further.

If you are interested in buying the product, please let us know, and we will remove your app from the free lists and facilitate the purchase.

Thank you for considering supporting us.

Kind regards

[luke2]

Hi @NoCodeDataArtisan

Yes exactly right, as you’ve mentioned, essentially it would filter each list (of Program Terms) within the Programs.

Awesome, the looping feature sounds great - looking forward to the upcoming release of that one.

Thats very kind of you and much appreciated. I’ve got to say, your customer support is fantastic, really gives me faith in the plugin lineup you offer and support - keep up the good work. Cheers

[NoCodeDataArtisan]

Hi @luke2,

Thank you so much for your positive feedback and kind words about our customer support. It’s always encouraging to hear from users who value our work and it motivates us to continue providing top-notch service.

I’m delighted to inform you that we’ve submitted the update for the looping feature. It’s currently pending approval from Bubble, and once approved, it will be immediately available. We believe you will find this feature to be extremely useful and perhaps even unbelievable in its efficiency and effectiveness.

I also wanted to mention that we’re in the process of creating some new tutorial content. We recognize that our previous tutorials may not have met expectations,
We are fully committed to improving upon them. Users patience and understanding in this matter is greatly appreciated, and we’re excited to bring you more comprehensive and intuitive guides very soon.

Thank you again for choosing our plugins and for your patience during these updates. As always, if you have any further questions or need additional assistance, please don’t hesitate to reach out.

Best regards,
Mehrdad

[NoCodeDataArtisan]

Update: Multiple List

Listopia has a special feature called Data Flows that you can use for actions.

We improved it in version 3.0.0 to make it simpler to use. Also, you can choose more than one list at the same time and decide how they’re used in the action.

We created a map to help you understand how the data flows feature works.

As always, if you have any further questions or need additional assistance, please don’t hesitate to reach out.