Canvas Apps Controls Modern Controls User Experience

Dropdown – Everything you want to know about modern control #8

Dropdown menu
Dropdown menu

Introduction to modern Dropdown control

Dropdown has been around in Power Apps ever since Power Apps came into existence. So although it isn't a new control, the modern version has some minor differences (read: additions and some subtractions) when compared to the classic dropdown control. This will probably be one of the shorter modern control blog post as the differences between the classic and modern dropdown are very minimal.

New Properties

  1. Appearance - There are 3 different options:
    1. 'ComboboxCanvas.Appearance'.FilledDarker (default)
    2. 'ComboboxCanvas.Appearance'.FilledLighter
    3. 'ComboboxCanvas.Appearance'.Outline
  2. TriggerOutput - There are 3 different options:
    1. 'ComboboxCanvas.TriggerOutput'.Keypress (the search happens after every key stroke of the user typing into the search box)
    2. 'ComboboxCanvas.TriggerOutput'.FocusOut (the search happens after the user tabs out of the search box)
    3. 'ComboboxCanvas.TriggerOutput'.Delayed (the search happens after a 0.5 second delay post the user stopping typing)
  3. ValidationState - There are 2 options:
    1. 'DropdownCanvas.ValidationState'.None (default)
    2. 'DropdownCanvas.ValidationState'.Error (it adds a red border around the dropdown control, you can base it on certain condition)

Some of the properties to style the dropdown are gone like ChevronFill. This might seem a bit crippling to some makers, but trust me, losing some of these properties has been a blessing for me. Lack of these properties helps ensure that the controls look neat and clean.

Using modern Dropdown control

The one property that some of the modern controls have lost in comparison to their classic versions is the Reset property. I do miss it at times. I used that property to reset controls to their default values using a variable. Now that the Reset property isn't there anymore, you can still reset controls by using the Reset function. To learn more about the Reset function, click here.

Stay tuned for the remaining modern controls!

To read the official documentation of modern controls, click here.

Recent articles

    1. Date picker – Everything you want to know about modern control #7
    2. Copilot Answer- Everything you want to know about modern control #6
    3. Combobox – Everything you want to know about modern control #5

 

Leave a Reply