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

[NoCodeDataArtisan]

We’re thrilled to unveil a revolutionary solution set to turn your struggles with managing lists in Bubble into a thing of the past.

Meet Listopia!

If you’ve been on the Bubble journey for a while, you know the struggle with lists. Whether it’s due to the lack of certain features, inefficiencies, or the costs associated with Bubble’s new pricing model, managing lists in Bubble can sometimes be a bit daunting.

Introducing Listopia: Simplify and Supercharge Your Bubble Projects with No-Code Lists

Listopia was born out of the need to simplify list operations, speed up your development process, and most importantly, reduce costs by using user resources for processing that is not included in WU.

We believe that the power of no-code should be limitless, and with Listopia, we’re making that belief a reality!

Listopia is a suite of components - each designed for a specific data type:
Keeper (any data type), Numeri (numbers), and Chronos (dates).

Tutorial: Listopia 101

Mastering Lists in Bubble with Listopia: A Comprehensive Guide (Listopia 101)

---

What’s Inside the Box?

Keeper:

Your list’s guardian. Be it a basic type, an option set, or a custom type, Keeper is built to efficiently manage and manipulate data within your lists.
Learn more about Keeper’s Actions

Numeri:

Your data analysis powerhouse. With Numeri, you can delve into numbers and number ranges like never before, extracting valuable insights from your data.
Learn more about Numeri’s Actions

Chronos:

Your date whisperer. Simplifying date-time related tasks has never been easier! With Chronos, manipulate dates, play with date ranges, and convert texts to date-time. Time is truly in your hands!
Learn more about Chronos’ Actions

Features to Fall in Love With:

1. Predefined, Custom, and Nested Lists: Effortless storage, easy retrieval.
2. Custom Action Naming: Tailor your workflows the way you like.
3. Enhanced Data Flow Control: Say goodbye to complex expressions.

---

Why Experience Listopia?

Listopia is more than just a plugin; it’s a cost-effective, efficient, and powerful tool built to address the limitations of no-code development. By equipping you with sophisticated list manipulation actions, flexible data storage, and intuitive control over data flow, Listopia empowers you to focus on what truly matters - creating amazing user experiences and transforming ideas into reality.

---

Explore Listopia:

Check out my Bubble app

Ready to redefine how you manage lists?

Experience Listopia today and take your Bubble apps to new heights!

Templates for Bubble

TL; DR

Say goodbye to the challenges of handling lists in Bubble! Listopia is here to revolutionize your no-code journey. With three powerful components - Keeper, Numeri, and Chronos - Listopia simplifies list operations, accelerates development, and reduces costs. It offers unlimited storage, sophisticated actions, and enhanced data flow control. Watch our introduction video here and embark on a journey to effortless list management with Listopia!

As always, we would love to hear your questions, suggestions, or thoughts about Listopia. Your feedback helps us grow and evolve!

[nocodejordan]

Do you have a tutorial video somewhere? That would be more helpful than your current introduction video. Having a few use cases for your tutorial video will be more helpful. Thanks!

[NoCodeDataArtisan]

Listopia’s Keeper:

Your Ultimate Solution for Efficient List Management. Keeper has come to rescue you.

Each Keeper is tailored to a distinct data type, be it a basic type, an option set, or a custom data.

Here’s a detailed overview of the main Actions of Keeper:

• List A: [ item1, item2, item8, item4, item5]
• List B: [ item3, item6, item7, item1, item2]

1. List-List Operations: Compare two lists based on the operation of your choice.

• Difference: Detects items present in the first list, but not in the second.
  E.g., Difference of List A and List B yields [item8, item4, item5].

• Union: Combines unique items from both lists.
  E.g., Union of List A and List B yields [item1, item2, item8, item4, item5, item3, item6, item7].

• Intersection: Identifies common items in both lists.
  E.g., Intersection of List A and List B yields [item1, item2].

• Superset: Checks if the first list encompasses the second.
  E.g., Checking Superset for List A against List B yields False.

