Save Complex Dropdown with airSlate SignNow

Save complex dropdown

hello everyone my name is I'm Scottie and today I'm going to show you how to use the option button or as it is more commonly known as the drop-down button let's start grading our new project here the goal of this video is to teach you how to add items add separators remove them again how to disable specific items inside the wrap done how to change the item text on certain items how to clear all the items how to collect it with a signal so when you select an item something happens what that is is really help to you and how to keep track of them if they were objects so if you had for example custom classes that you wanted to associate with each item and lastly how to select an item fro code so let's start getting our main scene here I'm gonna use the control node I'm going to rename this Lane I'm going to make sure to set the anchor points to the end on both the right and bottom scrolling down to find a margin setting it to zero pressing girl s to save and save okay so we have our scene prepared somewhat now so let's start with getting our drop down low let's find option button there it is perfect okay so first thing we'll do is bring the name is do something less confusing drop-down and let us start by creating a script in the main create and let's remove all the commenting and let's get ready to begin here okay so how do we get our drop down well there are several ways of doing it this is the way I prefer I will just export which expects a note pad type named drop-down hat then I will use the drop-down path to get to note on ready var drop-down equal get note and that's where I insert the path erupt out let's enter past so we don't get an errors and a select main and select our drop-down then let's go back into script and I start by adding items so let's create a function called add items let's remove paths and create the function let's start by creating four or five items here and that is done by using drop down load dot add in the score item and then a string I'm gonna name it item one and then I copy and paste this a few times renaming is accordingly and let's take a look at no main team has ever been defined we'd like to select one yes I would there we go let's hit the play again and now we have five items in our drop box now let me show you how to create a separator so drop down and underscore separator and this will simply add a separator after one so we'll have a separated line now this separator takes up an ID which means item one has an ID of zero the separator has an ID of 1 which means item two has an ID if two and so on is something to keep in mind there okay so how do I remove an item from this let's create another function air item let's name it remove item and then let's insert an ID so this is just yeah lets me enter one which will remove our separator here let's create the function name the argument I'd be and let's use drop-down dot remove underscore item and then insert ID into it which is quite simple and straightforward so let's say the play now and if everything is expected this red it will be gone and so it is so how do I disable an option let's say I had an option but it wasn't unlocked yet or maybe it's unaccessible or even unfinished so how do I prevent an item from working well let us create a new function called a disabled item and let's insert an ID let's disable our first item which is item one here let's copy that I create the function down here takes in an ID which we use to disable it using drop down dots set height them underscore disabled and then you have to insert the ID and a boolean to true let's hit play and if everything works as expected I can one will no longer be selectable you know what let's not use item on let's use item five which will be zero one two three four hopefully that's right yeah that's right so now I think five is no longer selectable what did I want to change the text to item five and want to do right disable the running well let's add another line here let's use the drop-down and use the set item text function unless you name it disabled let us not forget to use the ID and hit player perfect okay so what about to remove all items for some crazy crazy reason well let's clear or let's create our own function let's go it down add some nice commenting here clear or and the way we clear everything is by using cool air and that's just that's all you need let's hit the play button and if everything works as expected there will be nothing in the list and it's all gone okay so that's how you clear it I'm gonna comment this so let us start by connecting this which means whenever I select something I want something to happen now what that something is is really up to you now in order to create a signal or rather a connection with our function you have two options one is to select the drop-down itself find a node tab and select signals and then you find item underscore selected and double-click it which will allow you to select the script that you want to have the connection with so hard hit press connect now if we create any method called on drop-down item selected and then taken an ID but I will also show you the the method from code so so let's start by creating our collection from within the code so setup collection has use drop-down dot Connect which will connect the signal that drop-down is going to run named item selected and this will figure a method on our self named um item changed actually selected there we go let's copy that let's go all the way down and create our own function called an item selected and let's not forget it takes in an ID let us print the item name that has been selected and that is done by using drop-down dot get item text and then you insert the ID which will return the item text let's select item 4 and as you can see it brings the name of the item you can now do things when you select the item how do you keep track of the items now a method to keep track of the items is by creating an array so if you have let's say you have an array of objects like fruit and inside fruits you have apple oranges and so on so let's create an array now Apple orange what else you have apple orange mmm I mean a lemon so we have this array now if you were to have an array or a list containing more complex objects you can use the same method as I will demonstrate using this array this adrenal is fruit array I have commented add items because we are now going to add fruit items so whenever we select an item from the drop-down we are going to use this array to get the current item that's selected so let's start by getting a function called add fruit items let's go to it down here let's find at the air list let's having fruit items to drop down so we have func adds fruit items so the way we're going to add the fruit items to a drop down is by using a four so for item in the fruit array which means for each iteration movement we're going to get the item or object from the fruit array so we're going to append the name of that item to drop down on each run so this loops until it has reached the end of the fruit array so we are dropped down dot and control item and I'll just insert the item now the class item is just a string in our case we don't have to use a function inside the item if this was a lot more complex object you could probably have a function like item dot gets name and then you would attempt the drop down to be the name of the item but because it's not some complex objects just an array and this is just a string we are just going to use this method so if I hit play now we are gonna get fruits apple banana lemon what are we missing one I think we're missing one here hold on here Apple where's orange oh yes we removed an item that's why let's remove that and let's hit play again so now we have fruits here how do we make sure we run a object when you click this currently we are just printing on the name from the drop-down text itself which is not very helpful because we don't know what item it is except we kind of do cuz we have an array right here and they are sharing the IDs so fruit array ID 0 is an apple and that is also this case for our drop-top because we are adding it in order which means I could just print the array using the same ID as the item selected let's use the fruits array let's insert our ID and let's hit play again and the select orange and there it goes now this would work perfectly if you were not to manipulate our drop-down if you were to remove an obeah right now if you were to remove orange if you'll be old messed up basically the IDS for each for the rock down rather which change and wouldn't match our own a big list so how do we keep track of that well that is why we have functions here and don't just directly use remove item because when you remove item not only are we going to remove the item from drop-down we also gonna remove it from our array so that is somebody using fruit array dot remove and the same ID so if an hour to uncomment our remove item here let's hit play let's let lemon and it still seems to work now let me um let it comment this out and you can see what would happen if we didn't were to do that it's like lemon oh no it's banana what's this I would blame them what an orange it just makes sense and it'll probably confuse you so it is important to control when you add and remove items when you associate them with objects now once again this is not a complex I'll bet you would have a complex object it could be you know class one and in this class one you may tell me man I had a function call gets name or get a description or something that you want to print out when you select something and lastly how do we select item from a code well currently when I hit play we have Apple selected but what if I don't want that what if I want lemon to be select from by default well lemon is zero one two three well let's just select a default item before we remove it though otherwise it'll be all wrong select item so item D now select one two three create the function down here that's here that is under fruit items here so let's create it here funk select item by D another song by using drop-down shockingly enough for her select and then ID let's hit play and now we are lemon selected by default from within the code and it all works perfectly and want a tick in mind also options in the X inspector you can set the default select button here so if I were to select off yet I can't and there you have it thank you so much for watching this I hope this was helpful to you if it was hit like button subscribe if you haven't already and I'll see you in a future video bubbly