PowerApps의 드롭다운 컨트롤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. 이 컨트롤을 사용하면 최대 500개의 항목이 표시됩니다.The control will show a maximum of 500 items.

주요 속성Key properties

Default - 사용자가 다른 값을 지정하기 전 컨트롤의 초기 값입니다.Default – The initial value of a control before the user specifies a different value.

Items – 컨트롤에 표시되는 항목을 포함하는 데이터의 원본입니다.Items – The source of data that contains the items that appear in the control. 원본에 여러 개의 열이 있는 경우, 컨트롤의 Value 속성을 표시할 데이터의 열로 설정하세요.If the source has multiple columns, set the control's Value property to the column of data that you want to show.

Value - 컨트롤에 표시할 데이터 열입니다(예를 들어 데이터 원본에 여러 열이 있는 경우).Value – The column of data that you want to show in the control (for example, if a data source has multiple columns).

선택한 – 선택한 항목을 나타내는 데이터 레코드입니다.Selected – The data record that represents the selected item.

AllowEmptySelection – 컨트롤이 선택 영역이 없는 항목은 선택 된 경우 표시 여부를 선택 합니다.AllowEmptySelection – Whether the control shows an empty selection if no item has been selected. 앱 사용자 빈 항목을 선택 하 여 선택 항목을 지울 수도 있습니다.App users can also clear their choices by selecting the blank item.

추가 속성Additional properties

AccessibleLabel – 화면 읽기 프로그램의 레이블입니다.AccessibleLabel – Label for screen readers.

BorderColor - 컨트롤의 테두리 색입니다.BorderColor – The color of a control's border.

BorderStyle - 컨트롤의 테두리는 Solid, Dashed, Dotted, None입니다.BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness - 컨트롤의 테두리 굵기입니다.BorderThickness – The thickness of a control's border.

ChevronBackground – 드롭다운 목록에서 아래쪽 화살표의 배경색입니다.ChevronBackground – The color behind the down arrow in a dropdown list.

ChevronFill – 드롭다운 목록에서 아래쪽 화살표의 색입니다.ChevronFill – The color of the down arrow in a dropdown list.

Color – 컨트롤의 텍스트 색입니다.Color – The color of text in a control.

DisplayMode – 컨트롤이 사용자 입력을 허용(편집)하거나, 데이터만 표시(보기)하거나 사용 안 하도록(사용 안 함) 설정할지 선택합니다.DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 테두리 색입니다.DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 텍스트 색입니다.DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 배경색입니다.DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill - 컨트롤의 배경색입니다.Fill – The background color of a control.

FocusedBorderColor – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 색입니다.FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 두께입니다.FocusedBorderThickness – The thickness of a control's border when the control is focused.

Font – 텍스트가 표시되는 글꼴의 제품군 이름입니다.Font – The name of the family of fonts in which text appears.

FontWeight – 컨트롤의 텍스트의 가중치: 굵게, Semibold, 정상, 또는 밝은.FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – 컨트롤의 위쪽 및 아래쪽 가장자리 사이의 간격입니다.Height – The distance between a control's top and bottom edges.

HoverBorderColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 테두리 색입니다.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 텍스트 색입니다.HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 배경색입니다.HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic - 컨트롤의 텍스트를 기울임꼴로 설정할지 여부를 선택합니다.Italic – Whether the text in a control is italic.

OnChange – 사용자가 컨트롤의 값을 변경할 때(예: 슬라이더 조절) 앱이 응답하는 방식입니다.OnChange – How the app responds when the user changes the value of a control (for example, by adjusting a slider).

OnSelect – 사용자가 앱을 클릭하거나 탭할 때 앱이 응답하는 방법입니다.OnSelect – How the app responds when the user taps or clicks a control.

PaddingBottom – 컨트롤의 텍스트와 해당 컨트롤의 아래쪽 가장자리 사이의 거리입니다.PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – 컨트롤의 텍스트와 해당 컨트롤의 왼쪽 가장자리 사이의 거리입니다.PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – 컨트롤의 텍스트와 해당 컨트롤의 오른쪽 가장자리 사이의 거리입니다.PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – 컨트롤의 텍스트와 해당 컨트롤의 위쪽 가장자리 사이의 거리입니다.PaddingTop – The distance between text in a control and the top edge of that control.

PressedBorderColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 테두리 색입니다.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 텍스트 색입니다.PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 배경색입니다.PressedFill – The background color of a control when the user taps or clicks that control.

Reset – 컨트롤이 기본값으로 되돌아가는지 여부입니다.Reset – Whether a control reverts to its default value.

(사용 되지 않음) SelectedText – 선택한 항목을 나타내는 하는 문자열 값입니다.SelectedText (Deprecated) – A string value that represents the selected item.

SelectionColor – 목록에서 선택한 항목의 텍스트 색 또는 펜 컨트롤에 있는 선택 도구의 색입니다.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 – 목록에서 선택한 항목 또는 펜 컨트롤에서 선택한 영역의 배경색입니다.SelectionFill – The background color of a selected item or items in a list or a selected area of a pen control.

Size -컨트롤에 표시되는 텍스트의 글꼴 크기입니다.Size – The font size of the text that appears on a control.

Strikethrough - 컨트롤에 표시되는 텍스트 중앙에 선을 표시할지 여부를 선택합니다.Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – 다른 컨트롤에 관련된 키보드 탐색 순서입니다.TabIndex – Keyboard navigation order in relation to other controls.

Tooltip – 사용자가 마우스로 컨트롤을 가리킬 때 표시되는 설명 텍스트입니다.Tooltip – Explanatory text that appears when the user hovers over a control.

Underline – 컨트롤에 표시되는 텍스트 아래에 선을 표시할지 여부를 선택합니다.Underline – Whether a line appears under the text that appears on a control.

Visible – 컨트롤을 표시하거나 숨길지 여부를 선택합니다.Visible – Whether a control appears or is hidden.

Width – 컨트롤의 왼쪽 및 오른쪽 가장자리 사이의 간격입니다.Width – The distance between a control's left and right edges.

X – 컨트롤의 왼쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 왼쪽 가장자리 사이의 거리입니다.X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – 컨트롤의 위쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 위쪽 가장자리 사이의 거리입니다.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. 드롭다운 컨트롤을 추가한 다음, Items 속성을 다음 수식으로 설정합니다.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. Alt 키를 누른 채로 컨트롤의 아래쪽 화살표를 선택하여 목록에 항목을 표시합니다.Show the items in the list by selecting the control's down arrow while pressing the Alt key.

데이터 원본에서 나열List from a data source

이 절차의 원칙은 테이블을 제공하는 모든 데이터 원본에 적용되지만 이러한 단계를 정확하게 수행하려면, Common Data Service 데이터베이스가 생성되고 샘플 데이터가 추가된 환경이 필요합니다.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 database has been created and sample data added.

  1. 빈 앱을 연 다음, 계정 엔터티를 지정합니다.Open a blank app, and then specify the Accounts entity.

  2. 드롭다운 컨트롤을 추가하고 Items 속성을 다음 수식으로 설정합니다.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. 두 개 이상의 레코드에 동일한 도시가 있는 경우, Distinct 함수는 드롭다운 컨트롤에 있는 중복을 숨깁니다.If more than one record has the same city, the Distinct function hides the duplication in your drop-down control.

  3. (선택 사항) 드롭다운 컨트롤의 이름을 도시로 변경하고 세로 갤러리 컨트롤을 추가하고 갤러리의 Items 속성을 이 수식으로 설정합니다.(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)

    Filter 함수는 도시가 도시 컨트롤에서 선택한 값과 일치하는 계정 엔터티의 레코드만 표시합니다.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:

  • ChevronFillChevronBackgroundChevronFill and ChevronBackground
  • ChevronHoverFillChevronHoverBackgroundChevronHoverFill and ChevronHoverBackground
  • SelectionColorSelectionFillSelectionColor and SelectionFill
  • SelectionFillFillSelectionFill and Fill

이는 표준 색 대비 요구 사항에 추가됩니다.This is in addition to the standard color contrast requirements.

화면 판독기 지원Screen reader support

키보드 지원Keyboard support