• Subset: Verifies if the first list is entirely contained within the second.
  E.g., Checking Subset for List A against List B yields False.

• Disjoint: Examines if two lists have no common items.
  E.g., Checking Disjoint for List A and List B yields False.

Action in app editor

---

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

• Add
  Example: Inserting item7 into List A at index 3 results in [item1, item2, item7, item8, item4, item5].
• Remove
  Example: Removing item1 from List A yields [item2, item8, item4, item5].

Action in app editor

---

3. Replace/Swap Items: Seamlessly replace or reorder items within a list.

• Replace
  Example: Replacing item1 in List A with item9 results in [item9, item2, item8, item4, item5].

• Swap
  Example: Swapping item3 and item7 in List B results in [item7, item6, item3, item1, item2].

Action in app editor

---

4. Sub List: Manipulate and retrieve specific parts of a list, with the option to shuffle and reverse.

• Shuffle
  Example: Shuffling List A might result in [item4, item2, item1, item5, item8].

• Reverse
  Example: Reversing List A yields [item5, item4, item8, item2, item1].

• Custom index: Specify indexes,
  e.g., retrieving indexes [2, 4] from List B yields [item6, item1].

Action in app editor

---

5. Index Finder: Find the index(es) of item(s) within a list.

• Single
  Example: Searching for the index of item2 in List A outputs 2.

• Multiple
  Example: Searching for indexes of item3 and item7 in List B outputs [1, 3].

Action in app editor

---

6. Build Nested List: Transform one or more lists into nested lists with different methods.

• Chop: Divide a list into desired intervals,
  e.g., if List A is divided into 2-item intervals, the result is [[item1, item2], [item8, item4], [item5]].

• Pair: Create pairs from adjacent items,
  e.g., pairing List A yields [[item1, item2], [item2, item8], [item8, item4], [item4, item5]].

• Zip: Merge two lists item by item,
  e.g., zipping List A and List B yields [[item1, item3], [item2, item6], [item8, item7], [item4, item1], [item5, item2]].

• Cross: Generate all possible pairs between two lists,
  e.g., crossing List A and List B yields a list starting with [[item1, item3], [item1, item6], [item1, item7], [item1, item1], [item1, item2] …].

Action in app editor

Armed with Keeper by Listopia, efficient list management and data manipulation are at your fingertips. Unleash your data’s potential today!

[chris.williamson1996]

Love to see another plug-in! You’re always putting out quality stuff

[NoCodeDataArtisan]

Dear @nocodejordan

We regret any inconvenience caused due to the lack of such detailed guidance at the moment. I want to assure you that we are actively working on creating a comprehensive tutorial video, as we recognize the need for this tool.

Please stay tuned! We promise that this resource will be available soon, and we hope it will provide the assistance you need to make the most out of Listopia.

Thank you once again for your patience and understanding.

[NoCodeDataArtisan]

@chris.williamson1996
Thank you so much for your kind words and continued support!

I’m thrilled to hear that you’re enjoying the content and finding value in the our plugins. Your positive feedback really motivates us to keep striving for excellence. 🥹

Looking forward to sharing even more with you in the future.

[NoCodeDataArtisan]

Listopia’s Numeri:

Your Ultimate Toolkit for Advanced Numerical Analysis.

Numeri empowers developers and users alike to glean meaningful insights from data. Let’s delve into the extraordinary capabilities that Numeri brings to your fingertips.

1. Build Range: Construct diverse numerical ranges effortlessly.

• Starts - Ends: Specify a list of numbers as starts and another list as ends points to build a list of ranges.
  E.g., For starts = [1, 5, 20, 4, 30] and end = [10, 3, 15, 1, 9], the result is [[1,10], [3,5], [1,4], [9,30]].

• Number List - Interval: Generate ranges based on a list of numbers and a specified interval.
  E.g., With list = [1, 5, 20] and interval = 2, the output is [[1, 3], [5, 7], [20, 22]].

