다음을 통해 공유


쇼핑 목록 카드 만들기

이 자습서에서는 쇼핑 목록을 표시하고 항목을 추가할 수 있는 카드를 만듭니다. 카드 디자이너, 변수, Power Fx를 사용합니다.

자습서가 끝나면 쇼핑 목록 카드가 다음 예와 같이 표시됩니다.

완성된 쇼핑 목록 카드의 스크린샷.

전제 조건

카드 만들기

  1. Power Apps에 로그인하고 환경을 선택합니다.

  2. 왼쪽 창에서 카드를 선택합니다. 항목이 측면 패널 창을 경우 ...자세히를 선택한 다음 원하는 항목을 선택하세요.

  3. + 카드 만들기를 선택합니다.

  4. 카드 이름 아래에 SimpleShoppingCard를 입력한 다음 만들기를 선택합니다.

  5. 카드 제목이 여기에 표시됨 텍스트를 선택합니다. 텍스트 레이블 속성 창에서 텍스트쇼핑 목록으로 설정합니다.

  6. 새 카드를 사용자 지정하려면 요소 추가 및 제거 텍스트를 선택합니다. 텍스트 레이블 속성 창에서 텍스트아래 상자를 사용하여 목록에 항목 추가로 설정합니다.

변수 추가

쇼핑 목록은 별도의 텍스트 줄에 개별 항목을 포함합니다. 각 행에 하나의 식료품 항목이 있는 단일 열이 있는 테이블처럼 보입니다. 이는 목록을 저장할 테이블 변수를 만들어야 함을 나타냅니다.

  1. 왼쪽 창에서 변수를 선택합니다.

  2. + 새 변수를 선택합니다.

  3. 새 변수 창에서 이름 아래에 MyGroceryList를 입력합니다. 유형테이블로 설정합니다.

  4. 기본값 오른쪽에 있는 중괄호를 선택하고 괄호 사이에 "" 를 입력합니다. 이는 테이블이 암시적으로 Value라는 열에 텍스트 값을 보유하고 있음을 나타냅니다.

  5. 저장을 선택합니다.

    MyGroceryList 변수 속성 창의 스크린샷.

카드에 목록 추가

  1. 왼쪽 창에서 삽입을 선택합니다.

  2. 도구 창에서 표시을 선택하여 범주를 확장한 다음 텍스트 레이블을 선택합니다.

  3. 텍스트 레이블 속성 창에서 고급 탭을 선택합니다.

  4. 반복 간격MyGroceryList로 설정합니다.

    모든 속성에 대해 반복에 MyGroceryList가 있는 텍스트 레이블의 고급 속성 창 스크린샷.

    텍스트 레이블의 반복 간격 속성을 설정하면 지정된 테이블의 모든 항목에 대해 텍스트 레이블이 반복됩니다. 이 예에서 테이블 MyGroceryList는 생성한 변수입니다. 즉, 식료품 목록의 모든 항목에 대해 별도의 텍스트 레이블이 카드에 생성됩니다.

  5. 속성 탭을 선택합니다. 텍스트ThisItem.Value로 설정합니다.

    시스템 정의 변수 ThisItem.Value를 텍스트 레이블에 할당하면 MyGroceryList 배열의 현재 항목 값이 레이블 텍스트로 표시됩니다. 배열은 테이블 변수의 또 다른 용어입니다. 수식 입력줄 또는 속성 창에 변수 이름을 입력할 수 있습니다.

    텍스트 레이블의 Text 속성에 입력된 변수 이름의 스크린샷.

입력 상자 추가

생성한 목록이 비어 있으므로 마지막 단계에서 사용자에게 항목을 추가할 수 있는 권한을 부여합니다.

  1. 왼쪽 창에서 삽입을 선택합니다.

  2. 도구 창에서 입력을 선택하여 범주를 확장한 다음 텍스트 입력을 선택합니다.

  3. 텍스트 입력 속성 창에서 NameNewItem으로 설정하고 LabelNew Item: 으로 설정합니다.

    입력 텍스트 상자의 이름 및 레이블 속성에 입력된 변수 이름의 스크린샷.

    Name 속성을 사용하면 Power Fx 식에서 컨트롤을 참조할 수 있습니다. 공백이나 특수 문자가 없는 한 단어여야 합니다. Label 속성이 카드에 표시됩니다. 컨트롤의 이름과 레이블은 여기에 있는 것처럼 유사할 필요는 없지만 비슷한 이름을 사용하면 컨트롤을 추적하기가 더 쉽습니다.

Power Fx 버튼 추가

  1. 왼쪽 창에서 삽입을 선택합니다.

  2. 도구 창에서 입력을 선택하여 범주를 확장한 다음 버튼을 선택합니다.

  3. 단추 속성 창에서 제목항목 추가로 설정합니다.

  4. 속성 창에서 PowerFx를 선택하여 수식 입력줄에 커서를 놓습니다.

  5. 수식 입력줄에 다음 Power Fx 식을 입력합니다. Collect(MyGroceryList, {Value: NewItem})

    이 식은 Power Fx 함수 Collect를 사용하여 암시적 열의 MyGroceryList 테이블 변수에 사용자 입력 NewItem 값을 추가합니다. 식은 단추의 OnSelect 속성에 바인딩되어 있으므로 사용자가 단추를 선택할 때 실행됩니다.

    단추의 OnSelect 속성에 할당된 수식 입력줄의 Power Fx 식 스크린샷.

카드 테스트

카드를 사용하기 전에 항상 변경 사항을 저장해야 합니다. 저장을 선택하고 재생을 선택합니다.

식료품 목록에 몇 가지 항목을 추가하여 카드를 테스트합니다.

다음 단계

Microsoft Dataverse 커넥터로 더 복잡한 카드를 만드는 방법을 알아보세요.