Build your own nocode CRM with Bubble.io - Part 3

Setting Up the Contact Data Type

Welcome to the next part of our Bubble tutorial series where I'm showing you how you can build a no code CRM in Bubble. In this tutorial, I'm going to show you how you can add in a table element to display your contact data type. So we're going to start right away by going into data and setting up the contact data type.

Creating the Contact Data Type

I'm on the data types tab up top and I'm going to add in a new type called contact. And I'm going to add some fields in so let's just start really simple. We'll have name and we'll have email, both of them are type text.

Displaying Data with a Table Element

Now we need a way of displaying our data back. So I'm going to go into Dashboard. If you want to see how I got up to this stage, go and check out our earlier tutorial videos. Because you'll see everything up to here, but because I want a similar design, I'm going to simply clone the dashboard and call this contacts because it's going to show more than one contact.

Setting Up the Contacts Page

Then now I'm on the contacts page, I'm going to delete some of these parts here. So I'm just left with group C because that is the inner content for my page. Let's add in a table element now. This is Bubble's new table element, only a few weeks old at the time of recording and it's going to show type of content contacts and it's going to do a search for all contacts because right now, without putting any privacy rules in place (and we'll get onto privacy rules maybe in this video maybe in a future video), it's just going to return all of the contacts in the database no matter who created them.

Configuring the Table Element

And I'll put in a bit of order, we'll say order by name. And then in this cell here we will put our header and we'll say name. Then I'm just going to copy and paste that into B and say email. Then I'm going to see if I can just delete C for now. Cool. And now we build out the contents that we want repeated through each row of our table where we want the data displayed so in name I'm just going to add in current rows contacts name and I'll make this width 100% and I'll also make height 0 just so it's only as big as it needs to be and I'm going to copy and paste this into the email column and change it to email. Let's hit preview.

Refining the Table Design

Okay, you can see our table is beginning to come along. I'm gonna add in just a couple of design refinements here because I don't like it when things look like they are without the appropriate padding. So I'm just putting 12 padding in all sides and I'm going to copy that into my cells here for my row and on my table element and the layout. Okay, now it feels like all the space. Go put a much lower number in there. Cool.

Adding Manual Data

But we have no data in the database and nor have I built a way of adding the data in the front end. So I'm going to add in some manually manual data manually by going into app data and in contacts and I can just say new entry and so I can add in a name. I'll just put Scott and I could say Scott@Example.com. And so we can get an idea of the table repeating itself, I'll also put in say Hank and we can have Hank@example.com. If you have with those two clues understood where I'm getting my inspiration for names from this afternoon leave a comment below. Love to see if you get it with those two clues Scott and Hank, what might I be being inspired by?

Previewing the Table

And now if we go back to our table we can see that we have got Scott and Hank.

Next Steps

So I'm going to leave it there for this video. In the next video, I will show you how we can create a pop-up that can both be used to create and edit entries in our contact database, so you don't need a separate create pop-up and a separate edit pop-up. We're going to do it with just one pop-up.