Everything You Should Know About CRUD Tables in Bubble.io

In this video, I am going to walk you through something that you're going to need in every bubble application that you build. And I'm talking about just the basic infrastructure for what we call cruds. Create, update, delete table data. Because almost every application has tables that you're just going to need to be able to add rows to delete rows from, make changes to make your bubble application functional. Usually these will live in an admin dashboard or in a customer dashboard, doesn't really matter where. But what I want you to be able to do is to build these efficiently at bubble quickly and also provide a decent user interface for your users. I want to be clear in this video, I'm not going to focus at all on the design elements, on making it pretty. I'm just going to give you the structure and the functionality and walk you through how I build them. See an example of what we're going to be building. So here we are. In this screen I'm going to click on customers and you can see here that we have a table of customer data. We have some buttons that will be allow us to page through. It's very important that you don't just create a table with an infinite number of rows because you're going to bog your application down. Going to make your interface clunky. So you want to be able to page through whether it be eight rows or 10 or 12. You can decide. We'll see that in a little bit. We've got some filtering, so I call this constraints at the top you can see it filtered it out there. If I want to go to all active customers there I have them. If I want to search and find a specific customer based on their name or something, I can just type that in to the search field and boom, it's going to find the right ones and I delete that, they'll all be back. A couple other things here we have a button for creating a new customer. We're going to see that for each row we have an edit button and a trash can which in this case we're going to mark them as archived. We'll talk a little bit about that, but you could just delete them if you want. When I click on edit, I'm going to see that it's going to open a pop up where I can in this case modify the name. I could add in the email address, I could change its status. Here you could have three fields or 300 fields. Okay. In this pop up you'd have to work to put 300 in there and make it useful. But you could do that so it's not so much in this video I'm going to show you how to organize your pop up. I just want you to see the flow. I can just click out and that's made that those changes have already been made to the database. I come back, you can see they're still there. If I create a new one, then it will open the pop up. It will create one and open the pop up so I can fix it, set its data. One other little functionality that we've built into this example is the ability to have projects associated to customers. So if I click here on one of these, it will highlight it here and it will open up a another table down below with this customer's projects. This could be an invoice and each of the lines in the invoice, there's a lot of different use cases for this. I can just click here, hide them, click it here. If I want to change this project again, I could click here on this. It's going to open up a different pop up because it's a different data type. But I have all the fields for this one here as well. And similarly Avatar can and I can create a new project as well. So this is a really simple CRUD implementation. But now let's go into the bubble builder and look into the insides of how this is all put together and hopefully this will help you when you're building your bubble application. In this video, I'm not going to show you how to build the dashboard. If you're interested in that, leave me a comment below and I will walk you through how we build dashboards in bubble and I will show you how to build the menus and all of that. But in this case we're just going to focus here on what we have in the middle, which is this is the customer section. This tab is only visible when I've selected it from the menu. Here we have inside this customer section, as you can see, we have the constraints row up here. This is where I have my dropdown to my search fields. This could be 1, it could be 10. Depends on your use case. Sometimes we need a lot of filtering abilities and so there'll be a bunch of constraints at the top. Otherwise, in this case we've got standards and search. Here we have our pagination row with our buttons previous and next and then below here we have a table and I'm using native bubble tables. You could use repeating groups. I happen to think that the tables, while they aren't perfect yet. They make keeping things looking decent a lot easier than repeating groups. And hopefully you guys out there at Bubble, if you're listening, go ahead and finish table element. Give us some more cool functionality, make it sortable, make it, give us some multi select options that we don't have to build ourselves. Make them page like a repeating group does instead of having to do it like I'm going to show people in this video. So I still think there's a lot of room for improvement for tables in bubble, but I think they are great tool that they've given us and they're easier for this type of layout than using repeating groups. Now if you're going to use cards.

