다음을 통해 공유

캔버스 앱에 목록 상자, 드롭다운 목록, 콤보 상자 또는 라디오 단추 추가

  • 아티클

사용자가 목록에서 하나 이상의 항목을 선택할 수 있도록 캔버스 앱에 단일 데이터 열(예: 다중 열 테이블에 포함됨)을 표시합니다.

  • 사용자가 둘 이상의 옵션을 선택할 수 있는 목록 상자를 추가합니다.
  • 화면에서 공간을 적게 차지하는 드롭다운 목록 또는 콤보 상자를 추가합니다.
  • 특정 디자인 효과를 위해 라디오 단추 집합을 추가합니다.

이 항목에서는 목록 상자 및 라디오 단추에 초점을 맞추지만 동일한 원칙이 드롭다운 목록에 적용됩니다.

필수 조건

  1. 빈 캔버스 앱을 만듭니다.
  2. 컨트롤을 추가하고 구성하는 방법을 알아봅니다.

간단한 목록 만들기

  1. MyListBox라는 목록 상자 컨트롤을 추가하고 해당 항목 속성을 다음 식으로 설정합니다.

    ["circle","triangle","rectangle"]

    디자이너가 다음과 유사하게 표시됩니다.

    목록 상자 컨트롤이 있는 화면

  2. 삽입 탭에서 아이콘을 선택하고, 원을 선택하고, MyListBox 아래로 이동합니다.

    아이콘 추가

  3. 삼각형 및 사각형을 추가한 다음, MyListBox 아래의 행에 셰이프를 정렬합니다.

    모양 추가

  4. 다음 셰이프의 Visible 속성을 다음 함수로 설정합니다.

    셰이프 Visible 함수 설정 대상
    원 If("circle" in MyListBox.SelectedItems.Value, true)
    삼각형 If("triangle" in MyListBox.SelectedItems.Value, true)
    사각형 If("rectangle" in MyListBox.SelectedItems.Value, true)

  5. Alt 키를 누른 상태로 MyListBox에서 하나 이상의 셰이프를 선택합니다.

    선택한 셰이프만 표시됩니다.

이 단계에서는 항목 목록을 만드는 데 식을 사용했습니다. 이를 비즈니스 내에서 다른 요소에 적용할 수 있습니다. 예를 들어, 드롭다운 컨트롤을 사용하여 제품 이미지, 제품 설명 등을 표시할 수 있습니다.

라디오 단추 추가

  1. 홈 탭에서 새 화면을 선택한 다음, 비어 있음을 선택합니다.

  2. 삽입 탭에서 컨트롤을 선택한 다음 라디오를 선택합니다.

    라디오 버튼 추가

  3. 라디오 컨트롤의 이름을 Choices로 바꾸고 항목 속성을 다음 수식으로 설정합니다.
    ["red","green","blue"]

    컨트롤 이름 바꾸기

    필요한 경우 모든 옵션을 표시하도록 컨트롤의 크기를 조정합니다.

  4. 삽입 탭에서 아이콘을 선택한 다음 원을 선택합니다.

  5. 원의 Fill 속성을 다음 함수로 설정합니다.
    If(Choices.Selected.Value = "red", Red, Choices.Selected.Value = "green", Green, Choices.Selected.Value = "blue", Blue)

    이 수식에서 원은 선택한 라디오 단추에 따라 색을 변경합니다.

  6. 다음 예와 같이 라디오 단추 아래로 원을 이동합니다.

    라디오 컨트롤 아래로 원 이동

  7. Alt 키를 누른 상태로 다른 라디오 단추를 선택하여 원의 색을 변경합니다.

기존 목록에 항목 추가

  1. 버튼 control을 추가하고 이름을 "btnReset"으로 지정합니다.

    컨트롤을 추가, 이름 지정, 구성하는 방법을 모르십니까?

  2. btnReset에서 OnSelect property를 다음 공식으로 설정합니다.

    ClearCollect(MyItems, {value: "circle"},{value: "triangle"},{value: "rectangle"})

  3. btnReset에서 Text property를 "Reset"으로 설정합니다.

  4. 이름이 lbItems인 목록 상자를 추가하고 항목 속성을 MyItems로 설정합니다.

  5. Alt 키를 누른 상태에서 재설정 단추를 선택합니다.

    참고

    목록 상자는 "MyItems" 컬렉션의 항목으로 채워져야 합니다.

  6. 목록 상자와 단추가 세로로 정렬되도록 정렬합니다.

    목록 상자 단추.

  7. 텍스트 입력 컨트롤을 추가하고 이름을 "txtAdd"로 지정합니다.

  8. txtAdd의 텍스트 속성을 ""로 설정합니다.

  9. 버튼 control을 추가하고 이름을 "btnAdd"로 지정합니다.

  10. btnAdd의 Text property를 "Add"으로 설정합니다.

  11. btnAdd의 OnSelect property를 다음 공식에 따라 설정합니다.

    Collect(MyItems,{value: txtAdd.Text}); Reset(txtAdd)

    참고

    • The collect 기능은 텍스트가 입력되면 텍스트를 수집 항목으로 추가합니다.
    • 재설정 기능은 텍스트 입력을 기본 상태로 다시 재설정합니다.

  12. txtAdd와 btnAdd가 lbItems와 btnReset 아래로 세로로 정렬되도록 합니다.

    모든 컨트롤 - 추가하기 전.

  13. F5 키를 눌러 앱을 미리 봅니다.

  14. txtAdd 텍스트 입력 컨트롤에 텍스트 값을 추가합니다.

  1. 추가 단추를 누릅니다.

    참고

    목록 상자는 MyItems 컬렉션의 항목으로 채워져야 합니다.

(선택 사항) 기존 목록에서 항목 제거

  1. 버튼 control을 추가하고 이름을 "btnDelete"로 지정합니다.

  2. btnDelete의 Text property를 "Delete"로 설정합니다.

  3. btnDelete의 OnSelect property를 다음 공식에 따라 설정합니다.

    Remove(MyItems, lbItems.Selected)

  4. btnReset 밑으로 수직 정렬되도록 btnDelete를 배치합니다.

    삭제 단추가 있는 모든 컨트롤.

  5. F5 키를 눌러 앱을 미리 봅니다.

  6. 재설정 단추를 눌러 목록 상자를 재설정합니다.

  7. 목록 상자에서 항목을 눌러 선택합니다.

  1. 삭제 단추를 눌러 항목을 삭제합니다.

참고

귀사의 설명서 언어 기본 설정에 대해 말씀해 주시겠습니까? 간단한 설문 조사에 응해주세요. (이 설문 조사는 영어로 되어 있습니다.)

이 설문 조사는 약 7분 정도 걸립니다. 개인 데이터는 수집되지 않습니다(개인정보처리방침).