Dennis H. Lewis shows how to build multi-select in Bubble tables using a one-state method that lets you perform real bulk actions on multiple rows at once.
Chapters
Ever tried building a bulk action feature in bubble, like deleting multiple items or updating a bunch of records at once only to realize that your table just doesn't cooperate? Yeah, you're not alone. I'm Dennis Lewis from Ratio.dev and after 40 years building software from IBM Secret AIX team to helping hundreds of bubble founders scale their apps, I can tell you this multiselect is one of those features that looks simple but trips up almost everyone. Today I'm walking you through the exact system we use@ratio.dev to add multi select functionality to bubble tables and same ideas will work in repeating groups, but I actually like bubble tables, although that's kind of a permanent beta. A big functionality improvement in quite a while. No guesswork, no half baked workarounds, just a clean scalable solution that actually works. And stick around to the end because I'm going to give you free access to our entire no Code resource center packed with vetted plugins, how to videos and frameworks like this one and the links in the description below. Let's face it, you're building a task manager, a CRM, maybe an admin panel, and your users need to be able to select off multiple rows and then do something with it, whether it be delete, update status assigned to someone, whatever. You go into the builder, add a table and wait. There's no multi select option, no checkbox column, no built in way to track which rows are selected and you start googling and you find form threads from 2019. Half the advice is outdated, the other Half requires custom JavaScript you don't understand and meanwhile your users are stuck manually clicking through rows one by one like it's 1955 or something. And I've been there. In fact, I once built an entire workflow system for a client before realizing their team needed bulk actions and we had to tear it apart and rebuild it because I didn't plan for multi select from the start. So don't make my mistake. Here's what host bubble developers don't realize. The key to multiselect isn't about the table at all. It's about a custom state. Specifically, you need a custom state that is a list of the same data type that your table is displaying. And that's it. That's the unlock. This custom state becomes your selection bucket, and every time a user clicks a box, you add that rows item to the list. If they uncheck, you remove it and then you want to perform an action on all the selected items. You just loop through that custom State. Or even better, I'll show you how to just run a backend workflow on a list. Elegant, it's scalable. And once you see it, you wonder why Bubble doesn't just build in just by default. I mean, this is the way it should be done. All right, let's jump in and build this thing. I'm going to walk you through the exact setup we've used here at Ratio dot Dev in lots of applications. First, we're going to set up the data for this little experiment. Just created a table here called task. I've got, given it a title, a status. These are both just text and due date, which is a date. Nothing complicated there. Now let's jump into the page that I have created for this. It's called test page. Really creative there. And here you can see we have a row up here where we can create new towns. We've got a couple of buttons and an input field here. And then we have a table down below. The first thing that you're going to need is a custom state. I just created it. Page level. You could have done it wherever you want. And you can see I have a custom stakeholder selected tasks. It's a type task and it's a list. Now, what we do have is in the first column of the table, I've added in an icon that is a checkbox. You could use a checkbox with a conditional as well, but I just find that these are more esthetically pleasing. And.
If the selected task contains this row's current task, then it will mark it as clicked off. We'll see that in a minute. And then there are a couple of workflows that I've created for when you click on this icon. So let's go see those. The first one is when the selected task contains the current rows task. And all that's going to do, it's going to take it and subtract that row from it. It's going to get rid of it. And the other one is if it doesn't contain it, then what it's going to do is it's going to use plus item to add it into the list. So very simple, little workflow there, back and forth. And then let's see what these buttons do. So delete selected. Let's check out its workflow. And in this case, I am going to delete a list of tasks. So delete a list of things. And I'm just passing it in my custom state. That's the list I want to delete just as A precaution here I've created a custom event that's called Clear list and it just resets the custom state. It clears it out when this is finished, and then it refreshes the table just because sometimes custom states get in this funky state when it contains deleted items, they don't exactly disappear. Just a quick little tip there. Now let's look at the button change status, which is a little bit different because here I want to update a whole set of rows and I want to do this in the background as well. So what I've done is I've created a backend workflow called task change Status. All it does is it takes as an input a task and a status. The task is of type task and status is a type text. In this case, it just modifies tasks and sets its status to the status that we've passed in really simple little workflow. But now we can go back here to our button and we can use schedule an API workflow on a list and we're scheduling on a list of tasks. I'm passing it in the list, my selected tasks, and all I'm doing is calling this API workflow, this backend workflow. We just looked at passing it this task, the input status, new status is value. I'm just going to have a start now and just do it as fast as it can. If I wanted to make it slower, I could put in a delay in there. But in this case, it's a real simple workflow. It just goes off and does them all. I'm resetting the relevant inputs just to make sure that everything is refreshed there. Let's actually see how this all works. Here we are. I have a list of tabs you can see none of them are in here. And let's create some dummy towns. So let's create 1, 2, 3. Okay, we've got three of them. Let's select them 1, 2, and 3. Now my buttons appear and I'm going to say delete these. The selected ones. Just do that. They're gone in the background. Now let's refresh the custom state back here. Now let's say that I want to change the status of both of these tasks. Progress. I'm going to change stones and that's going to do it in the background and boom, they're done. You can see how easy this is to make it work. That's basically in a nutshell, how to do it. Now that you know how to build with multiselect the right way, if you want to learn more about how to build workflows in your rubble applications, all sorts of tips and tricks and best practices. I definitely recommend that you go to ratio.dev and sign up for our no Code Resource Center. There's also a link in the bio. This is where we put all of our best information and it's all right there for you. We update it weekly. I think it's a great resource for you. Go ahead and do that. If you've liked this video, give it a thumbs up. Subscribe to our channel. That would mean the world to us. We really appreciate it and see you in the next video.
