How to create a multi-select drop-down list in bubble.io without a plug-in

hello my name is sarah from nippybarai and welcome to this new tutorial in this tutorial i will show you how you can create your own multi-select drop-down field without any plugin in bubble i hope you like it stay tuned and happy low coding [Music] hello and welcome to this new tutorial in this tutorial i will show you how to how you can create a multi drop down element um so that you can give your users the possibility to chose several options in a drop down field and i will show you how to do that without any plugin within five minutes all right let's see we have this drop down field over here this is the standard bubble drop down field so you have a list of options but you can select only one and you also have some limitation when it comes to customization and on the other side this is the one we created so here you can have you can choose several options you see the ones with which i've chosen this is for demo purpose you may do not need that and also you can have complete flexibility when it comes to customization and i will show you now um how to do that because it's not that complex actually all right let's go into um our design so here on the left side we just have this normal bubble drop down field where i show all hobbies hobbies is an option set in my case so i'm just selecting this option set and say i want to show all hobbies nothing nothing fancy about this so let's have a look at the other ones so in order to build such an element we do need a group a group which contains um like this element here so which kind of contains this border item here and also the text as well as this icon and um this is exactly this group and how did i design it so i just said it's um it has a white background you can obviously change that um to fit to your needs and i said i have this and at the bottom i have one border with a 2 pixel width with this color obviously you also can change this as well and i will explain the condition conditioner formatting a little later when i explained the other items and within this group if i open it you can you can see there's one text field saying choose hobby which i designed in the same way as this drop-down menu so i used here um roberto 14 pixel with this font color obviously you can use whatever you want to and here within also within this group there's one icon i used material icon here you can also use the bubble default icons and it has 20 height and 20 width and it has the same color as the font here so that it kind of fits together and that's that's basically it for the group and and now comes more interesting part is i created here a group focus so a group focus is always belongs always to another element it has this reference element here and it always gonna stick to that and the group focus per default is also not visible so i have to also make it in a workflow visible and i will show you how to do that as well and i have chosen a group focus here with the same width as this element here and the height of 100 you can also change this as well and the offset left i left at zero because i want to have a white uh below this this group here so this kind of a drop down menu and but i set your offset top to four because i don't want to um have it stick completely together so i like to have some some space here and this is the space you can see here so that you still able to see this border and this border and it's not it doesn't it's like squeezed or something um yeah so this is the real focus from style perspective i used um a kind of grayish background color here and i also set a very grayish border for all border styles here as well but that's not the important part what's more interesting is that uh within the group focus i made a repeating group and this repeating group is also as this drop-down menu has type of content hobbies the option set and it's showing all hobbies and i'm saying that with 100 pixels this is just absolutely the same size as the group focus and i have three rows and i want to have vertical scrolling and that's the one you see over here that i can do some kind of scrolling obviously you don't if you don't want to you can have other options but um i liked it this way and what's not special about this is that with with pin within this repeating group i made another group which fits also very well so one group here is 249 has a height of 33 so if you have free and it's 99 so it fits together and in this group i have this text field to show the actual hobby of this cell and and this is important to understand i have not used checkbox element i have rather used a checkbox i can from the material and i can design you can use other icons but um from a usability standpoint it makes more sense to have something similar as a checkbox and um i did this big to have more flexibility when it comes to design obviously you could also choose normal checkbox element but i decided to do it this way what i will show the conditional formatting also in a second before that you may have seen that there there is like white gray white gray um and i like this very much and this is very easy to do um so here on this group there's a conditional formatting um that two actually so um i'm using this module function here so whenever something is uh is divided by two is the remainder um a one or is it another one and so i can say that whether the number is even or i think that playing a little bit better and and in this case the one is is odd yeah odds and therefore it's white and for the other one which is then even because it's true and this condition doesn't fit so that's why here this background where where dancing currently is is the normal background of the group focus and only for all the odd ones this condition now makes sense i hope you understand what i mean and the other conditional formatting i've chosen here is just a hovering um functionality when i hover it at some kind of gray just also being shown here obviously you don't need this if you don't want to but i like it very much all right um maybe one more conditional formatting before we can come to states and workflow here and i also have decided to have this border color in kind of greenish when this group focus is visible so i like it to have that if you are clicking it and this is like visible and the user can select from here that there's a green line and i can do this if to say if this group focus is visible then this color is green and i also made some transition here so that it's not a complete or a direct a change of the colors but rather an ease transition i used for this border color bottom east one with 200 milliseconds it's just a default value and it fits very well obviously you can change this as well okay so now um we have all those elements but they do not work yet because they don't have this workflow which sticks them together and the first workflow um is the one where if your user clicks on this group the group focus is being shown and this is a very easy workflow and i will show you how i did that so i should take this group and if a user clicks on this group and the group focus will be toggled in the other way in other ways it will be shown it will be visible and with this target functionality i don't have to care about whether show or height show or height it just does that for me so that's why i'm using toggle and with group focus very much i think it's very handy and yeah so if now i use that clicks on this group um the group focus string show so that's that's very easy as you can see and now what's next um so in this case we have to work a little bit with states and there are two additional states here and the one is also in the group hobby uh drop down you could also do it somewhere else but in this case i think it makes sense to have it here and it's the selected hobbies because i need to somehow count which hobbies or in other words which items the user has selected and you want to maybe use this date if the user clicks on save somewhere else to save it directly in this object or in my case um i used it here to show you actually and that it's working yeah so with this uh state you are holding the options the user have chosen from in this multi dropdown field and i will show you how to do that so if the user clicks now on this checkbox that's the one here right and there is also a workflow and i will show you how to do that as well so if the checkbox is clicked and this this was not clicked before and this is very important to understand is that we have to um have two cases the first one is the check box is not checked and now it's checked and the check box was checked and now it's no longer checked because as you can see here in this list you need to edit and remove it edit and remove it and this is exactly this case what we're going to do here with when this checkbox is clicked and this icon clicked is no and because of the fact that this is not a checkbox element i need to make a con need to make a state here as well we just said clicked yes or no i could also use checked that's just a naming preference but i need to kind of say yesterday yes this one has been clicked or this one has been checked to say it in other words or not and the default value here is no and i will explain this in a second let's finish this so i'm saying here if this checkbox is clicked and this i this the state is no so it was not clicked before then i say okay this custom state to yes because now it's clicked and um i will put this hobby because i'm working in the context of a hobby i will put this to the list of selected options to have always this list of what do you which you which options the user has selected and important fact is that you do not want to just add this value here you want to set this value that whatever is already on this list add this current item this current option also on this list um yeah then terminal workflow so that nothing else happens again as well as with the other way around so if this one has already been clicked it has already been chosen and now i want to deselect it then it's the other way around so the checkbox is clicked and this materials i can click is yes so the status is yes then i say to no because now it's no longer clicked and i also want to remove this item from this current list right because otherwise it's still in the list of selected options even though the user unselected it and this state is also the one i'm using here to change this icon and this is actually the whole magic of letting these check boxes look like check boxes even though they're icons so right so normally that's this icon over here and if this this state has been changed to a yes so in other ways if it's clicked then i choose another icon you can choose whatever i can you want to i think it makes more sense to have this icon so it looks like a check check box and i'm also changing the color here and obviously you don't have to but you can and um yeah this is it uh it seems complex but it's actually not and the good thing is that in your projects you can create this one time and then either use it as a reusable element or save it somewhere else so that you not have to do it over and over and over again but you are completely free when it comes to customization um you can yeah use them without any plugin in plugins and now you have a complete understanding how it works and i hope this brings you joy and it was helpful for you and your application and if you want to have more tutorials don't forget to hit the subscribe button so that you won't miss any videos and if you have some suggestions questions or comments just drop me a message or put it down in the comment section and i'm happy to see you okay bye

Channel: Biberei

Views: 317

Keywords:

Id: TZd_54U-34M

Length: 16min 37sec (997 seconds)

Published: Wed Oct 13 2021