• Number List - Number Point: Create ranges using provided numbers as endpoints.
  E.g., With list = [1, 5, 20] and point = 30, the output is [[1, 30], [5, 30], [20, 30]].

Action in app editor

---

2. General Statistics: Perform comprehensive statistical analysis on your data.

• Example: With input [1, 5, 20, 4, 30] results include:
  Minimum Index = 1
  Maximum Index = 5
  Median = 5
  Variance = 146.5
  Standard Deviation = 12.1
  Rank = [1, 3, 4, 2, 5]

Action in app editor

---

3. Modify Number Range List: Manipulate number range lists with precision.

• Simplify: Merge overlapping or adjacent ranges.
  E.g., Simplifying [[2, 3], [5, 10], [8, 12], [15, 20]] results in [[2, 3], [5, 12], [15, 20]].

• Get Overlaps: Identify overlapping ranges.
  E.g., Overlaps in [[2, 3], [5, 10], [8, 12], [15, 20]] are [[8, 10]].

• Invert: Generate ranges representing the gaps between the existing ranges.
  E.g., Inverting [[2, 3], [5, 10], [8, 12], [15, 20]] gives [[4, 4], [13, 14]].

Action in app editor

---

4. N and (N - 1) Operations: Perform operations between each number and its predecessor in a list.

• Example: With list [1, 5, 20, 4, 30],
  Differences = [4, 15, -16, 26]
  Growth Rates = [400%, 300%, -80%, 750%]
  Sums = [6, 25, 24, 34]
  Averages = [3, 12.5, 12, 17].

Action in app editor

---

5. Cumulative Calculations: Compute cumulative values for a list of numbers.

• Example: With list [1, 5, 20, 4, 30],
  Cumulative Sums = [1, 6, 26, 30, 60]
  Cumulative Averages = [1, 3, 8.67, 7.5, 12]
  Cumulative Products = [1, 5, 100, 400, 12000].

Action in app editor

---

6. List ⨝ List: Conduct advanced operations between two lists.

• Zip: Merge two lists element by element.
  E.g., Zipping [1, 5, 20, 4, 30] and [10, 3, 15, 1, 9] yields [(1,10), (5,3), (20,15), (4,1), (30,9)].

• Cross: Generate all possible pairs between two lists.
  E.g., Crossing [1, 5, 20] and [10, 3] yields [(1,10), (1,3), (5,10), (5,3), (20,10), (20,3)].

• Calculation: Apply various operations to the resulting list, including Sum, Minus, Multiply, Divide, Max, Min, and Average.
  E.g., Sum of zipped lists [(1,10), (5,3), (20,15), (4,1), (30,9)] yields [11, 8, 35, 5, 39].

Action in app editor

---

Experience the power of Numeri, your ultimate toolkit for numerical analysis.

Say goodbye to messy data and hello to insightful interpretations!

[NoCodeDataArtisan]

Listopia’s Chronos:

Your All-In-One Date Management Tool

Welcome Chronos, designed to simplify and streamline your date management tasks. From building custom date ranges to modifying date range lists and finding the closest dates, Chronos caters to all your date-related requirements.

Let’s explore the key features and functions of this element.

1. Build Date Range: Seamlessly create date ranges tailored to your needs.

• Start - End: Generate date ranges using two lists of start and end dates.
  E.g., With start dates = [“2023-01-08”, “2023-03-15”] and end dates = [“2023-04-01”, “2023-05-05”], the output is [[“2023-01-08”, “2023-04-01”], [“2023-03-15”, “2023-05-05”]].

• Date List - Interval: Build ranges from a list of dates with a specified interval.
  E.g., With dates = [“2023-01-08”, “2023-03-15”] and interval = 30 days, the output is [[“2023-01-08”, “2023-02-07”], [“2023-03-15”, “2023-04-14”]].

• Date List - Date Point: Create ranges between each date in a list and a specific date point.
  E.g., With dates = [“2023-04-01”, “2023-05-05”] and date point = “2023-05-20”, the output is [[“2023-04-01”, “2023-05-20”], [“2023-05-05”, “2023-05-20”]].

