How to build a Dynamic Kanban Board in Bubble.io

Ever wondered why some bubble apps feel like they're stuck in 1995 while others look like they could compete with million dollar SaaS platforms? Well, I'm about to show you exactly how to build a drag and drop Kanban board that'll make your users think. You hired a team of Silicon Valley developers. And the crazy part? You can build this in under an hour. Hey, Dennis. I'm Dennis Lewis from Ratio.dev and after 40 years in tech from IBM secret aix team to helping hundreds of startups scale with no code, I can tell you this. The difference between amateur bubble apps and professional ones isn't what most people think. Look, most people think Bubble applications are limited when it comes to UI and ux, and that's complete nonsense. Thanks to Bubble's plugin ecosystem, you can create drag and drop functionality, smooth animations, interactive charts, basically anything you can imagine. I mean, you're not going to build a graphic intense shooter game with bubble. That's not what Bubble is built for. But here's what I see all the time. Developers getting intimidated by advanced features and settling for basic boring interfaces that make their users want to run away screaming. So today I'm going to walk you through building a Kanban board that's so smooth and professional, your competitors will think you switch platforms. And if you stick around until the end, I'll show you how to get free access to our complete no code resource center, which is the same toolkit we use with our clients to build enterprise level applications. That's where all our secret socks have stored. So, yeah, stick around till the end. So before we get into this, let me tell you a quick story. A few months ago, a client came to us completely frustrated. They spent weeks trying to build a project management feature for their startup. And every solution they tried looked like it was built in someone's garage. They were about to hire a traditional development team and blow 50k on what they thought would be a 6 month project. Instead, we built them a fully functional Kanban system in Bubble in just two days. Not only did it look amazing, but it handled drag and drop, real time updates and even complex workflows automations in the background. And the best part, when they needed changes, we implemented those the same day. Instead of waiting for developer availability and all those traditional developer analytics we all know about, let's dig in and actually see how we do this. Step one is the foundation. Here's how we're going to build this Kanban board step by step. First, we're going to need the right plugin and there's one that absolutely dominates this. And we're going to use the draggable elements plugin. It's reliable, it's maintained, it's by bubble. Okay. And you know by now if you watch any of my videos, I always say use the bubble plugins first is absolutely puzzled in a can. They play by different rules. They don't slow your application down, they don't get their whole structures loaded on every page. Generally they have the functionality that you're going to need. So here's something most tutorials won't tell you. The database structure is what makes or breaks your Kanban board. You need to think about this carefully because if you mess it up, you'll be rebuilding everything later. In this case we're going to do this example of projects columns with tasks inside them. And each column is going to be the status of that task. So it could be pending, it could be in progress, it could be complete, it could be waiting. We're going to see how to do that. You're going to need a status field for your task. So let's go in here and let's look. We're going to have, in this case we're going to have a table called action items which are going to be the tasks. Let's go to the option sets and we're going to see that we have a status which is going to be pending in progress, waiting, complete or archived. So those are going to be our columns in our Kanban board. Quick tip from my IBM days. Always keep a last modified date. That's going to be important. Bubble does it for you, so that's a good thing. Now let's get into the fun part and build the interface. So I'm going to go in here and I am going to go to the board view and scroll over here a bit so you can see. And voila, you're looking at it here. I'm going to close this. Gavin. It's over. Let's dig in here and see. It's funny though how one little column thing here is actually doing all the work for this. Let's open this up. Inside here we have one repeating group, okay? And its data source is the option set which we just saw, which is action item status. I'm not including archived because in my case archives are deleted. Basically they're just a place where we store stuff that because we may want to recover it later. So think about it as the trash can. So I'm taking that status out, but all the other statuses are Here and that is the repeating group. It only has one row but it has as many columns as there are status. So that's where we're going to get them. There you can. In this case I'm using them in the order that they were created there in option set. But you could add an order and reorder them if you want. However you want. You just do ordered by there. Once we have that outside repeating group which is going to be the different columns, you're going to open it up. We have a column. Now for this group here is a column. It has row graph of 20 here for each for the status. And inside here I've got the header which includes a text element which is this parent groups action status display. So in this case in progress or whatever that's there so that it's at the top of the column. So this looks really easy to understand. I could, if I wanted to move them into the middle I could just come over to the this little diggy here and put them here. They would show up and center in that. In this case I have them on the left. Okay. And now underneath here I have the first element from that I'm using from the plugin which is the draggable area. Okay. And I've called it draggable area da current status. Okay. Why is this important? Because this is where we're going to be able to drag an action item and drop it in there and it will actually be able to go to the database and change the status of that action item in the database and see how that that works out. So that is our the column area where we can drop things in. So that's called a droppable area. Okay. Inside here I have my second repeating group. Okay. And this is a repeating group action item status. Okay. In this case it is I have this in a pop up that loads on hidden on page load. Because I wanted these to be preloaded. It's just a search for all of the status based on that specific status is equal to parent group's action status. So I'm taking all of the filtered action items and I'm just filtering out the ones that have this status. And I've made this one column. So so they're not going to go horizontally, they're going to go down vertically inside this. Now I have the second element which is the draggable element. So the first one is the droppable area and the second one is the draggable element. So it is a drag drop group action item. Okay. And inside this I've included a reusable element which is the action item card. Now this is just because in my application I reuse this card design in a whole bunch of different places. So I've made it into a reusable element and I just pass it in the action item. But this is what's showing me this in progress. It has the menu in it, it has the action item title, it has this text, it has the due date. So that is inside here. And now that is really all you need in order to make this work. So what I'm going to do is I'm going to preview this for you. Let's open this up. This is the one we just built. And now you can see that we have four columns across here. Pending in progress, waiting complete. And I can basically take any one of these and.

