Skip to main content
CSV upload: Getting started with Bubble (Lesson 5.3)
Updated over a month ago

Section 5 (Lesson 3/8): In this lesson, you’ll learn how to upload CSV files to populate the database with dummy data. We need this data in order to render our repeating group of jobs while we’re in the design phase.

We’ll also cover:

  • Mapping CSVs: How to prepare CSV files to map to our Bubble database fields.

  • Slug formatting: How to carefully arrange our slugs in a format that works in Bubble and how Bubble handles duplicate slugs.

  • Data editing: How to edit data directly in the Bubble database.

Transcript

So I want to show you this really great feature that Bubble has, which is the ability to import existing CSV data. We're going to be importing Company data first and then Job data, and Bubble has this really nice popup where we can map our CSV headers to the fields in the Bubble database. Let's have a look!

So the first thing we need to do is the CSV has an existing "Sponsored" field on a job, so we need to add that. On the Data tab, click on Job. Now we're going to add a new field. This will be called "Sponsored," and this is just a yes/no type field. So a job is either sponsored or it's not sponsored by default. So what I've gone and done is made sure that the CSV we're uploading has many of these existing fields, and then we're able to match CSV column headers with these field names.

Okay, so now we can go to App data, and the CSV functionality, just to let you know, it's only available on a paid plan. Okay, so some of you, maybe you're on a paid plan, maybe you're not on a paid plan, and if you're not on a paid plan or trial, then you can just open the CSV and manually add these to the database. Let me just show you how to do that. So with the CSV open, you would go to the All Companies view in the database because that's where we're starting, you would select "New entry," and then you would just type the name, upload the logo from the CSV, and then create. You'll do that first, and then you'll do the jobs after that.

But let's try this CSV Upload! So I'm going to click on the "Upload" button. For "Type of data" we're doing first is a "Company." Data delimiter is a comma, that's fine. And now I'm going to go into the Resources folder. There is a folder called "Data" and look for the Companies.csv file. Okay, I clicked open and you can see that the Name matched to the Name. If it didn't match to the name for you, then just make sure you select Name. For the headquarters, I'm going to select Location. In the CSV, I named it Headquarters, but if I had named it Location, it would have mapped automatically. I just wanted to show you that distinction.

Now, with these fields mapped with the dropdowns, we can click on "Validate data," and it says "Your data set is ready for upload." So then we click on "Upload data," and there we go! I'm going to close, and we can see that we have some new companies: Bubble, Relay, Brainwave, Challenger, and Starburst. And Orbit is what we created ourselves.

What we're going to do now is just manually update these logos. So I'm going to click on the pencil icon for each one and just go and find the corresponding logos. So there is Bubble. And I'm just going to fast forward this bit, but please do the same.

So we're almost ready to upload our job data, but the last thing I wanted to do on each of these as well is just add the slug. Now, this could have been included in the CSV under Slug, under a column header, but I just want to show you how to manually do it because there is something to know about the way slugs are structured.

So first of all, the slug has to be all lowercase. All right, so Bubble would be "bubble," all lowercase. Let's go save that. Now let's search for Relay. Let's open that up, type "relay" all lowercase. Now, two things to note. First, you can join slugs with hyphens, so it can be a sentence. For instance, a blog post would have the title converted to lowercase and joined with hyphens. So just think of how it needs to exist in a URL. You already have an understanding of what URLs look like. The second thing to know is, so we're editing Relay, now, if another person from the company Relay tries to sign up, or let's just say we have two companies called Relay, not associated, Bubble will create the slug for Relay, but Bubble will know that there is already an existing one, so it would increment the second one. So the second company to sign up for Relay would be 'relay-1'. Bubble takes care of it for us. Also, if a User types a capitalized letter, then Bubble will actually lowercase that letter in the workflow step to Set a thing's slug.

Let's do the last few. So my companies are up and running. We have the Name, the Location, the Logo, and the Slug. We're going to do the same exercise with Jobs now. So I'm going to go to "Upload," and remember, if you can't upload, then you manually have to do this. I'm going to click on "New Upload." This time it's going to be Job data and I'm going to pick a file.

Okay, let's look at the matching! So Title is a Title, Term is a Term, Sponsored is Sponsored. Let's have a look at this: so Salary, what do we have here? So it's asking for a delimiter, so how do we separate these two numbers? We're going to choose a comma. Location is a Location, Live is Live, and Expiry date is an Expiry date field. Let's validate the data. "Your data set is ready for upload." Step three, upload the data! Okay, and close. Head over to the Jobs, and there we go! And we can see that the salaries are in the correct format, which is a range.

Okay, let's add a Company to each of these Jobs. So jump in and select any Company you'd like. Now, let's see how we deal with Companies here because Company is a data type. I'm going to click on the pencil icon. And now Bubble is saying "Type a Company's Name..." because it's trying to match what exists in the database. So let's try "Bubble" first. And there we go, we've got a match. Now let's also add in the Slug so we can get some practice with how this is done by editing the database. Remember, when we created a job in the previous section, we have a workflow step to Set a thing's slug. That's already up and running. We're just doing this now because we've uploaded some CSV data that needs just a bit of attention. It needs to be lowercase "product-developer."

Okay, so I'm going to fast forward this bit. Go ahead, keep that CSV open so you can see what the Company names are, and I want you to edit each one with a Company Name and a Slug.

Okay, so you've done the companies and you've done the slugs, and you have a range of different companies and jobs. You can see that when we created Orbit, we didn't have the Sponsored field. If a yes/no field is empty, the default is "no," so there's nothing we need to do here. What I'd say, though, is in the data types under Jobs, you can actually decide to set a default for these fields. So I could actually say that whenever a Job is created, by default, it's Sponsored, but that would be fairly unrealistic. So I'll set that to "no." But, leaving the default empty also equals "no."

So I hope you learned a lot there, especially around dealing with your development database and updating the slugs, etc. and connecting different data types. In the next lesson, we're going to design the little card for the first cell of our repeating group, and then we'll start actually looking at the data. I'll see you then.

Did this answer your question?