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

[florian.adomeit]

Hi,

I bought the Listopia plugin, but I have a problem with Keeper Data Updated Trigger.

My problem
I use Algolia to make my Bubble.io database searchable. If the user enters a search term, the Algolia plugin from Zeroqode returns a list of unique IDs of the items (episodes) that match the search term. I want to display these items (episodes) in a repeating group. To do this, I perform a “Do a search” in Bubble with the constraint that the unique ID is in the list of IDs of the Algolia plugin. The result of this search is a list of episodes, but their order differs from the order of the unique IDs in the Algolia plugin.

My suboptimal solution
I use Listopia to re-sort the result of the “Do a Search” bubble based on the unique IDs in Algolia. Specifically, the solution looks like this:

Step 1
I use a Keeper Element with the Data Type set to “Text” and List One = “Search for Episodes:each item’s unique id” where the constraint is that the unique id is in the result of the Algolia plugin (see screenshot A). This keeper element therefore contains the unique IDs of the episodes in the “wrong” order.

Step 2
I use the Index Finder workflow and search for the list of unique IDs from the Algolia plugin in the keeper element from step 1 (see screenshot B).

Step 3
I use a second keeper element of the type “Episodes” whose datasource is a “Do a search” with the constraint that the unique ID is in the list of unique IDs from the Algolia plugin. This keeper element therefore contains the episodes (not only unique IDs) in the “wrong” order (see screenshot C).

Step 4
To get the list of episodes from step 3 into the “correct” order (order of the unique IDs from the Algolia plugin), I use the sub list workflow with the result from step 2 (see screenshot D). Subsequently, the result state of the keeper element from step 3 contains the episodes in the correct order.

In principle, this procedure works very well. However, I am currently still using button clicks for step 2 and step 4 to trigger the workflows.

In the future, the sorting of the list should of course happen automatically when the user enters a new search term and the list of Unique IDs in the Algolia plugin changes and thus also List One of the Keeper element from step 1.

I actually wanted to use the Keeper A Data Updated event for this. The problem, however, is that this event is triggered multiple times during a single update operation.

Even if I insert the condition “Action Name is Source Updated”, this workflow is triggered 8 times and if I subsequently enter search terms, the event is triggered 2 times (to check this, I have inserted a number state that is increased by 1 each time the event is triggered → see screenshot E).

Is this a bug? What am I doing wrong or how do I make sure that I really only isolate the source update? Is there maybe another way (maybe smarter way) to organize my desired result (order an item list based on a list of unique IDs)?

PS: I have already considered triggering all actions by clicking on the search button. However, it takes a moment for the Algolia search to run through and I want to avoid triggering the sorting before the search is actually finished (custom events are not an option here, as the search is triggered in the visual element and not via workflow).

I would be very grateful for any information. Best regards from Hamburg!

[NoCodeDataArtisan]

Hello @florian.adomeit
I hope you’re doing well.

Thank you for utilizing our plugin and providing a detailed explanation of your use case.

The reason for the data being updated multiple times is due to the way Bubble handles the plugin data, triggering updates several times.

---

I have a question, the Algolia plugin doesn’t have an event for when the search has been completed?

---

A potential solution might be to input the data into the Keeper element through actions, allowing you to assign a name for each action and create a sequence of workflows by these names. With this approach, the event would only be triggered once. Is this a method you have already tried?

Best

[florian.adomeit]

Hi @NoCodeDataArtisan ,

thanks for the quick response.

Unfortunately, Algolia does not have an event for a completed search. There is an “Algolia is loading” event, but it triggers before the search is really complete.

I have already tried to load the data into the keeper element through actions. The problem is that I am missing the right trigger/event in bubble-native. I have tried the following options:

Option 1
Load data when clicking on the “Search” button. However, this does not work because the data is loaded into the keeper element before Algolia is completed.

Option 2
I format the unique ids provided by the Algolia plugin as a string and save this text in a custom state. Then I use a “Do when condition is true” trigger, which is activated every time the unique ids of the Algolia plugin formatted as a string differ from the custom state (Bubble unfortunately has no native way of comparing two lists). In this event, I then load the data and update the custom state. This should theoretically work, but it returns an error message (see screenshot A).

