Transcript
Let's look at how to collect various types of form data, such as text, dates, and images.
On my Projects page, I have this popup called New Project, and I've added to what Bubble AI has created for me.
I've recently added this picture uploader because I want to have my projects displayed with a nice little image at the top.
Okay, but the first thing I need to do is just make sure that I can save images to a Project thing in the database.
Let's make sure that we can capture all of this information.
So in Data, I'm going to go to Data Types. I'm going to have a look at Project: Description, end_date, owner, progress. Okay, so we need to add a new field for the image. I'm going to find my basic types and simply select Image. Go ahead and Create.
Now, I did actually go ahead and create a status from an option set as well, so I'm going to hook that up right now.
Let's go back to the design, and I'm going to scroll down to Status first of all.
I'm going to make Status a dynamic choice, and that is going to be an option set called Status that I've already set up.
And I'm going to offer the user to grab any of the statuses when creating a new project. And when you set the display — okay. So we've got different types of inputs here: images, text, dates, and dropdowns.
So how do we actually save all of this to the database? Let's go ahead and click on Create Project.
And I've intentionally deleted the step where we create the project data, so I'm going to add that back.
I'm going to go to Data and Things because we're collecting data and saving it to the database.
We're creating a new project, so I'm going to Create a New Thing.
Let me now select Project, as that's what we are about to create. And I'm going to use this neat little shortcut option to Add All Fields, and I can just remove what I don't need.
Let's first of all connect the dots here.
Now, for Description, we want to capture data from the multi-line input in the popup.
I'm going to type in multi.
Okay, now it looks like we have two here — that's because we have an edit popup as well.
So often it's good practice to make sure that you just name this correctly or name it uniquely.
I'm just going to type the word Create there.
I'm going to do the same with the Project Name input — Create — and I'm going to do the same with the Start Date, because we have another popup for editing data and we need to distinguish between them.
And then Status Create as well.
Okay, with that out the way, we'll be able to find the exact inputs we need to connect.
So because I've named that input, I can now just filter the options by typing in the word Create.
And here is my multi-line input: Description. Fantastic.
So the End Date — that is coming from a date-type selector, and I can see this End Date here in the name.
The Image — actually, that’s coming from the picture uploader, and I remember that when I set it up, it's coming from B.
Okay. Is Active — we don't need, so I'm just going to delete that. Name — name input.
The Owner is going to be me, so I'm going to select Current User.
Okay, Current User.
We don't have any Progress because we're just creating it.
We have a Start Date, and the Status is going to be the dropdown.
So you can see that Bubble is only allowing me two options here, and the one we're looking for is the dropdown.
It's not allowing me to enter in a date input here because the status is of type Option Set, and an option set is text,
which is why it's giving me two options: I can save it as a text or I can save it as the dropdown.
And the dropdown output is the option set.
I'm going to select the value. Okay, let's try this out.
I'm going to click on the New Project button — that shows the input — and I'm just going to go ahead and upload an image from my computer.
Okay, that's uploading... and there we go. Just a nice gradient for my project.
I'll type in the project name: Building an AI App.
I'm going to go ahead and type in the description.
Okay, I'm going to select my Start Date and my End Date — let's give myself a bit of time here.
And then I'm going to select the Status.
Now, with all of the data added to my form, I can now go ahead and Create.
Okay, now let's look at the database.
I'm going to go ahead and open Projects — and here we can see: Build AI App, with all of the information correctly captured.