Hey @gavin1, I’m not finished with giving you a VERY detailed bit of advice here, but didn’t want you to have to wait. When I write detailed stuff like this, I want to make it broadly useful, but that takes a lot of time, so here’s an in-progress version of my advice for you…
Ah, yeah. So, you need to wait until those actions are done. Now, a possible oversight on my part with the SORT action is that I didn’t include an event for “SORT Complete”. (That would be a friendly thing to do and so I’ll address that in a future update.)
We can, in fact, use List Shifter itself to work around this limitation. But first, let’s discuss event-driven programming in general. Bear with me as this will be helpful.
(You’ve probably noticed that List Shifter has a bunch of events that it fires so that we can take action on things in the right order. You can see them like this:
)We use these events to know when it is safe for us to do stuff. One of the most important of these events is List Shifter Initialized/Updated. You might be tempted, for example, to shuffle the deck not via an explicit button press, but automatically on page load.
Well, if you try to fire one of List Shifter’s actions at it before List Shifter is fully initialized (meaning that the plugin is fully initialized and the initial value of the Original and Shifted Lists has been established), you’ll get an error (really more of a warning). So instead of (or in addition to) firing on “page loaded”, we instead would fire those actions when List Shifter Initialized/Updated. So, instead of this (button press):
We could do also or instead do (shuffle the deck in ListShifter Nano Sort as soon as it’s ready to rock):
ASIDE: Now you’ll see what I did here is copied each of the workflow steps from the Button press workflow to this new workflow. If shuffling the deck is something I might do a lot I should probably move that to a custom workflow, right so I don’t have to maintain that in two different places.
So here’s what I should really do:
And then my Button press and Initialize workflows can just be like:
OK, now if we test this right now (preview our page), we may see the debugger report some errors (again, really just warnings in this case) that (1) we tried to run PROCESS List on List Shifter Nano Sort, but our list of items was empty so PROCESS did not run and (2) that we tried to do SORT on List Shifter Deck, before List Shifter Deck was initialized.
These warnings appear both in the debugger and in the console:
Why did we get these warnings? We waited to run PROCESS List on Nano Sort until it was initialized and the subsequent SORT action (which, remember, sorts the list in DECK, using the sort order we stored in Nano Sort’s Processed List).
So, why would this happen? Well, you’ll recall that List Shifter Nano Sort’s “list to shift” gets its value from one of List Shifter Deck’s outputs:
When the page loads, ListShifter Deck’s Original List will be empty until List Shifter Deck finishes loading its list. (And remember that the source of that list is a Search and so this takes a small amount of time.) So List Shifter Nano Sort actually reaches its Initialized state (and fires an Initialized/Updated event) before List Shifter Deck. (Because it takes us almost no time to load the empty list into a List Shifter.)
But then, when List Shifter Deck finishes loading its list (Search for Cards…) and the value of its Original List changes, List Shifter Nano Sort automatically updates (reinitializes itself) and fires its Initialized/Updated event again.
This is important to know and it’s super useful! (We are going to use this feature to know when our deck has been sorted, even though that meanie Keith didn’t give us a “SORT Complete” event!)
Anyway, once List Shifter Nano Sort updates the second time, our PROCESS and SORT actions succeed and we can actually see that this happened in the page:
And of course we only notice these warnings if we are running the debugger and/or looking at our console and they “ain’t hurtin’ nobody” as I like to say. It’s not really a problem that we tried to PROCESS and SORT before things were totally ready as – in this case – those steps are going to run automagically once things are ready and we get our intended result. (Which, in this case, was automatically shuffling our deck right away when the page loads.)
If we wanted to suppress these warnings, we would put one extra condition on our When Nano Sort Initialized/Updated workflow, so that we only attempt to shuffle the deck when List Shifter Nano Sort actually has any items in its list:
There are several ways to test if a list has no items. We can check if the list’s count (length) is greater than zero. Or, as I did here, we can check if the list’s :first item is not empty. The difference between these is more or less academic in most use cases. (You might also notice that List Shifter has an output called “Item Count”… we could check that this property is > 0 but note that it won’t give us the desired behavior, because List Shifter's Item Count actually goes positive before the the items in the list are actually loaded! (This is not a bug, but a very useful feature in certain use cases.)
Now our page won’t throw any warnings at us. The reason this works is we now only attempt to shuffle when List Shifter Nano Sort’s Original List has items in it. And… since the source of List Shifter Nano Sort’s Original List is List Shifter Deck’s Original List we can be assured that Deck is initialized and has items in it as well. ![]()
OK, so back to dealing cards!
Now, what you are attempting to do is to shuffle the deck and then immediately “deal” three cards when a certain button is clicked. (That is, this is what the workflow you screencapped is doing.)
And, as you discovered, the whole PROCESS → SORT rigamarole is not finished when Step 3 of your pictured workflow attempts to grab cards from ListShifter Deck’s Shifted List. So we need to trigger that “dealing” from some other event.
Let’s use what we just learned above to accomplish this. We’re going to put another List Shifter on our page and this one we will configure to copy List Shifter Deck’s Shifted List. And so, this List Shifter will Initialize/Update whenever List Shifter Deck’s Shifted List changes.
Note: Again, I’m working from my original example about sorting that I created for you. It looks like you decided to go with the “alpha” sorting technique which I’m sure you reconfigured to use just a single List Shifter. Don’t get confused by the fact that my demo page has 2 (now 3) List Shifters.
Here’s the new List Shifter, which for now I’m going to call “Shuffled Deck”:
And now I have an event that fires whenever List Shifter Deck’s Shifted List changes and I can take actions there:
Now, just like in the example above, this event will fire on all changes. But we’re only interested in certain ones – we’re only interested in this change when List Shifter Shuffled Deck’s Original List has items in it.
Also, we are only interested in this event if List Shifter Deck’s Shifted List is different from its Original List. (That is, when the list has been “shuffled”!) List Shifter has an output called “List Shifted” (I know – this is a little confusing vis-a-vis “Shifted List”). The “List Shifted” output is a boolean (yes/no) that goes to “yes” if Shifted List is different than the Original List. (And it will go back to “no” if they later become the same again.)
Cool. So we can do:
And we could do something in the workflow to test out whether this detects the condition we want. You could display an alert or make something visible or whatever, but I like to use Debug Buddy, List Shifter’s companion action to just write something out to the console to let us know something happened:
Remember that in my demo page, the Deck now gets shuffled automatically when we load the page and so we should see this event fire. And we do:
In fact, we see it fire twice (the little “2” in a circle means the console printed this exact same console message twice). I don’t have a good explanation of that at the moment, except that plugin loading and initialization in Bubble is a bit weird, especially when we are loading lists.
This doesn’t really cause us a problem, because we’re actually going to add a third condition to that “When LS Shuffled Deck is Initialized/Updated” workflow, but…
If that bugs us (or if that potentially is a problem), we could reconfigure List Shifter Shuffled Deck (the yellow one) such that it just stays empty until List Shifter Deck has been initialized and “Deck’s List Shifted” value has gone to yes. To do that, we’d empty out the “List to Shift” entry in the move it into a condition:
Now we get the behavior we want on load. Here’s what we see on page load:
And, now, if I click one of the shuffle buttons, we’ll see this same event fire and we can confirm that the contents of List Shifter Shuffled Deck are, in fact, the same as the newly shuffled deck (held in List Shifter DECK’s Shifted List) and the SORT action is, in fact, complete when this event fires:
OK, so now we have an event that fires whenever the deck has finished shuffling. And so you might have noticed that now I have a button labeled “SHUFFLE and DEAL ME THREE CARDS”.
What we’re gonna do when this button is clicked is:
- Set a state that tells us, “Hey, we are now shuffling and dealing 3 cards.” This can be a simple yes/no that we set to yes.
- Trigger the Shuffle Deck workflow.
- Listen for when the LS Shuffled Deck and the state we set in step 1 is “yes”.
- When we hear that we will “deal 3 cards” ← we still haven’t defined what this means, really
- Set our state back to no so we know we are not dealing anymore.
Now we could create a custom state for #1 anywhere on our page, but List Shifter has a custom state built right in, so we might as well use that.
What I’m going to do is configure the List Shifter Shuffled Deck’s “process output type” to be boolean (yes/no). (Process output type controls the data type of List Shifter’s 4 auxiliary outputs – Processed Result, Processed List, Custom List, and Custom Value.)
And now that List Shifter’s Custom Value becomes a yes/no state that we can set on-demand just as we would with a custom state. So we’ll build our workflow for what happens when the SHUFFLE and DEAL button is clicked:
- Set our Custom Value to “yes” (we also have to “publish” this state so we can read it at the List Shifter’s outputs… if we don’t publish it, it’s still available to List Shifter internally – i.e., in the PROCESS List action – but it won’t be available to normal Bubble workflows. (There are many uses for this feature that I won’t go into here.)
- Trigger the Shuffle Deck workflow
- Build my workflow for what happens after list sorting is complete. Note that I add 1 condition to the conditions on this workflow – it should only fire if LS Shuffled Deck’s Custom Value is yes:
- Now I get to decide what “dealing 3 cards” means. In your example, you are taking 3 cards from the shuffled deck and creating/making a “Hand” object in the database. I guess you do that because this is a multiplayer online card game or something?
We don’t have to make something in the database. We can of course just create a “hand” in the page. Since a hand is really just a list of Cards, we can use either a custom state or List Shifter(s) to hold those cards.
Of course, if we are creating a game, we might also want to know things like “which cards are still available to draw from our deck?”
So what I’m going to do is just represent the hand as a list in the page, using List Shifter. I’ll create a List Shifter Player’s Hand and set both its Data Type of List and Process Output Type to be of type Card:
I’m not going to set a source for List to Shift, because I’m just going to use this in lieu of a custom state (building my list in the List Shifter’s Custom List). So for my drawing cards workflow, I do:
And, at this point, I have a thought: I’m drawing cards from List Shifter Shuffled Deck’s Original List (note, I did not pick List Shifter Deck’s Shifted List… even though these are [at the moment] identical lists)… If I really am building a game, I’m going to need to know how many cards have been dealt. So I should also update another List Shifter to keep track of that.
So I make one – it’s just a clone of the “Player’s Hand” shifter as it needs the same setup, I just change its name to Dealt Cards:
And then in my workflow (which I’m going to rename as well - to “Deal Cards” because the auto-description is so fugly):
so here, instead of just setting the list to a new list (the three cards we deal), I’m adding this list to the list that’s already there. Now, the first time through, LS Deal Cards’s Custom List will be empty, but multiple times through, it’ll have values. So the way to “push a list on to a list” in Bubble is to :merge the lists.
… to be continued… but you should have the idea by now…



