However, I have found a workaround that works (see screenshot B):

I load my “Do a search” for episodes with the constraint that the unique ids are in the unique ids of the algolia search into a List Shifter Element as an original list. List Shifter has a “A ListShifterPro Initialized/Updated” event, which is only activated once if you enter the condition that the list must not be empty. In the workflow, I then load the List Shifter list into the Keeper element and trigger all other workflows.

This works smoothly, but seems unnecessarily complicated to me, as I now have to use two very similar plugins. It would be great if I could map all this with Listopia and there was some way to isolate the “update” triggers.

But maybe I’m just too stupid and you can think of a better solution

P.S. Of course, the ideal solution would be to have the option of sorting a list directly in Listopia using another (non-numerical) list (list 1 has episodes, list 2 has ids of the epsiodes in a different order → Listopia-Action to sort list 1 using list 2).

[NoCodeDataArtisan]

Hi @florian.adomeit,

Your assistance in enhancing the plugin is greatly appreciated.

@florian.adomeit

This works smoothly, but seems unnecessarily complicated to me, as I now have to use two very similar plugins. It would be great if I could map all this with Listopia and there was some way to isolate the “update” triggers.

I’ll try to create a distinct event dedicated to the initial list loading, ensuring it’s triggered only for the main lists when the page loads.

@florian.adomeit

P.S. Of course, the ideal solution would be to have the option of sorting a list directly in Listopia using another (non-numerical) list (list 1 has episodes, list 2 has ids of the epsiodes in a different order → Listopia-Action to sort list 1 using list 2).

I believe this action could be incorporated into the keeper. Essentially, the goal is to sort a list of items by their respective IDs, correct?

[florian.adomeit]

Hi @NoCodeDataArtisan ,

@NoCodeDataArtisan

I’ll try to create a distinct event dedicated to the initial list loading, ensuring it’s triggered only for the main lists when the page loads.

That would be really great. Thanks a million!

@NoCodeDataArtisan

Essentially, the goal is to sort a list of items by their respective IDs, correct?

Yes, exactly. But just to be on the safe side, here is the use case I have in mind.

I have a list of items that have the following unique IDs:

1638021336472x973485621350
1638021336483x573912745128
1638021336495x134568732912
1638021336506x987654321098

I would like to have this list sorted as follows:

1638021336483x573912745128
1638021336506x987654321098
1638021336495x134568732912
1638021336472x973485621350

This means I want to be able to sort the items in a list as I wish by simply entering a list of unique IDs in the correct order. If this works directly from the keeper without having to build complicated logic, that would be awesome!

[ken1]

Hello. I am nearly ready to release my first version of my app and I am using Listopia Keeper’s extensively. I don’t know how I would have completed this without Listopia!

But I’m stuck on how to do something now.

I have a Keeper Actions with a custom list actions2delete. I have no problems using this custom list within the Keeper’s event, but how do I designate the custom list when I want to use it to change my database:

In my example, sortedList is the field to change. I want to remove the items in the custom list actions2delete from that field in the database.

How do I indicate which custom list to use in this database operation? There is no guarantee about its index number as there might be one or more other custom lists.

Thanks!

[NoCodeDataArtisan]

Hello @ken1,

Thank you for your kind words; your assistance has significantly contributed to the improvement of this plugin.

Regarding your challenge, I suggest saving the custom list in one of the primary lists (One to Four) and then utilizing it in the action. Custom lists are internal and cannot be accessed by other elements.

[ken1]

Ah right, now I remember you explaining this some time ago. I forgot that I can’t access these lists outside of the Keeper. I created an extra Keeper to temporarily hold that list. I’m already using all four of the predefined lists, so that’s not an option…

[NoCodeDataArtisan]

There is an option allowing you to access a custom list; have you attempted that?

Please enter the name of the custom list here:

Then get the list through this state:

[ken1]