Action in app editor

---

2. Convert to Date: Easily convert Text to Date-Time.

• Custom: Convert dates from a custom format.
  E.g., “2023-05-24” in “DD/MM/YYYY” format becomes “24/05/2023”.

• ISO: Convert dates from the ISO 8601 format.
  E.g., “2023-05-24T00:00:00Z” in ISO format is “2023-05-24”.

• JSON: Convert dates from a JSON.
  E.g., {“year”: 2023, “month”: 5, “day”: 24} in JSON format is “2023-05-24”.

Action in app editor

---

3. Modify a Date Range List: Gain granular control over date range lists.

• Simplify: Merge overlapping or adjacent date ranges.
  E.g., Simplifying [[“2023-01-11”, “2023-03-15”], [“2023-02-28”, “2023-04-28”], [“2023-05-14”, “2023-05-28”]] results in [[“2023-01-11”, “2023-04-28”], [“2023-05-14”, “2023-05-28”]].

• Get Overlaps: Extract overlapping date ranges.
  E.g., Overlaps in [[“2023-01-11”, “2023-03-15”], [“2023-02-28”, “2023-04-28”], [“2023-05-14”, “2023-05-28”]] are [[“2023-02-28”, “2023-03-15”]].

• Invert: Generate ranges representing the gaps between existing date ranges.
  E.g., Inverting [[“2023-01-11”, “2023-03-15”], [“2023-02-28”, “2023-04-28”], [“2023-05-14”, “2023-05-28”]] gives [[“2023-03-15”, “2023-02-28”], [“2023-04-28”, “2023-05-14”]].

Action in app editor

---

4. Find Close Date(s) in a List: Discover the date(s) nearest to a reference date within a date list.

• E.g., For the date “2023-05-20” and date list = [“2023-04-01”, “2023-05-05”, “2023-06-15”], the closest date is “2023-05-05”.

Action in app editor

---

Experience Chronos, the time master of Bubbl.

Enjoy precise date management like never before.

[NoCodeDataArtisan]

Step into the world of list management and efficient data storage with our latest tutorial

‘Mastering Lists in Bubble with Listopia’

This video is your gateway to understanding and optimizing the use of Listopia, a powerful plugin that can significantly enhance your Bubble applications and reduce costs under Bubble’s WU pricing model.

Mastering Lists in Bubble with Listopia: A Comprehensive Guide (Listopia 101)

[zelus_pudding]

How is this different from list shifter?

[NoCodeDataArtisan]

Hello @zelus_pudding,

I appreciate your curiosity, and it’s great to discuss the nuances between Listopia and List Shifter. While they might appear similar due to their focus on lists and similar naming, they are designed with distinct purposes and cater to different users.

List Shifter’s primary function is to handle list manipulations in Bubble, such as shifting, rotating, and reversing lists, and applying iterative functions. It can also generate and iterate over number, date, and time ranges. However, its capabilities are more developer-centric and may require a certain level of expertise in iterative processing to fully exploit.

On the other hand, Listopia is a comprehensive solution for list management, designed with a more intuitive approach to accommodate no-code users. It includes support for nested lists and emphasizes data type specificity with three separated components. Its standout feature is the ability to assign custom names to actions and control over input/output data, which enhances user control and eases list management.

Listopia’s structure and organization of actions and their methods contribute to its user-friendly approach. Actions related to specific data types are grouped under its three components - Keeper, Numeri, and Chronos - creating a well-structured interface that is easy to navigate. Each component has its dedicated functionalities. For example, Keeper allows operations like comparing lists, adding/removing items, managing sub-lists, etc. Numeri focuses on numeric data management, while Chronos simplifies date management. Also, Listopia claims to improve speed and reduce costs. (The level of efficiency and performance would need to be verified based on actual use.)

