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

[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:
https://list-shifter-dev-test.bubbleapps.io/version-test/floppy_demo_3_5?debug_mode=true

And a “new responsive” example here:
https://list-shifter-dev-test.bubbleapps.io/version-test/floppy_demo_3_6_resp?debug_mode=true

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.

[ihsanzainal84]

The legend strikes again.

Can’t wait to try the new drag drop features!

[keith]

The subject of our next lesson: Drag ‘N’ Drop Sinatras!

[keith]

BUGFIX UPDATE TIME 🪲Just pushed Floppy version 1.9.23 which fixes drag/drop sorting on mobile and in many other circumstances where Sortable.js (the drag/drop library employed in the Floppy element) fails. This entailed using my own function for re-sorting DOM elements instead of the built-in ones from Sortable, which are buggy as… fudge… So, if you’ve been wanting to play around with the latest drag/drop function, please do use the latest version.

Video on some of the new stuff to come!

(Version 1.9.23 adds an additional fix for behavior of the new “placeholder” feature which will be demonstrated in my next video.)

There’s still a little bug here with initial setup of the sortable features when “placeholder” is used. Working on that.

[keith]

Happy Friday… Cuddle up with your special someone (@mikeloc), because it’s time for some live Bubbling with @keith!

NEW VIDEO! NEW VERSION! Floppy 1.9.25 fixes some issues I was having with drag/drop initialization and behavior in both new and old response. (Yeah, it didn’t work perfectly before, but seems very stable now.)

AAAAAND… Finally, here’s a video discussing some of the new drag/drop stuff as well as the “placeholder” feature. In this video I talk your head off, but also show you how to use Floppy to build a sortable image gallery similar to (better than, really) the type of gallery you see in Airbnb’s admin interface. Let’s have some fun with our old pal Frank Sinatra…

The “My Sinatra Gallery” page I’m working on in this video is here:

Floppy Demo Drag/Drop Placeholder

On YouTube here: https://youtu.be/Btr593g4LJI and see the rest of my Floppy-related videos in my Floppy playlist here: Floppy Plugin for Bubble - YouTube

[matthewsandys1]

Hey @keith,
First off, I just wanted to say a massive thanks for all the work you’ve put into aiding the community with your plugins.

You recommended I look into List Shifter and Floppy in a post I made about a week ago related to apply discounts. I’ve been trawling through both of their forum topics ever since trying to figure out how to solve my problem and I’m at a complete loose end.

If you can offer any aid, I would be extremely grateful.

Here is the design of what I am trying to do:

For context - in the database, each product has a field linking to it’s associated offer(s) and each offer has a field linking to it’s associated product.

On a separate screen, users are able to input discounts they have with certain suppliers and these inputs are then saved to a ‘discounts’ table with an associated ‘supplierId’. Each ‘offer’ has a ‘supplierId’, which I can use to figure out the user’s discount, so I am trying to figure out how I can apply these discounts whenever I load a product repeating group.

In principle, I think Floppy’s Array Method would work perfectly. I pass in the offer’s price, then the user’s discount, and simply multiply them. However, I cannot for the life of me figure out how to correctly pass this information to Floppy so that it can correctly do this for each cell of the repeating group.

I would be eternally grateful for any pointers.

[keith]

Hey @matthewsandys1, just use Floppy’s List Math action: Whatever your list of prices is, pass it in here, do whatever math op you want and the resulting list of numbers can be sent to one of 5 List Math outputs of Floppy:

Output options at bottom of List Math interface:

[rico.trevisan]

Won’t take “Kanye” for an answer.

The tech is awesome. The commentary is gold.

[keith]

Thanks, @rico.trevisan, it was pretty challenging making this work correctly for all situations, particularly since some of the sortable library’s own internal functions (like sort) seem to be borked. BTW, if you want a playground copy of Floppy (or even install it into one of your own real apps), PM me the app name and I’ll authorize that app. Cheers!