I saw this option but didn’t understand what it was. I think it’s exactly what I was looking for. I’ll give it a try. Thank you!

[NoCodeDataArtisan]

Don’t worry, mate. I hope this can solve the challenge. Please inform me about the outcome.

Best.

[ken1]

After nearly a year and a half building my app, I’m finally ready to release it in a couple of weeks! I’ve relied heavily on Listopia (Keeper) and DragIt to make it happen. So grateful for these plugins.

I have one lingering issue that I can’t figure out with the Keeper. It used to work, but after a lot of changes in my app it no longer works correctly and I need a little help to configure the Keeper.

Here is my setup:

Elements

• Keeper ∞Actions

• Keeper ∞Temp Filter (List One contains ∞Actions’s List One — the unfiltered list)

• DragIt Actions (Repeating Group ID rg-actions; Data Source ∞Actions’s List Three)

• Repeating Group Actions (ID Attribute rg-actions)

∞Temp Filter is used to filter a list. Since I have many Keepers for different lists, I first load the correct one into ∞Temp Filter, execute the filtering, then place the results back in the proper Keeper’ List Three. That way I can use the same workflows for many Keepers.

My problem is when I sort a filtered list. After dragging a row in the RG, the Keeper and display is updated okay, but I can’t get it to save in the database. I’m certain it’s because I’ve not configured the Keeper Replace action correctly. It returns an empty result instead of the filtered Full list that needs to be saved.

Here are my relevant workflow settings:

I’ve tried MANY combination of settings, but there’s not much point in posting all of them.

The problem is that the workflow When ∞Temp Filter Result Updated and This ∞Keeper’s Action Name is ready never triggers because the result from the Replace step is empty.

The only time I was able to get it to save my list, it saved only the filtered list and I lost everything in the full list that was not included in the filter.

One thing I thought might help is if the Data Source in the Data Flows section was ∞Actions’s List One instead of ∞Temp Filtered’s List One, but 1. it should be the same list and 2. I don’t have the option to select ∞Actions’s Lists. So I don’t think that is the solution.

I’d appreciate any guidance on this! It is the last step that I do not know how to fix before I can finally launch!

Thank you.

[NoCodeDataArtisan]

Hello @ken1,

May I have access to the application’s editor?

If the event has not triggered, it indicates there might be an issue. Have you tried running the process step by step through the debugger?

[ken1]

I have run step by step. This is how I know it never triggers. And there is something wrong, most likely how I am using replace function in the keeper.

I’ll get you access to the editor by Monday. Thank you.

[ken1]

I’m trying to use Chronos to replace another date/time range plugin that is causing me trouble. I’m having difficulty figuring out how to get what I need from Chronos.
I need a two week list of dates. The start date is selected from a date/time picker.

As far as I can tell I need to use Method Start - End with interval days.

I entered my expression in the Use New List (Start) field. Is that right since it’s not a list? The expression I entered evaluates to a date, and I don’t see any options to convert it to a list. I would put the end date in the End field, of course, but I have the same problem with that right now.

So I’m not sure how to enter it. Any help will be appreciated!

Thank you.

[NoCodeDataArtisan]

Hello @ken1,

I trust you’re in good spirits.

In fact, Chronos operates differently; it doesn’t generate a list of dates but rather a range of dates.
Please refer to the demo page to understand the use case for this action.
Listopia (bubbleapps.io)

---

However, there’s no need to worry as we also offer a new plugin featuring a drag-and-drop calendar, which includes a tool for generating a list of dates. If you’re interested, I can authorize it for your app, allowing you to install it as a free plugin.
Calendaria (bubbleapps.io)

[stefano]

Hello there!

Just chiming in here to thank you for your assistance back in May. I got sidetracked and never thanked you properly @NoCodeDataArtisan . Sorry about that.

Keeper is doing a great job for me so far.

[NoCodeDataArtisan]

Hello Stefano,

You’re very welcome—I’m glad Keeper is working well for you!

If you have a moment, we’d greatly appreciate it if you could leave a review for the plugin. Your feedback means a lot!