FLOPPY: Plugin for localStorage, sessionStorage, IndexedDB storage, List Creation/Manipulation, Iteration, and More! Now with even more video docs!

[ladd0393]

As an aside, I played around with the SortableJS library for most of the afternoon in Bubble and ran into a similar issue when I tried to save to the value to the database.

In the sortable instance, I added an onEnd function which sorted the list of things based on the drag/drop action, published the state of the sorted list, and triggered an event. Back in my workflows, when the event was triggered, I’d make changes to a thing and set the list to my plugin’s exposed state “Sorted List”.

When a user drag and dropped a group, SortableJS would update the DOM (and thus the repeating group). However, when the event was triggered and the thing updated in my database, the repeating group would update again, as it’s data source was the thing I updated in the database. So the database reflected the correct order every time - but the repeating group would update twice and show a different (incorrect) order than the database. Not sure if it’s a related issue or not.

[keith]

So @ladd0393 if Floppy seems to drag and drop your items properly (the new responsive engine is a bitch to support), then you’re probably just not quite grokking my API for how this works. Rather than reading your message without context, perhaps you can invite me to your editor and I can tell you what’s going wrong.

I appreciate detailed issue reports but in Bubble it’s easiest just to give access to the editor so I can really see what’s going on. PM me any deets.

[DanielShakibaie]

Hey @keith amazing work with this plugin! Might be a dumb question, but I’ll ask anyways. Will localstorage functionality still work the same wrapped into a native app with someone like BDK??

Appreciate the help!

[JohnMark]

@DanielShakibaie It works with any wrapped browsers.

[DanielShakibaie]

Thanks John

[keith]

New kind-sorta-Floppy video: Not specifically about Floppy, but in this “live Bubbling” video I use a few Floppy elements for their RAM Scalar and RAM List states. The topic is finding users with shared “favorites”.

People that like to spend romantic evenings with their special someone watching me do stuff in Bubble (I’m looking at you @mikeloc) might enjoy it:

Finding Similarities Between Users

Since @zacharynelson0 reached out to me in a PM asking how I would do this and I thought this was mildly interesting, and it’s been a while since I did any live Bubbling videos, I talk about how to do this (both exactly what Zachary wants to do and also a correct [but not very scalable] suggestion to check the length of the intersection between all Users’ favorites lists): The demo page for this can be found here (editor link in page) https://list-shifter-dev-test.bubbleapps.io/vers…

[keith]

UPDATE TIME (/): I just pushed Floppy version 1.9.18 which fixes several bugs in the sortable drag/drop repeating group “advanced” feature in the Floppy element. Initially released as “experimental”, I believe the latest version is much less experimental than before.

(Shoutout to Floppy user @ladd0393, who built a very helpful demonstration app that really helped in debugging these issues!)

Specific fixes:

• Changes to the way that RG elements in the new responsive engine are identified. This fixes a bug whereby this feature used in a reusable element (and other instances) would cause the RG to be drag/drop sortable once, but not sortable again after Floppy’s RAM List was changed.
• Fixes a bug where the initial state of the RG elements was not properly initialized. This could have affected both old and new responsive scenarios.

Anyway, if you played with the Sortable Drag/Drop feature in the past and it didn’t work for you, give it a go in the latest version. As always, let me know any issues you find here in the Floppy thread!

(Dragon drop… get it?)

[TekaTeki]

Question about using Floppy stepping to change thing values based on the next floppy item.
Does anyone know how I can refer to a value for the previous or next floppy item? I realise I am doing it totally wrong:

What I am trying to do is to add the unique ID of a the next item in a floppy list to the stepped item so I can create a dependency. The floppy already takes a list of tasks and reverses the order. Any help is appreciated.

[keith]

When in Step Mode, Floppy publishes the entire list being stepped to:

Floppy's Step Entire List

This is so you can reference any item in the list being stepped (such as the first or previous or next item, etc.).

An of course the current item and its one-based and zero based indices are published as well, as:

• Floppy's Step Item
• Floppy's Step Index (1-based) - this is the step item’s Bubble style position in the list (starting from 1)
• Floppy's Step Index (0-based) - this is the step item’s JavaScript-stye position in the list (starting from 0)

