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.
Start by creating a new Airkit application (or editing an existing one):
Once your application is open in Studio, go to the Card View you’d like to add a dropdown to.
Click on the '+' button on your Card View to add elements to the card view, and select:
Form → Dropdown List
Now we’ll configure the Dropdown List.
Let’s dive in! The main properties' sections for a Dropdown list are:
- Control Properties
- Data Binding
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.
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 array of items that will be shown as a list when opening the dropdown. You can hard-code an array or use a Data Operation to query an App Object and display the results. In this example we’re displaying each item
Value Text is the text value of the item (it can be left blank)
Selected gives you the ability to control whether a specific value should be selected by default, as well as how the item selected is shown. When left blank the placeholderText value will be shown.
Item Name is used to define the name you’ll be using to refer to each entry in your Data array. You can use the default name ‘item'.
Index Name similarly to Item Name this property allows you to configure the name you’ll be using to refer to the Index of each item in your Data array. You can use the default name 'index'.
Collection Name is the name you’ll be using to refer to the actual collection of items in your Data array. You can use the default name 'items'.