In this bubble tutorial video I'm going to show you how you can allow your users to add a value to a drop-down and the example I've got here is a quick form for building a movie database and I've added in a drop-down for genre. So what if I wanted to allow my users to add in maybe a subcategory of sci-fi like hard sci-fi for example.
Setting up Dynamic Choices
So let's go into the editor and the first thing I need to do is change it from static choices to dynamic and I need to set up a data type for genre. Now this is an app that I've created a lot of demo content in so ignore most of these. We're going to just go ahead and create genre and then I'm going to add in a field and just say label that's going to be a text and now my choices are going to be of data typed genre and then it's going to be do a search for all of the entries in my database for genre and we could even do sort alphabetically by label and then go back to it. I need to say to display to the user what did we print to the user to represent the entry in our database we add in label.
Adding Manual Entries
So go back to data I'm going to add in the examples that I had. I'm going to do it manually now. I need to consider when I do this that this is data entry manually through the bubble editor into the version database that I'm currently using. I'm using my dev my version test and you might want to consider how you would then go ahead and populate the live database. You can always copy and restore between the two databases but just be really careful to read the fine print there of what exactly is being overwritten. But right now I just want to write in comedy, rom-com, and sci-fi.
Previewing the App
Now if I preview the app you'll notice it's basically the same. It's technically changed because it's put them in alphabetical order which they weren't in before, but this is now retrieving values from the database in order to populate it.
Adding User Input
Going back to my editor, I'm now going to add in the ability for users to add values in. So first of all, I'm going to be on my plan is to add a plus button in here and then use a pop-up to add in values. So I'm going to add a row container onto my genre label and change this from a hundred percent width to say 50. Now I'm going to add in an icon plus. There we go, make it a bit bigger say 24x24.
Creating the Pop-up
Now I'm going to add in a pop-up and I'm not going to bother well I'll do a little bit of nice styling here. So this is how I style pop-ups: add in text and we'll say Add a genre and an input and a button. Okay, I'm not paying much attention to making this look good right now. This will be Genre and this will be Type here to add a genre and it should not be empty.
Setting up the Workflow
That's the workflow to this button. So when this button is clicked, we're going to create a new genre and its label is going to be the input value. We're going to reset the inputs in case they want to add another genre, and then we want to hide the pop-up. The last bit to do is to show the pop-up.
Previewing the Updated App
That's it! Now, let's preview the app. When we click the plus button, we can add a new genre. For example, let's add hard sci-fi. After clicking Save, you can see that hard sci-fi has been added. I'm going to make a couple of UX improvements to this. One is that when the plus icon is clicked, I am going to set focus to the input element so that when the pop-up loads, users can type straight into the genre field. I'm also going to add a custom state to the database.