Comment on page
DropDown
The DropDown widget is used to allow a user to select from a list of items. You need to provide it with a list of items to display as options and an initial value that represents the currently selected item. When a user selects an item from the dropdown list, the value is updated to reflect the selected item.
You can use this widget in any situation where you want users to select from a set of options, such as selecting a country, choosing a language, or picking a color.
DropDown widget
Let's see how to add a DropDown widget and build an example that shows the selected value on a Text widget. Here's how it looks:
Dropdown widget
- 1.Add the DropDown widget, move to the Properties Panel > Define Options > click Add Options to add items.
- 2.To display the default value, move to the Initial Configuration section and enter the value. Ensure it matches one of the options added in the previous step.
- 3.The selected dropdown value can be accessed via Widget State > DropDown. To display it on Text widget, add a Text widget, move to the properties panel, click on Set from Variable and choose the Widget State > DropDown (i.e., name of your dropdown).
Adding DropDown widget
Setting a default or initial value for the DropDown is a common requirement for many apps. It can provide a better user experience by pre-selecting the most likely option.
To set an initial value:
- 1.Select the DropDown widget > move to the Properties Panel > Initial Configuration.
- 2.In Initial Option Value, enter the option name that you want to set as default.
- 3.To set this value dynamically, open the Set from Variable menu and select the variable.
- 1.For example, to set this value from Firebase, ensure you have access to Firebase document that contains the field you want to set.
- 2.Open the Set from Variable menu > select [collection_name] Document > select the field.
- 4.If you don't set the initial value, the Hint Text will be displayed.
Setting initial value
You might want to save the dropdown value as soon as the selection changes. This approach is useful when you want to ensure that the user's selection is immediately saved without having to wait for them to submit the form. By doing so, you can provide a better user experience and reduce the risk of data loss in case of any interruption.
You can do so by adding an action such as update app state, update Firestore record that triggers when a selection changes on this widget.
Saving DropDown value on selection change
Sometimes you might need to populate the dropdown options from the backend, such as Firebase.
For example, in an e-commerce application where you want to allow users to select a category of products from a dropdown. You can fetch the categories from the Firebase collection and populate the dropdown options dynamically. This way, any changes made to the categories on the backend will automatically reflect in dropdown in the app.
Here's how you do it:
- 1.First, ensure that you have created a collection and query it on any widget above the DropDown or a page.
Firestore collection
- 2.To show options in dropdown, select the DropDown widget > move the Properties Panel > Define Options > open Set from Variable menu > select [collection_name] Documents.
- 1.Set Available Options > Map List Item to convert the list of documents into the list of field values that holds the option names.
- 2.Set Document Properties to the field that contains the options name.
- 3.Set the next Available Options > No Further Changes.
- 4.Click Confirm.
Showing dropdown options from Firestore collection
You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
The dropdown widget allows you to show a label than the actual option value. By adding the option label, you can have a simple/short name or abbreviation (which is quite easy to compare and process in the backend) instead of a tricky name (e.g., Falkland Islands (the) [Malvinas]).
For example, In a Country dropdown, you could have different Option Values to store in the backend and Option Labels to show in the dropdown list. Just like below:
Option Values | Option Labels |
|---|---|
US | United States |
IN | India |
FK | Falkland Islands (the) [Malvinas] |
To show option label:
- 1.Select the DropDown widget, move to the properties panel, and turn on the Add Option Labels toggle.
- 2.Enter the value in the Define Option Values and Define Options Labels. Click Add Option (below the Define Option Values) to add more values and labels.
- 3.You must also set the Data Type for the values. For example, if the values you are going to store are in numbers like 1,2,3, set it to Integer.
Showing option label
The DropDown widget is a good choice when you have a small number of options, up to around 10-20, however, If you have more options than that, consider using a searchable dropdown.
A searchable dropdown allows users to search and filter options by typing in a search bar. As the user types, the dropdown list is dynamically filtered to only show matching options. This is especially useful when dealing with long lists of options and can improve the user experience by reducing the time it takes to find and select an option.
Searchable dropdown
To make the dropdown widget a searchable one:
- 1.Select the DropDown widget, move to the Properties Panel > DropDown Search > enable Is Searchable option.
- 2.
Making dropdown searchable
You might need to disable a dropdown when certain conditions are not yet met or need to be fulfilled. For example, when the dropdown options are dependent on other fields, and those fields are not filled yet.
Disabled dropdown
To disable the dropdown:
- 1.Select the DropDown widget, move to the Properties Panel > DropDown Search > enable Disable Dropdown option.
- 2.Click on Unset and select the source that returns the boolean value (i.e., True or False), such as boolean variable, Conditions, Code Expression.
Disabling dropdown
You might want to allow users to select multiple options from the dropdown list. For example, on an e-commerce app, users might want to filter products based on multiple attributes, such as t-shirts in both 'blue' and 'red' colors.
To allow multi-select, select the Dropdown widget, move to the properties panel, find the Allow Multi Select property, and enable it.
To change the height and width of the dropdown, select the DropDown widget, move to the Properties Panel > DropDown Properties > enter the Width and Height value.
Margin adds a space between the DropDown's text and its border. To change the margin, select the DropDown widget, move to the Properties Panel > DropDown Properties > find the Margin property, and change the values.
Adding margin
Changing background color
Menu elevation adds a shadow to the dropdown, giving it a sense of depth and making it appear above the surface it is placed on.
To change the menu elevation (depth or Z-axis), move the Properties Panel > enter the Menu Elevation value.
The higher value draws the bigger size of the shadow.
To show or hide the dropdown underline, move the Properties Panel > DropDown Style > use the Hides Underline toggle.
Show hide underline
You can replace the default down arrow icon with one you like.
To do so, select the DropDown widget, move to the Properties Panel > find the Icon property > Click on the None > search and select the icon. You can also customize the icon's size and color.
Changing arrow icon
Last modified 16d ago