Drag it. For example mobile app version alpha. I'm going to drag this to waiting. Okay, now you can see that it changed its status to waiting. So let's go in now and actually see how that workflow works. Here we have an event created so that it happens whenever draggable area current status has a group dragged on top of it. What it does is it makes a change to the current workflows action item and it changes the status to this drop area's action status. That's all it does. Very simple workflow. Whenever that action item gets dropped onto that area, it will change its status accordingly which we saw happen in the example. And it's that simple. This is a working Kanban board that can wow your users and solve a real problem. It gives you a new view of how your tasks are set up. And you can use this for any type of scenario where a Kanban board makes sense for you. Now if you really want to blow your users minds, here's some advanced features you could do. Real time updates using Bubble's built in features. You could use custom CSS to change the color based on the status or whatever you want to do, add users avatars so that you can see who's working or what and just really the sky's the limit with what you could do with Bubble and this sort of drag and drop ability. But here's what I really want you to understand. The Kanban board isn't just about drag and drop. It's about showing you that Bubble can compete with any platform out there when you know what you're doing. I've seen Bubble applications handling millions of users processing very complicated workflows integrating with AI systems. We've built them a whole bunch of those. The platform is incredibly powerful when you understand its capabilities and the key is learning the right techniques and using the proper architecture and not settling for good enough when you can build something truly professional. So if you want to take your bubble skills to the next level, we've put together something really special. It's called our no Code Resource Center. It's packed with vetted plugins, step by step tutorials, advanced techniques that like the one we covered today, all the tools we use to build applications for our customers. And it's not just a static thing. We update it every week, adding new stuff in and you can get it completely free. All you have to do is go to ratio.dev and sign up. Put in your name and your email and you'll get immediate access and we'll let you know every time we add new stuff in. I think it's definitely something that you shouldn't let pass away. There's a link in the description below. I hope you've enjoyed this video. If you have, give it a like give it a thumbs up. Subscribe to our channel would mean a lot to us and thanks for watching. See you in the next video.