[00:00] Let's take a look at how we can configure and use a dropdown list component in Ignition. We've all used dropdown lists many times. Where we can select a single option from a list of options. The dropdown list component is under the input tab of the component pallette. We can simply just drag it onto our window. Now the most important property of this component is the data property. It's a data set that contains one or more rows of data. Each of those rows are different options that we are going to see on the component. So let's go ahead and click on the magnifying glass on the table here to actually add some options manually. Now there really are three modes we can put this data set into. The first is what we see right now, and that is an integer string combination. So I have two columns. First one is integer, second one is the string. The first column is what we use behind the scenes. It's a code that we can use in binding. But the user will see the second column which is the label. So if I put these values to let's say one, five, and eight. And I put it to value one, value two, and lastly value three If I have these three options when I go ahead and press OK, I can go into preview mode here and I can select from that list of options. As you can see, I can only see the second column. If I click on value one, you will see that on the properties, behind the scenes, the selected value is the first column. The number that we have behind the scenes. The selected string value and selected label are both the same and that's the second column. So if I go over here and select say value three you are going to see selected values eight, and in the string and label is value three. So that's the first mode we can put this data set into. The second mode we can put it into is a string, string combination. Where we have two columns and they are both strings. So I am going to go ahead and click on the value here, remove that column, I'm going to add another column here clicking on the vertical plus icon. And I'm going to call this one code. I'm going to put it at the very first position and make it a string. So now I have two strings. I'm going to put this one as V1, V2, and then V3. So when I press OK here, again the user is going to see the same three options in the dropdown list. But If I select value one, as you can see here the selected string value now is what I'm going to use. Because that's the first column, as V1. Then the label is the second one. Click on value three, I can see V3 as the selected string value and then the label as value three. The third mode we can put the data set into is simply just one string. So I can remove that code and just have value one, two, and three. Again, same thing. I'm going to see those three options in there. If I select it now all I get really here is selected label, that's going to be that second column. Or that column, that string there. So those are the three options we can put it into. Now we can set these options manually ourselves, or we can actually bind the data set to a SQL query to bring back options from a database. So that's really easy to do. I can actually take a dropdown list on the window, I can bind the data property to a SQL query. And I can basically type a query in here for example I'm going to select the category ID and then the category name from our categories table. I order them all by the name in ascending order, I'm going to do this simply just once from our data database connection. Go ahead and press OK. And now, if I go here I can see all the options that came back from the database. If I select one of these options of course I'll see the ID as a selected value and then the string as whatever I've selected. There's another really cool option for the dropdown list in that we can show more than one column to a user. Let's take another dropdown list and put it onto our window here. I can actually go to the data set property here, and I can add some options manually. So instead of just having two columns here I can add as many as I want. We just need the first two to be either integer string, or string string, or just one string there. So I'm going to add a couple options here value one, value two, and I'm going to actually then add a couple more columns at the end here. So I'm going to add a couple more columns at the end. I'll call this one Col3, and add it to the very end. Make it a string, and I'll say hello and another string. Okay, so basically I have another column here I can keep adding more columns. So when I press OK, all I can see right now in the dropdown list would be that second column value one, value two. I only see one here. But there is a way to actually go down to the component and set it to the style, to a table. When I set it to a table I can actually show more than one column. So now if I look at this I can see the label and Col3 here. And so I can select between those different rows. So it is a nicer way to show more information in the dropdown list and there's a way of hiding certain columns. As you can see right now, I'm hiding the first column. Which is the ID. If I remove that, then I can actually see all the columns that exist in that data set.