That aren't structured in it, just a table format, then you use a repeating group. We'll do that in a separate video. I think I already have. Anyway, in this table, one thing is important for you to understand is I try to keep all of this in a single group column. Group. We're going to see that there are some custom states associated to this. So this is called Group Customers. Here we have the pagination row. So in group Customers I've got some custom states created. One of them is called Edit Customer. One is called Edit Project. One is called Selected customer. Start item is what number does it start, what page does it start with and the number of rows. In this case I have it set to eight rows in my table. But if you want to use 10, if you want to use 12, if you want to use 15, that's up to you. And we'll see that these are used when we're paging. So if I go to my table and I select the entire table, I can see here that I have a search for customers. And we'll look at that search in just a second from and group customers start item. So from item one is where it's going to start until Group customers table rows. Okay, so that was eight in my case. So it's going to show me eight customers at a time. All right. If we look at the search here, you can see that I'm using any field contains and I'm using the value of this search input text here. So that's what I'm using for to make it be able to search over all of the written content. In this table, status is equal to this dropdown.

And I am using not equal to archived. Why is that? Because in this case, when somebody deletes a customer, I don't actually want to delete it from a database. I want to archive it. But if they choose all of the statuses up here in the dropdown, I don't want them to see the archived ones. So I'm going to add this row into my constraints on my search so that it's not equal to archived. So now I will see all of the other statuses in this table. But what if they do choose? Because up here in the status archived is one of the options. So if they choose it, then what I'm going to do is I've used a conditional here and I just have the same search, but I don't have status not equal to archived. So then what it will do is it will show them only the archived ones because they've chosen archived. And so it's using this new search which you know will use this value. And so they'll only see the archives. So that way my delete function is kind of permanent, but not completely, because then I could go in, look at all the archived ones, find the one that got marked as archived, and change its status back to active and it would become active again. So it's. In this case, I think it makes sense. That's just a little trick that you may want to use in your own application. Other little things here I put the customer name as the in the table. This is when they were created, by the way, I like to in the tooltip because I don't want to show the whole date time in there. It makes too wide. But I do leave in the tooltip on this, if you hover over this date, it will actually show you the date and the time that it was created. Which is something that is useful to be able to see sometimes. Here I have included, instead of just putting the status of the customer, I've actually included a dropdown. So this dropdown is included in the column here. You can see that it is a dynamic. It has all customer status. And I'm using auto buying so that if I just change the status right in the table, it will change the database and I don't have to do anything. I don't need any workflows, just works. And then finally I have a column here called actions and this is where I have my Edit customer icon. In this case it's an image, but can just use an icon if you want. And I also have delete customer. Okay. And we'll see that these have workflows associated to them. That is the structure of.