Now if you are on any given step, the item that is the “previous item” is one less than the 1-based Step Index so:

Floppy's Step Entire List :item # (Floppy's Step Index (0-based))

IMPORTANT NOTE: On the first step, this resolves to 0 and there is no item there, of course.

If you are on any given step, the item that is the “next item” is one more than the 1-based Step Index, so:

Floppy's Step Entire List :item # (Floppy's Step Index (1-based) +1)

Same caveat again: If we are on the last item in the list, there will be no item at the one-based Step Index + 1.

And yes, I have no idea why you are referencing a “Dependee” as a unique ID. That field should just be the same type as whatever list you are stepping.

[TekaTeki]

Thanks @keith - your plugins are awesome, matched only by your support!

[keith]

Hope it helps, @TekaTeki!

[TekaTeki]

Yup- works perfectly… now I can automatically make dependencies for all tasks in the gantt chart

[luc.simp]

Hey! not sure if I’m spinning my wheels or missing something here. I’m trying to use floppy to optimize a single page app with a tooonnnn of redundant searches across reusable elements. I have a floating group beneath the main “app” page that has several floppies and expression watchers to update keys if a user’s permissions/ preferences change. within reusable elements I’m trying to read those keys dynamically when they’re updated, and have elements reference the floppyreader. I have “retrieve keys when updated” set to yes , but it doesn’t seem to update the “list key values” state.

Unless I put a reader in a reusable element with a “do every 5 seconds” trigger to read the keys (which seems absurd), I’m not sure if this is expected behaviour or I’m doing something wrong.

Thanks!

[keith]

Share an editor with me @luc.simp with instructions on how to replicate the issue in runtime and I’ll take a look.

HOWEVER PLEASE NOTE: If you have multiple floppy/floppy reader elements in the page that might attempt to write the same key, YOU ARE IN FACT DOING IT WRONG.

The browser storage interface(s) do not support notification when some random key is updated. (Except in the very special case of localStorage being updated in SOME OTHER window,)

So, if you want to avoid confusing yourself, and you want to KNOW when some browser storage key has been updated, only manage that particular key with a single floppy.

[luc.simp]

Hey Keith, thanks for the response. You were right, it was multiple floppies causing the issue. I switched up to passing the keys as text from one floppy to states on reusable elements, and rehydrating them inside the element.

my page load is cut by almost 70% and the content download is next to nothing. this is amazing and the single best plugin I’ve come across in terms of working with some of bubble’s more frustrating limitations. Amazing job on it, and thank you for all your contributions.

[davidthorpie]

Hey @keith ,
I just recently started testing Floppy, and it’s a great plugin! I’ve been using List Shifter for a while now, but the caching capabilities are what I’m really keen to explore, and is why I started using Floppy. However, I still have a use case that (I believe at least), requires ListShifter - the SORT action.

Perhaps I’m going about this all wrong, but in essence I have the following (I can’t describe the exact things, as its for a client - so I’ll use abstracts):

1. Buildings - each of which has a list of specific features. There could be thousands of these, each with several features, which could change at any time.
2. Preferences - each user has ~50 of these, some of which may change at any point. These preferences are numeric “weights” assigned to each feature.

Each building can change features at any time, and the preferences by the user can change at any time - so the goal is to rank the buildings based on a calculated score (which I currently use Floppy STEP to achieve, as I need to iterate through each building, then SUM the score for each feature against the user’s Preferences). This ranking obviously needs a mapped sort, which I have, to date, been achieving with the SORT function in ListShifter.

In the OLD version, which I am trying to get away from, it’s using the RG Extractor and a hidden RG to essentially create a list that contains the scores for each user. This was created by a previous developer - and I personally hate using an RG as a means of data retrieval. As you have said in many videos - RG’s are for displaying data (which I wholeheartedly agree!).

However, to allow this to scale, I cannot store the resulting calculations in the DB, as testing this results in a very poor user experience due to the latency involved, and is unlikely to scale without heavy resource uplifts - so by using ListShifter & Floppy, I hope to offload the bulk of the calculation and caching functions to the client browser/device.

