---
title: "Dropdown List Example"
---
# Dropdown List Example
>
>
Dropdown lists are used when you want to select a single item from a list of options. The Dropdown component is under the Input section of the component palette. Simply drag it on to your window. The most important property of a Dropdown component is the Data property. It is a Dataset that contains one or more rows of data. Each of the rows are different options that you see on the component. Select the Dropdown component and click on the Dataset Viewer icon for the **Data** property to manually add some options.
There are 3 ways you can use the **Data** property’s dataset: a number/label pair, a single label column, and a code/label pair. Which mode is used depends on what columns are in the **Data** property’s dataset, and will determine the values of the **Selected Value**, **Selected String Value** and **Selected Label** properties. Any additional columns that are added to the dataset will not affect these properties.
In the first mode, the first column is an integer (often an id) and the second column is a string (often a label). The first column is the **Value** column which is invisible to the user and is usually used in binding. The second column is the **Label** column and is visible to the user in the dropdown list.
In this example, the dataset has 2 rows. Under the **Value** column, you see the integers '**1**' and '**2**' respectively. Under the **Label** column, you see the '**Realtime**' and '**Historical**' options.
In **Preview Mode**, select from the list of dropdown options. Notice, you can only see the options in the **Label** column. Select the '**Realtime**' option. You can see under the Data property section, the **Selected Value** is '**1**' which is the first (integer) column in the dataset and is not visible to users. The **Selected String** Value and the **Selected Label** are the same and show the '**Realtime**' option which is the second (string) column in the dataset.
The second mode you can use is a string/string combination which are 2 columns that are both strings. Remove the **Value** column from our example by selecting a cell in that column and clicking on the vertical x icon. Add another column by clicking on the verical plus icon. Call the new column '**code**,' set the column position to '**0**' and make it a '**String**.' Both columns are now strings. Under the '**code**' column enter '**v1**' and '**v2**.' Press **OK**.
Because we added the '**code**' column in position '**0**,' the users will see the same 2 options in the dropdown list: '**Realtime**' and '**Historical**.' If you see '**v1**' and '**v2**' instead, that means your '**code**' column is not the first column.
In **Preview Mode**, click on '**Historical**' and you can see the **Selected String Value** is '**v2**' because the value is in the first column and the **Selected Label** is '**Historical**.'
The third mode you can use is simply one string column. Remove the ‘**code**’ column and keep the ‘**Label**’ column the same. Again, you are going to see the same 2 options in the dataset viewer: ‘**Realtime**’ and ‘**Historical**.’ Note, that this only applies if there is exactly one column in this dataset.
In **Preview Mode**, select the ‘**Realtime**’ option. You will see the same value in the **Selected Label** and **Selected String Value** properties since there is only the one column.
Now, you can set these dropdown options manually or bind the Data property. In this example, you can take a Dropdown List on the window and bind the Data property using a SQL query.
Click on the binding icon for the Data property. Select the SQL Query Binding Type and type a query that brings back an ID and Name from one of your tables in the database.
Click **OK** to see all the options that came back from the database. In **Preview Mode**, select any one of these options and you can see the **Selected Value**, **Selected String Value**, and **Selected Label** as shown in the following example.
Another feature of the Dropdown component is you can show more than one column to a user. Drag another Dropdown component to your window. Go to the Dataset viewer and add some options manually. Instead of having only one or two columns you can add as many as you want. The first column needs to be either an integer or a string. Any additional columns will show up in the dropdown.
Open the Dataset View, under **Value**, enter ‘**1**’ and ‘**2**.’ Under **Label**, enter ‘**Realtime**’ and ‘**Historical**.’ Add another column and call it ‘**Col3**’ and make it a string and enter ‘**This is real**’ and ‘**This is historical**.’
Press **OK**. Go to the **Property Editor** > **Appearance** and set the **Dropdown Display Mode** to ‘**Table**’ to see both columns.
Now you can see **Label** and **Col3** and select between those different rows. It’s a nice way to show more information in the Dropdown list. The **Selected Value**, **Selected String Value**, and **Selected Label** properties will behave the same as previous examples ignoring any columns beyond the second.
