Native drop-down fields in canvas apps only support scrolling. They do not allow users to manually type in text in the drop down field to easily get to the relevant option instead of scrolling through the whole list.
Take a scenario where you have 1000+ options in the drop-down. Simple example would be an account drop down that is using common data service account entity.
Let’s examine this scenario:
As shown below, I have selected Accounts as the data source for my drop-down. Then I have changed the value to Account Name.
This gave me a drop-down with all my account records. By default, there is no way to search items in a canvas app drop-down field. Therefore, I will have to scroll through all records and select the relevant option. This is a tedious task.
Let’s see how we can make this drop-down more user friendly.
Since drop-down doesn’t give us much functionality, we can try to use vertical gallery component to simulate a drop-down that is much more user friendly.
Here are the steps:
- Remove drop-down field from the app ( Since we don’t need this drop-down)
- Add a text input field ” SearchBox”
- Add a horizontal gallery “Account List”
- Add a label “Selected Account”
5. Now, let’s add the data source to our “Account List” gallery. Configure the fields and layout as needed
6. We need to add the search functionality. We need to search the gallery for any text that is entered into the “Searchbox” field.
Update Items property in “Account List” galley with below code
This will show accounts in the “Account List” gallery, only if account name contains the text in Searchbox.
7. Now we need to capture the selected record from “Account List ” and show the account name in “Selected Account” label
Set the Text property of ” Selected Account” label to below:
‘Account List’.Selected.’Account Name’
This will show your selected account from the list.
8. As an additional step, we can hide the list if SearchBox field is empty.
Update Visible property of the “Account List ” gallery to true only if SearchBox field has something typed in.
Now, let’s test this..
Type something in the SearchBox . Select a record and it will populate the “Selected Account” field.
You can expand search criteria by adding more columns to the search query, I.e. If you also want to search by email address, add that column to the query.
Additionally, you can customize gallery to your liking so that it would show all necessary fields in a record that would make selection much easier for the users.
This method can be used in any situation where you have drop-down fields with large number of options.
Even though it’s additional work, I’m sure your application users will appreciate the experience.