To sum up, both Listopia and List Shifter have their strengths, much like iOS and Android in the tech world. Listopia, akin to iOS, offers a user-friendly interface, organized actions, and a streamlined user experience. Its focus is on making list management straightforward and less intimidating for users, reducing the need for extensive learning.

Conversely, List Shifter is more like Android, providing a flexible structure where users can build actions through iterations. While it offers a lot of flexibility, fully unlocking its potential requires a deeper understanding and willingness to learn its intricacies.

Choosing between Listopia and List Shifter is similar to picking between iOS and Android. If you prefer a well-structured, user-friendly interface, Listopia is your best bet. If you’re inclined towards flexibility and are ready to invest time in learning, List Shifter could be your choice. It ultimately boils down to your specific requirements, level of comfort with complexity, and personal preference.

---

If you are interested, we can provide it to you for free so that you can do the evaluation yourself according to your needs. You can even share your opinion with us afterwards to help us improve Listopia and help other users to make better decisions.

[ken1]

I’ve just purchased Listopia and am trying to implement it. I’m certain that Keeper will be able to do what I need, but without documentation or examples, I have no idea how to use it.

What I need to do:

1. I have a list of items in a RG.
2. I have another list in a RG which is a filtered version of the first list.
3. I am sorting the filtered list using DragIt (amazing plugin!).
4. I need to find the item in the sorted filtered list that is below where the dragged item was dropped.
5. I need to next find that item in the full list (the item below where the dragged item was dropped).
6. Then I will remove the dragged item from the full list.
7. And finally reinsert the dragged item into the full list above the item that was below it in the filtered list.

I hope that was clear. Any ideas how to use Listopia for this?

Thanks!

[NoCodeDataArtisan]

Hey there!

Hey, Ken, that was a brilliant move! Well done!

Indeed, as you mentioned, Keeper can be a great help throughout this process.

Did you get a chance to watch the training video?

@NoCodeDataArtisan

Tutorial: Listopia 101

If you encounter any issues with the video, please make sure to let us know, so we can avoid repeating them in the upcoming videos. We’ve made an effort this time to reduce the video’s speed.

---

Let me provide some further explanation about the list of features that will prove useful for each step:

1 and 2. To eliminate the need for constant server exchanges and separate storage of the filtered list, place the main list in List One and the filtered list in List Two.

3 . We are truly honored that you share this perspective. It would be even better if you could utilize a separate drag-and-drop function for the filtered list.

4 and 5. Utilize the Index Finder action to locate the index of an item. The resulting index will be accessible through the element state. With this action, you can obtain the index of one or multiple items.

6 and 7. No need to delete and then add again. Within Keeper actions, we have a replace/swap feature that combines both steps.

These are the actions you’ll need at each stage. I’ll also explore alternative methods to tackle this challenge.

[ken1]

I didn’t see the tutorial video, but I’ll watch it now. (I missed that it was just posted today! I was skimming when I got to the bottom of the thread…) Thank you.

As you know, I have one DragIt and one RG in my reusable element. The only way to add more DragIts will be to add repeating groups. This means that for the majority of my reusable elements, I’ll have many extra RGs. I’m not sure that makes sense. I have at least 8 different filters that can be used in different combinations, so I’m not sure I can really do that anyhow.

If the DragIt will capture the correct index on the filtered list, then I should be able to sort it out before saving the full list back to the DB. I hope that will keep everything aligned. I wish I knew in advance I’d have so many issues with this approach. It seems like such a basic function I can’t believe still that Bubble doesn’t just handle it natively, TBH.

[ken1]

I’m having trouble getting just a simple thing to work. On the Keeper, I set a List one and List two. In my workflow (Index Finder), both list appear as empty. I’m not sure I understand how to get the list in the workflow.

---

After some experimenting, I discovered that I can get my predefined lists to populate if I either Do a search OR I select a basic list already existing.

What is not working is if I try to use a filtered list or an existing RG with a filtered list.

Works:

