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.

Key properties

Default – The initial value of a control before it is changed by the user.

Items – The source of data that appears in a control such as a gallery, a list, or a chart.

Items The source of data that appears in a control such as a gallery, a list, or a chart.

When you add a gallery, a list, or a chart, the property list shows Items by default so that you can easily specify the data that the new control should show. For example, you might set the Items property of a gallery to the Account table in Salesforce, a table named Inventory that you created in Excel and uploaded to the cloud, or a SharePoint list named ConferenceSpeakers.

Selected – The selected item.

Additional properties

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.

FocusedBorderThickness – The thickness of the control's border when it has keyboard focus.

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.

Disabled – Whether the user can interact with the control.

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

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

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

Fill – The background color of a control.

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.

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 the screen.

Y – The distance between the top edge of a control and the top edge of the screen.

Example

  1. Add a Button control, and set its Text property to show Collect.

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

  2. Set the OnSelect property of the Button control to this formula:
    ClearCollect(CityPopulations, {City:"London", Country:"United Kingdom", Population:8615000}, {City:"Berlin", Country:"Germany", Population:3562000}, {City:"Madrid", Country:"Spain", Population:3165000}, {City:"Rome", Country:"Italy", Population:2874000}, {City:"Paris", Country:"France", Population:2273000}, {City:"Hamburg", Country:"Germany", Population:1760000}, {City:"Barcelona", Country:"Spain", Population:1602000}, {City:"Munich", Country:"Germany", Population:1494000}, {City:"Milan", Country:"Italy", Population:1344000})

    Want more information about the ClearCollect function or other functions?

  3. Press F5, click or tap the Button control, and then press Esc.

  4. Add a Drop down control, name it Countries, and set its Items property to this formula:
    Distinct(CityPopulations, Country)

  5. Add a Text gallery control in vertical/portrait orientation, and set its Items property to this formula:
    Filter(CityPopulations, Countries.Selected.Value in Country)

  6. In the first item of the Text gallery control, set the Text property of the upper Text box control to ThisItem.City, and delete the bottom Text box control.

  7. Set the TemplateSize property of the Text gallery control to 80.

  8. Press F5, click or tap the chevron in the Countries list, and then choose an option in that list.

    The Text gallery control shows only those cities in the country that you chose.