The table, how it's working. I also have a little visual cue here so that when they're looking at the table, I can say, oh, if I click on the name, I can see projects. If we scroll over down here underneath the table, we'll see that if you click on the name okay, of customer, there's going to be two workflows associated to it. And so I'm going to go edit workflows so you can see the first one here is it only if this customer rows Customer is not the selected customer. Then what I'm going to do is I'm going to set the state of the selected customer to this rows customer. Very simple action. However, if this is selected customer, so it's already been selected, then what I'm going to do is I'm just going to empty that selected customer state so it goes away. We'll make project section disappear because there's no selected customer at that point. Let's go back to the design. And you'll see here that this customer name, if I click on the customer name, you'll see it has a conditional that says if this rows Customer is the selected customer, then I change the font Weight to 700. Okay? And you could change the color. You could do shoot off sparkles. I don't care, whatever you want to do. I'm just keeping it really simple. Here we have a group here for the new customer. This in this case is just an icon. We'll see that in just a second. And then below that I have a another group which is a column called Group Customer Projects. And here what I wanted you to see is that if selected customer is not empty, it will mark it as visible. If selected customer is empty, it will mark it as invisible. And also if there are no projects, so this customer's projects count is less than 1, which means it's 0, then it will also not be visible. So you can click on the name as many times you want, but there won't be any. It won't show up if there's no projects associated to it. One thing I did want to show you that I forgot to mention is let's look at the previous and next buttons to see how they're set up. So in the previous button I'm going to say if group customer start item is less than the number of table rows, so in this case 8, then it isn't clickable and it has. It changes the background color of the button. So that's how you make it obvious to the user that you can't go previous if you're on the first page. Same way on the next button if there's no more afterwards. Then it will mark this next button, it changes background color and make it not clickable as well. And then the workflows for these previous button, what it will do is it will take the custom state of the start item and it will subtract that number of rows from it. So let's say you've clicked it three times. Then each time you do the next it's going to add that number of rows and each time you click previous it's going to subtract the same number of rows and that's how it moves forward and blocks through your through the list until it runs out obviously. So that's how we do pagination. And let's look at what happens when we click on this new customer here. Then the workflow we're going to create a new customer. We're going to set the custom state Edit Customer to this one that we've just created. And then I'm going to show the pop up. The only thing left to look at here in the design is the actual structure of the pop ups. So let's go look at one of these. Let's just look at pop up Edit customer. You can see that it is of type customer and the data source is the Edit customer custom state that is associated to my group Group customers. And so that's how it knows which one to use in there. And then inside this pop up I have an icon over here which is for closing. I move the margin up a little bit so that it's not in the way. But if you click on this it will close the pop up. We'll do an animate object fade out of the popup. You can also click out. In this case you could make the pop ups here that they can't be closed by doing escape or just clicking out. That would make them modal and you actually have to use the X button. But in this case I didn't feel like it's that important. Now inside the pop up one important thing to do is I always all of the data fields in the pop up and they could be have. They could have separate rows and columns and they could be as complex or simple. In this case it's very simple. I always have one group. It's a column group that contains them all. It has a space between rows. But the important reason of this is because if in the future I need to have this same functionality somewhere else, not in just this pop up then it's really easy for me to come and just convert this into A reusable element and then I can use it somewhere else. Whereas if I haven't grouped then later on I'm going to have to go back and group them and it's more work than it's worth. So it's a good idea just to always start off with that column around them and then inside there. This column I have each field I've created. So I've got customer name. It's a little column as well. Because in this case I don't want any space between the text that names the field and the actual field of either an input or dropdown or a search box or whatever it is, checkbox. I still want to have them grouped so that it's easy to move them around if I want to change the order or if I want to make name and email belong to a row and put them in the one beside the other, it will just make my pop up wider. And it's really simple. I can just grab both of these and I could say right click, group elements in a row container and boom, they'll go one way beside the other. Now if you do that, you do have to check to make sure your widths are correct, otherwise they'll bunch things up together. But that's how you do that. And the last thing I have is I like to put these on the bottom of my pop ups. It's just a who created it, what date, time and what status they have. Just a kind of a visual reminder. It's not important, but it kind of gives the user more context of what they're looking at. Another good idea is maybe to put up here a title or something that says this is a customer record or whatever you want to call it. In this case, I've kept the design as minimalist as possible, but with these elements you can now maintain your table data completely and efficiently. Should be quick on page loads. It shouldn't bog anything down. You'll be doing this multiple times, so you get used to one functionality and you'll have it. It'll be consistent across your applications and across all of the different tables that you use the same methodology with in your application. And then sometimes you'll need to add in new new actions. Maybe, maybe instead of just editing and deleting, you're going to have, you're going to have some other action that maybe it's a bl. You won't have a publish button, you could have an icon for that. If you're going to have a lot of actions with this, then maybe you're going to want to make this little floating menu sometimes we've done that. You can also add a column at the beginning and put a little checkbox and then create a multi select on your table if that's if you want to be able to, for example, delete multiple customers at the same time, you could have a checkbox one, two and then a button up there it says deli dot. There's a lot of variations on this, but I believe that this should give you a pretty good feel for how to do basic cruds in your bubble application. Hope you've enjoyed this video. If you have, give us a thumbs up and subscribe to the channel. That would be awesome. If you have any questions, feel free to reach out to us@ratio.dev and remember that you can get access to our resource center there. We've got vetted plugins, we've got many more how to videos like this one and great books to read. All sorts of stuff for you that are totally free. All you have to do is sign up. You'll get immediate access, so I recommend that you do that. Hope you've enjoyed this video. See you in the next one.