My main problem has been bubble’s handling of numeric lists - and more specifically, how it handles duplicates and zeros. Sometimes, the calculation may result in a zero, and there is sometimes more than one zero. Using a numeric list doesn’t work, since bubble flattens this. Creating a list of only zeroes results in a list with 1 item, a zero. Creating a numeric list using Floppy containing zeroes, results in an empty list. However, I need the zeroes to remain in the list, at the correct position, to allow ListShifter to properly perform a mapped sort, without getting the wrong score mapped to each thing.

Do you know of a decent way using Floppy & ListShifter to achieve this outcome of a mapped sort with caching capabilities, given the limitations of bubble lists? I know using a text list works but I don’t like the numeric->text->numeric conversion approach due to the overheads…

I’ll keep hacking away, but any suggestions are welcome - as I think it’s probably a pretty unique use case, and one which perhaps requires both these plugins to achieve.

[keith]

Yeah there’s no generic sort action in the Floppy element though note that the count/sort fields action covers most use cases for what people use list shifter’s sort action for.

Been thinking about a generic Sort plugin, but I’m done with building element plugins for things that should really just be client side actions.

It’s on Bubble now.

[konrad1]

This looks really cool. right now I am just looking for a list iterator, so was going to use the ListShifter plugin. However, wondering if FLOPPY basically supersedes ListShifter, or are they to be used in conjunction?
I can see myself using more features in the future so just wondering whether I should go with FLOPPY straight away.

[keith]

Hey @konrad1, the Iterate feature in List Shifter executes a single workflow iteratively. This is often what we want to do, but there are cases where this might fail or won’t give enough flexibility. The similar feature in Floppy is called “Step Mode” and, rather than automatically executing some single workflow over a list, gives you a “Next Step” (and also a “Previous Step” action) that let you advance to the next iteration item by executing that action. (Like List Shifter, you don’t need to worry about whether you’re on the last item or not, Floppy just stops sending Step Triggers when you’ve stepped the entire list).

While this isn’t as technically sexy as the way its done in List Shifter, it’s actually more flexible as, for example, you could have branching workflows, conditional workflows, etc. if you needed them. It’s also a little more friendly in that it spits out the full list you’re iterating over to its own output, and exposes both the 1-based and 0-based index of the current iteration index, as well as the current iteration item. (So, in this way, it’s exactly like the various array methods in JavaScript.

I walk through this feature and talk a bit about its differences from List Shifter in the following video (which also covers other iteration methods provided by Floppy - the “List Math” and “Code: Array Method” actions):

There’s a lot of other stuff in the Floppy plugin collection, including some utility elements, SSAs, and some experimental stuff that I haven’t really documented. I’ll be regularly adding new stuff to the collection over time, so it’s a great value and at some point the price will likely go up (though this has not happened yet).

[keith]

UPDATE ALERT TIME MORE DRAGGIN’, MORE DROPPIN’

Just pushed Floppy version 1.9.20, which focuses on improving the drag/drop (“sortable”) features of the Floppy element. While you used to be able to make Repeating Groups fed by a Floppy’s RAM List drag/drop sortable, NOW you can create “Drag Groups” which let you drag and drop items FROM one Floppy-fed RG TO another Floppy-fed RG, as long as they share the same “Drag Group” name. And, of course, the associated Floppy RAM Lists update to match.

There are a lot of cool, related options here like making the items in an RG “clonable” (items can be dragged/dropped to other groups, but the original items remain), some “placeholder” options to make a virtual placeholder item appear in the RG (either whenever the RAM List feeding the RG is empty, always show a placeholder at first position, always show a placeholder at last position), and probably a lot more that I’m forgetting at the moment.

WHOA, lookit all 'dem new options!

Yes, this is a somewhat complex feature and – if you’re a normal human – it’ll require some video documentation to get your head around. But it’s super cool!

In the meantime, you can play around with and inspect an “old responsive” example here:

Floppy Demo 3 - List Creation

And a “new responsive” example here:

Floppy Demo 3 - List Creation

Along the way, I fixed some bugs and improved support for the drag/drop feature in general in both the “old” and “new responsive” engines, and did more than a bit of code refactoring to help keep Floppy slim, trim, and performant.

This is a pretty big update and, if you find any weirdness or issues in the console, do let me know!

More to come soon, but now it’s time for me and Chia Pet Frank Sinatra to get some shut-eye.