Drop down control in PowerApps

A list that shows only the first item unless the user opens it.

Description

A Drop down control conserves screen real estate, especially when the list contains a large number of choices. The control takes up only one line unless the user selects the chevron to reveal more choices. The control will show a maximum of 500 items.

Key properties

Default – The initial value of a control before the user specifies a different value.

Items – The source of data that contains the items that appear in the control. If the source has multiple columns, set the control's Value property to the column of data that you want to show.

Value – The column of data that you want to show in the control (for example, if a data source has multiple columns).

Selected – The selected item.

Additional properties

AccessibleLabel – Label for screen readers.

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

ChevronBackground – The color behind the down arrow in a dropdown list.

ChevronFill – The color of the down arrow in a dropdown list.

Color – The color of text in a control.

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill – The background color of a control.

FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – The thickness of a control's border when the control is focused.

Font – The name of the family of fonts in which text appears.

FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – The distance between a control's top and bottom edges.

HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic – Whether the text in a control is italic.

OnChange – How the app responds when the user changes the value of a control (for example, by adjusting a slider).

OnSelect – How the app responds when the user taps or clicks a control.

PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – The distance between text in a control and the top edge of that control.

PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – The background color of a control when the user taps or clicks that control.

Reset – Whether a control reverts to its default value.

SelectionColor – The text color of a selected item or items in a list or the color of the selection tool in a pen control.

SelectionFill – The background color of a selected item or items in a list or a selected area of a pen control.

Size – The font size of the text that appears on a control.

Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – Keyboard navigation order in relation to other controls.

Tooltip – Explanatory text that appears when the user hovers over a control.

Underline – Whether a line appears under the text that appears on a control.

Visible – Whether a control appears or is hidden.

Width – The distance between a control's left and right edges.

X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Example

Simple list

  1. Add a Drop down control, and then set its Items property to this expression:

    ["Seattle", "Tokyo", "London", "Johannesburg", "Rio de Janeiro"]

    Don't know how to add, name, and configure a control?

  2. Show the items in the list by selecting the control's down arrow while pressing the Alt key.

List from a data source

The principles in this procedure apply to any data source that provides tables but, to follow these steps exactly, you must open an environment for which a Common Data Service for Apps database has been created and sample data added.

  1. Open a blank app, and then specify the Accounts entity.

  2. Add a Drop down control, and set its Items property to this formula:

    Distinct(Accounts, address1_city)

    This formula shows all the cities in the Accounts entity. If more than one record has the same city, the Distinct function hides the duplication in your drop-down control.

  3. (optional) Rename your Drop down control to Cities, add a vertical Gallery control, and set the gallery's Items property to this formula:

    Filter(Accounts, address1_city = Cities.Selected.Value)

    This Filter function shows only those records in the Accounts entity for which the city matches the selected value in the Cities control.

Accessibility guidelines

Color contrast

There must be adequate color contrast between:

  • ChevronFill and ChevronBackground
  • ChevronHoverFill and ChevronHoverBackground
  • SelectionColor and SelectionFill
  • SelectionFill and Fill

This is in addition to the standard color contrast requirements.

Screen reader support

Keyboard support