4 Different Ways to Use a Dropdown in Your Bubble.io No Code Web App

hello nikolai markovic from echo like technologies echolaketech.com in this video i'm going to show you four different ways that you can implement the drop down element in this first example here it's with static choices we're using days of the week and this next one we are using a search to also give the days of the week this third option here is using option sets for giving us the days of the week and then lastly we're going to walk through a data structure in which we don't have to do a search for getting the the days of the week now there are some trade-offs for each one of these scenarios here for setting up your drop down in this first one with the static choices as you'll see that you'll be typing in these values here so it's really is a static list you'd have to go in and manually update it within the element to change the list for this next one using search this is probably the most powerful and flexible way of providing the list in the drop down because we're going to be using a search for the different days of the week and this also allows you to put in some constraints so if you had a list of other items say cars or houses that you wanted to put in a drop down you could add constraints and so forth so it's a much more powerful mechanism using search to get your list this third one using option sets this one is is basically it allows you to go and create a list of options so the days of the week here for instance it also allows you to add other parameters within the option so just kind of going down here we have the days of the week and you can see these different colors here these are actually images just saying the days of the week as well but with option sets you have that opportunity to be more flexible and rounding this out we have the data structure approach here and with this one as you'll see in the database this one is tied to the the user this doesn't need to go and do a search in in the database because it's tied to the user and we'll talk a bit more about that in a moment i do want to do a quick refresh here because one of the things you'll see with the option set in the data structure because it's not doing a search in the database as opposed to this this right here it's going to load faster so from a performance perspective option set and data structure is the better approach so let's just do so you can see here that there's a bit of a delay here for doing the search and there it is before i continue on please subscribe to my channel and give me a thumbs up i do appreciate that and as a subscriber you will get notified of upcoming videos so let's go over here to the the design we'll start with static choices again for this one in the element we've got a choice of static versus dynamic and for static we simply just type in the values that we want like that and to get the element it's simply down here to drop down like that choose an option and you can change this to pick one like that and you'll see it show up static choices and then simply type in choice one choice two and so forth now for the next one dynamic choices uh we're using a search here and dynamic choices we're going to be picking a type of choice so from the the database the data structures i have day of week setup and now we're going to be doing a search for days of week right here so to get that just let me delete it do a search for you get this pop-up and then day of week i don't have any constraints on here but as i was mentioning earlier you could put in consumed constraints if you were having a list of vehicles or houses or whatever your list may be you could go in and add constraints and then the next thing here is current options so bubble is is good like this if you come over here it'll give you current option and then we're going to be picking the day and then for default value so similar to over here the default value is monday i just had to type that in over here we need to do another search again for day of week and then we're picking the first item and the first item just happens to be monday and if i come back over here you can see monday and that's how i get the default value so for instance just as a quick demo if i came over here and change this to tuesday and i went over and reran it my value here is going to change to tuesday i'm just going to do that to go back to monday and let's now take a look at the the data structure for this so i've got day of week this is my data structure and to do that now just type in test and then it gets created it's a day of week i've got day that's type of text and picture picture as a image and again that picture is simply these in colors here these are actually images even though they say monday tuesday wednesday and so forth and let me just come back down here to test so for test create a new field and then day of week it's a text and then we have the picture and that is simply an image right here so that's how we set that up i'm going to delete it since i'm not using that data structure uh let me go back here to data for a moment so now we're going to go to the app data and just to show you so the day of the week i went in and i created these um different days and if i click on the little pencil here it'll open up and i just simply went in and if i click on this here it will pop up the folder that i had for the different images and then the day sunday as a text field and so forth so again in in your app um of course days of the week there's seven days uh in the week in your app you may have a dynamic list again vehicles houses whatever it may be so this list could be longer and so that's a powerful way of using using a search here so you can grow your list dynamically but there is a performance hit for for doing that and that's how we set up the dynamic version of the drop down menu this next one is using option sets and again choosing an option default value dynamic choices days of week okay so for this one one thing to point out to be aware of so and we're going to get in a little more details in a moment the the data structure of day of week that i just showed you which is right here that's a data structure in the database for option sets okay that's slightly different so it's not day of week after the list of all these data structures scroll down you see days of week so if you go in my data structure and i'm just going to pop over there because this is an important thing to be aware of zoom is my last data structure so over here my last data structure and then it flips over bubble flips over to the option sets so you want to pick days of week current option is display again bubble is is good about doing this so if i just delete that bubble will tell me current option and then display in display you'll see in a moment is the name of the the day of the week and then the default value similarly to get as we did with the search over here we did the search first item over here is going to be the option set days of week and then picking the first item so days of week and first item and that's how we set up the option sets i'm going to come over here to data to show you how to set this up so we had data types i showed you the days of week the app data associated with it now for option sets you want to click on this button here option sets so i've already created days of week right and within days of week i have a picture so that's a picture that just basically says the day of the week in the different colors and then display in display is going to be these labels here these option names here so to do this we're going to create i'm just going to do an attribute here so uh test and i just got all that enough type text like that so now when i come down to modifying attributes actually i take that back before i'm jumping ahead to create each one of these days of the week i want to do a new option so i'll call it any day create that so we've got any day and now i can go in and i can modify the attributes again those attributes so that's the name any day loading a picture i can go in like this and test i'll just type in text field all right so now if i go in in any day it's got those values associated with it so if i look at and i'm just going to delete that for now so monday got monday here in the picture again monday is a picture and then i'll save it so that's how you set up the the option sets it's a little bit different than the the data structure and i'm just going to delete test here but that's how we set it up so we come over here we create an option set bubble will open this up over here for days a week and then we can create attributes and then we come down here to add the options the days of the week so this is while in the drop down here we treat it as a dynamic because it's a list of dynamic values because we have to come over here and we're creating a list and i just let me just go and delete this and i'll show you quickly so test great test over here picture for the picture and that's going to be an image like that and then i can come down here and do so let's call it attribute one or let's say yeah let's see here uh entry entry one recruit that and then we can modify what's in there so entry one we can add the picture and so forth so now that's available this option said test is now available and we've pre-loaded it with this this data now let's move over to this last choice which is using again dynamic choices day of the week now notice i'm going to highlight this again because it is an important nuance this day of the week is part of the data structure if you actually scroll down here you see days of week and that's the option set so make sure you choose day of the week from the data structure versus days of week which is an option set and again when we did the search here it's searching the database day of week and here it's going to be current users day of week and the reason why it's current users day of week i'm just going to jump here to the the data structure to users actually before i get to users day of week right we walked through this a few moments ago we got day in picture and now we have user and we have day of week as a list of days so basically as a user i have this data field day of week which is of type a list of days of week so to do that i'll just do a quick test here i'll say test day and this is going to be days of week and it's click on this box here and create it and now we have there's a test day as a list of days so that's how you set it up for under user uh let's see where did it go here so days day of week and now by setting up the data structure that way when i have my drop down it's going to be current users day of week so you see all these different choices in the data structure day of week and then again bubble gives me current option as a default and i just pick day and then current users day of week again first item now i picked user because it's kind of straightforward in in easy and whatnot um now you could have again if you had vehicles you could have the different in your database you can have different truck types car types and so forth and if you set up your data structure so that there's a list of cars or a list of trucks that are under a a custom data type so say i had vehicles as a data type in in vehicles i could have trucks my cars list of trucks list of cars and so forth then that would allow me to use the same approach so instead of user it would be vehicles and then trucks cars and so on and so forth so you wouldn't have to do a search and that will help you from a performance perspective because you're not going to be doing searches a couple other things to note on this so as i mentioned doing a search it's very powerful very flexible you can put within the search you can also put constraints and so forth but it is a performance hit with option sets you can see over here as with the data structure with the option sets i can put other different fields in there so i can put pictures i could put number fields i could put other text fields and so on and so forth so it gives me a lot of flexibility the thing is is that it's it's not a search so i have to go in you have to go in and add more more fields here okay so one thing with that let me just do a refresh so a behavioral thing between option sets and doing a search or making a change in the the data okay let's do a refresh here okay now what i'm going to do is i'm going to go in and change one of these in the database so let's go to app data and days a week so i'm going to go and change this sunday to sunday xxx like that i'm gonna save it i come over here you see sunday xxx sunday xxx because i'm doing a search from the database sunday xxx because i'm a user and within user i have days of week in my data structure okay so i didn't have to do a refresh the database update happened automatically to contrast that with option sets if i come over here and do the similar thing with xxx okay now i have to do a page update and when i do the page update you'll see that the xxx is there so that's just another thing to understand the difference between option sets and fetching data from the the database either via search or the way your data structure is hopefully this video was helpful again please give me a thumbs up and subscribe to the channel to get notified on future videos if you have any questions leave me a note down in the comments below thank you

Channel: Echo Lake Technologies

Views: 3,413

Keywords: bubble.io how to, bubble.io training, bubble.io courses, create an app, apps, bubble.is course, bubble.io, bubble app, echo lake technologies, echo lake tech, echolaketech, no code, web application

Id: 0Dr9J8ZROnU

Length: 19min 1sec (1141 seconds)

Published: Sat Feb 27 2021