Adding a data to a dropdown

Adding a Data Type for Genre

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. 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. I'm going to show you how to do that in this tutorial video, but before I do that, quick plug for our website planetno-code.com. If you're enjoying this content and these videos you can like and subscribe on YouTube, but you can only access all of the videos we've ever made at planetno-code.com.

Setting Up the Dynamic Drop-down

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 oops go back to it, I need to say to display to the user what do we print to the user to represent the entry in our database we add in label.

Populating the Genre Database

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. So 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 Functionality

Going back to my editor I'm now going to add in the ability to 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 100% width to say 50 and now I'm going to add in an icon and plus there we go make it a bit bigger say 24. Okay 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. I'll add in text and we'll say add a genre and an input and a button.

Creating the Workflow for Adding Genres

Okay I'm not paying much attention to making this look good. Right this will be say and this will be type here to add a genre and it should not be empty. So let's add 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 input no genre no type I'm wanting it to be this one input type here. Let's try that again. Input so I'm not seeing it now this is perhaps a bug I'm going to refresh the page to just see if that's a bug. I do like to leave these instances in our videos because it can kind of highlights them basically what I do if something goes wrong.

Troubleshooting and Completing the Workflow

So I'm waiting for it to load back in and clicking on the workflow it's just taking its time to load it I'm going to be patient with it. I'm going to refresh it one more time. Okay I'll try and get into it from here. So then the next thing that I would do is I'll check status public status page and see if there is an issue. Not that I can see. Oh it's loaded back in that fine right that was a bit of a detour. Let's just hope we get the input now. Input yeah still not getting it what input text input I mean completely rename it input genre. Right okay mate right if I've missed something leave it in the comment below. I don't think I did but anyway we're saving that now and then we want to reset inputs in case they want to add another genre yeah and then we want to hide the pop-up.

Testing the New Functionality

Last bit to do is to show the pop-up and that's preview. So it will click the plus and then we'll put in hard sci-fi click save and you can see hard sci-fi has been added. Now 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 focus set focus yet set focus to an input element so that when the pop-up loads they can type straight into the genre field.

Enhancing User Experience with Custom States

I'm also going to I want to make it so that when they close the pop-up the genre is the one that they just added. I think I need to use a custom state for that so I'm going to have a new custom state on this page and a custom state is basically a temporary way of storing data. It's not being saved to the database if the user refreshes the page the custom state is lost. Now that I'm going to add into here new genre and make of type genre so that then when the genre is created I'm going to set state of my page new genre to the results of step one. I'm going to move that up to here just so that there's not kind of any flickering or delay and then on the genre I'm going to say default value is my page so form demos custom state new genre like that.

Final Testing and Considerations

Let's try that now. So I need another genre historical. Click save and historical has filled in with the field. So there you have it that's how you can add in values to your input. Now a few things to be aware of you're going to need to think carefully about your privacy rules here and you'll also want to think about do you want your users to be able to add say this is a site-wide data type do you want your users to be able to add data types themselves in here you could end up with duplicates you could end up with inappropriate content all things to bear in mind any questions leave them down in the comment section below.