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

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).

1 Like

UPDATE ALERT TIME :tada: 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! :point_down:

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.

2 Likes

The legend strikes again.

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

1 Like

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

1 Like

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.

1 Like

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

NEW VIDEO! NEW VERSION! :tada: 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:

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

4 Likes

Hey @keith, :wave:
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. :alien:

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:

Won’t take “Kanye” for an answer.

The tech is awesome. The commentary is gold.

1 Like

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!

1 Like

Generous offer but I will pass. I rather pay and support the maker. :hugs: besides I would love to pay back in helping you navigate the new engine.

I’m definitely going to add this to a couple of my apps. I just have to finish this one big feature for a customer tomorrow.

Did I see an option named trigger to sync? Is that something that if set to yes it will kick off the specified backend workflow?

Also, does drag and drop work if I have a repeating group of columns and nested inside of it a repeating of group items? And the items can be dragged between each column?

2 Likes

Hey @rico.trevisan, I haven’t played with nested repeating groups and drag/drop. It will probably work in some cases but not all…

I’m still finding little bugs because the sortable library turns out to be a bit of a mess. (For some reason, touch events don’t send data properly. I already fixed one issue related to touch vs normal drag events, but cross-RG drag/drop on touch devices doesn’t work correctly and causes a crash in current version. Very frustrating, but I’ve not found anything better, which is sad.)

Apparently subscribing to a plugin (instead of purchasing it) when the Bubble app is on an yearly plan leads to a lump sum payment for the plugin.

I guess I just found a novel way to tip you, Keith.

1 Like

Hey @rico.trevisan - I’m not quite sure what that means (are you saying that if you’re on yearly and you subscribe to a plugin Bubble bills you at 12x the monthly sub immediately? that seems weird).

But also, just pushed a bugfix for the issue I was whining about in my last message!

BUGFIX UPDATE: I just pushed Floppy version 1.9.26, which fixes (as far as I can tell) an issue that caused drag/drop across repeating groups (“Drag Group” feature) to fail when used on touch/mobile devices. Go and get that if you expect the drag group feature to work with touch.

2 Likes

I think that’s what it does indeed. It warns before doing it. I think it will charge the remaining months until the app’s subscription due date. The value hasn’t shown up in my billing overview yet to confirm.

Ooooh, well, if Bubble charges you $72 for that Floppy sub, I can float you a couple of gratis installs, @rico.trevisan … but only because you are THE RICO.

3 Likes

Little update: Just pushed version 1.9.28 of Floppy which adds a couple of new touch-related options for the drag/drop configuration and also fixes a bug/behavior issue that could happen with drag/drop if the user logs in or logs out.

(Commentary on that in part 2 of my “My Sinatra Gallery” video, coming soon.)

I’ve never actually run into an issue with plugin update functions and login/logout, but TIL that a login or logout makes plugin update functions run (I assume because of the change to the context object) and this was resetting the sortable behavior in a bad way. Fixed (mostly, I think).

:point_up:other plugin builders – take note and betcha didn’t know this…

1 Like

Interesting. What did you to fix it?

1 Like

I certainly didn’t know it!

1 Like