1. Do a search for ActionBlocks (add constraints is okay)
2. Current User’s Sorted Lists’s Actions (from the DB, but accessed through the current user)

Does Not Work:

1. Current User’s SortedLists’s Actions:filtered
2. RG’s list of ActionBlocks (when the list is Current User’s SortedLists’s Actions:filtered)

Since I am passing a list of the correct type, I don’t understand why it’s not getting recognized by Keeper. Instead I am getting empty lists which means I can’t use it. I do NOT want to do searches when I already have the lists constructed.

[ken1]

@NoCodeDataArtisan

4 and 5. Utilize the Index Finder action to locate the index of an item. The resulting index will be accessible through the element state. With this action, you can obtain the index of one or multiple items.

How can I access the found Index number from the next step in a workflow? This is where I’ll need it.

@NoCodeDataArtisan

6 and 7. No need to delete and then add again. Within Keeper actions, we have a replace/swap feature that combines both steps.

After re-reading this, I’d like to clarify. I don’t need to swap. Here is an example:

List 1 (original full list):

1. apples
2. oranges
3. grapes
4. peaches
5. bananas

List 2 (Filtered List)

1. oranges
2. grapes
3. bananas

List 2 (Filtered List after Sort)

1. bananas
2. oranges
3. grapes

List 1 (after Sort)

1. apples
2. bananas
3. oranges
4. grapes
5. peaches

Notice how bananas moves relative to the filtered, but must find it’s place in the unfiltered list. So it’s not a swap. I remove it from it’s original index and add bananas into it’s new index.

I hope that makes sense.

[NoCodeDataArtisan]

Hello @ken1

I think the video tutorial could not convey the concepts well. Please watch it again more carefully if you can. I would be grateful if you could tell us the parts that you think are not well explained so that we can correct them.

@ken1

I’m having trouble getting just a simple thing to work. On the Keeper, I set a List one and List two. In my workflow (Index Finder), both list appear as empty

It’s because you disabled field fetch on page load.

@ken1

After some experimenting, I discovered that I can get my predefined lists to populate if I either Do a search OR I select a basic list already existing.

Yes, we tried to make it easier for you to control the flow of data.
In the example you sent, if you want to use the new list field, set the input channel to “new”.

[NoCodeDataArtisan]

@ken1

How can I access the found Index number from the next step in a workflow? This is where I’ll need it.

The outcomes will always be placed in specific states labeled “Results.” Depending on their type, we have multiple result states available. For instance, in your case, you should utilize the number result state.

Rest assured, I will provide an explanation of the elements in each state.

[NoCodeDataArtisan]

@ken1

I don’t need to swap.

It seems that you may have underestimated Listopia.

I understand that managing your lists has been challenging, but from now on, you won’t have to struggle with complex and difficult methods.

With Listopia, let's keep things simple and let the hard work be done by Listopia.

You can effortlessly achieve your desired outcome by using the swap method.
Simply input list one (main) as the source, list two (filter list) as the target items, and list two (sorted) in the alternative items field.
Voila! You’ll get the result you desire.

[ken1]

Unfortunately, this is still not enough. First, thank you for explaining this because it wasn’t obvious to me how to use this feature.

The issue is that the source for my repeating group is a DragIt’s Updated list:filtered. In my example, List 2 (sorted) is not something I actually have access to.

1. I can’t use the DragIt’s updated list because that refers to the unfiltered list.
2. I can’t use the RG’s list of ActionBlocks because it gives me only the source list before the sort.

So I need to construct the filtered list after the sort by finding the new index of the dragged item (this does return the correct value) and getting the index of the row below it. (I’m having trouble accessing this though - I can’t find a combination of things that returns which ActionBlock is below the dropped item after the drop.

I hope I’m explaining the issue well enough. An example of the swap on filtered list, but reflected on the unfiltered list would go a long way!

I’ll provide comments soon about the tutorial video. My first comment however is to have for every input 1) a definition of what it is, 2) an example for a value that would go there and 3) examples lists before and after to show the effect.

Thanks!