Creating A Dropdown

Dropdown lists are a great way to allow a user to pick from a list of items, while keeping the UI elements to a bare minimum. In this article we’ll go over how to add and setup a dropdown list to your Airkit application.

This article assumes you’ve already reviewed how to create and edit applications in Airkit Studio.

Create your dropdown

Start by creating a new Airkit application (or editing an existing one):

1. Once your application is open in Studio, go to the Web Page or Container you’d like to add a dropdown to.

mceclip0.png

1. Click on the '+' button on your Web Page or Container to add elements to the card view, and select: *Container / Web Page → Dropdown List

*

Now that we have a dropdown, its possible to customize it's styling within Inspector > Style. There are a lot of ways to style a dropdown which we won't go into full-detail here, but below is a simple example where the Arrow has been made blue with a grey background.

If you're interested in learning more about styling, we recommend looking at our documentation on Themes and Control Variants.

1. Let’s dive in! The main properties' sections for a Dropdown list are: .png)

   • Control Properties

   • Data Binding

Control Properties In the control properties section you can set up the variable you’ll be saving the selected option to (value) as well as the text shown to the user when no option has been selected (placeholderText).

_variable_to_save.selection_to_ needs to be a valid variable i.e. it needs to exist within your application. If you are not yet sure of the scope you need for your variable, it is ok to use session while you build (not recommended for published apps): session.variable_to_save.selection_to

Please review your variable scope to make sure you’re using the appropriate variable scope.

1. Data Binding In the Data Binding section, you can control the data used to populate the dropdown list and how it’s displayed to the user.

• Data is the List of items that will be shown as a list when opening the dropdown. You can hard-code a List or use a Data Flow to query an App Object and display a List. The above example displays contains a hard-coded List for the Dropdown.
• Display Text is the value that reflects what will displayed. In simple examples, the value should be "item" to reflect each item of the Collection / List provided to the Dropdown.

• Value Text is the value that is saved when the app user selects an item from the Dropdown List.

• Selected gives you the ability to control whether the value selected is displayed to the app user. This field evaluates an expression where if TRUE, will display the value to the app user. For a more-detailed explanation, see Dropdown List Control.