[00:00] Let's take a look at how we can configure and use a dropdown list component in ignition. This component allows users to choose an option from a list of options, and it can be found in the designer. under the input section of the component palette. I will drag one into the window to demonstrate how it works. The data property of the dropdown list is the most important as it defines the dataset containing the list of choices in the dropdown. We can configure the dataset by clicking on the dataset editor icon next to the data property, which opens up the dataset editor. The dataset editor initially presents us with a two column dataset with the columns value and label. The value column is defined with the integer type and the label column is defined with the string type. I will add a new row to the dataset with the add row icon. The value column now has the integer zero as our dataset is zero indexed.

[01:08] The label column has an empty cell. I can add the string apples to the label column that represents the zero value. I'll add one more row and update the value to one and our label to oranges, and if I hit okay, I can go into preview mode and choose the apples option or row from the dataset we just defined. The value from our row is hidden and sits behind the scenes, so our option only shows the label. The selected value represents the zero integer we defined in the first column, and the selected string value represents the apple string we defined in the second column. The selected label represents the label option we selected. If I choose the oranges option or row the selected value updates to one and our selected string value and selected label update to oranges.

[02:05] This example showed an integer and string column dataset. It's possible to represent both columns in the dataset as strings. To do so, I can access the dataset editor again. Then I will delete the value column by first selecting into the column and choosing the delete selected column icon. Next, I will add a new column with the add column icon. Finally, I will give it the name, color, the type of string, and the position or index of zero. With the new column added, I will add strings to the empty cells representing the color of our label strings. If I hit okay and go into preview mode, I can choose our apple's option or row again. Now the selected value is undefined. The selected string value represents the value from the first column, and the selected label represents the value from the second column.

[03:03] The final dataset that can be configured is a single string column. Let's delete the label column in our dataset to see this. Since we deleted our label column, our selected string value and label represent the value from the first and only remaining column, which is color, and our selected value is still undefined. To summarize, we have covered the three orientations for configuring the first and second columns in the dataset, those being integer and string, a singular string or two strings. Every data set you create on the dropdown list must use one of those orientations for the first and second columns, and you can continue adding new columns as long as the first one or two are configured accurately. If I go back into the dataset editor, I can add a second and third column to the dataset. I will make the second column with the name of make and the type of string, and I'll make the third column with the name of model and a type of string as well.

[04:13] For my values, I'll enter Honda and Toyota under the make column and for the model column, I'll put in Civic and Tundra and hit okay to apply the changes, and I can change the dropdown display mode property to table to see all our additional columns. When making the dropdown selection, as you can see, continuing to add options to our dataset can become tedious. We can make use of an SQL query to build out our dataset. Instead. To do so, I will open up the binding on our components data property and then choose an SQL query. Here I can paste in a query which selects both the category ID and name from our category table.

[05:04] Then the results are displayed in ascending order. I can choose my database connection and run the query once to generate the new data set. If I choose the action option from the dropdown, my category ID or the first column is representing our selected value with the integer of one. The name of action represents the selected string value and the selected label. I can also display the category ID by removing the zero column value of our dataset from the hide table column property. To recap this lesson, we have learned how to use a dropdown list component and configure its dataset.