캔버스 앱에서 화면 추가 및 탐색

일반적인 앱 시나리오를 위해 미리 빌드된 화면을 추가하여 반응이 빠른 최신 앱을 만듭니다. 화면에는 반응형 컨테이너와 다양한 화면 크기에 맞게 조정되는 최신 컨트롤이 있습니다. 다양한 레이아웃과 컨트롤이 있는 사용자 지정 화면을 추가할 수도 있습니다.

다음과 같은 새로운 사전 빌드된 화면을 사용할 수 있습니다.

• 승인 요청
• 시작 화면
• 헤더 및 갤러리
• 헤더 및 양식
• 헤더 및 테이블

새 화면 추가

1. Power Apps에 로그인합니다.

2. 캔버스 앱을 만들거나 편집을 위해 엽니다.

3. 명령 모음에서 새 화면을 선택한 다음 화면 레이아웃을 선택합니다.

4. 앱을 미리 보고 다른 장치에서 어떻게 보이는지 확인합니다. 앱 미리 보기에서 자세히 알아보세요.

팁

앱이 실행되는 장치 디스플레이 크기에 맞게 조절되도록 하려면 크기에 맞게 조정 옵션을 끕니다.

시작 화면

시작 화면은 이미지, 제목 및 설명과 같은 타일을 사용자 지정할 수 있는 앱의 첫 번째 화면에 적합합니다. 기본 컨테이너에서 타일을 추가하거나 제거하여 타일 수를 변경할 수 있습니다. 타일을 사용하여 사용자를 앱의 다른 부분으로 안내합니다.

시작 화면에는 다음과 같은 컨트롤 템플릿이 있습니다.

• 화면 컨테이너
  • 헤더 컨테이너
    • 헤더
  • 기본 컨테이너
    • 컨테이너
      • 이미지 컨테이너
        • Image
      • 제목 컨테이너
        • 기능 항목 버튼
        • 설명 텍스트

시작 화면 추가 및 사용자 지정

1. 새 화면>시작 화면을 선택하십시오

2. 타일 이미지를 변경하려면 타일을 선택한 다음 편집을 선택하세요.

3. 기능 항목 버튼 컨트롤을 선택하고 속성 창에 원하는 텍스트를 추가합니다.

   

4. 간단한 설명 또는 매력적인 메시지 텍스트를 선택하고 직접 추가합니다.

5. 필요한 경우 타일을 추가하고 제거합니다.

   • 트리 보기에서 타일을 추가하려면 컨테이너 항목을 복사하여 붙여넣습니다.

   • 트리 보기에서 타일을 제거하려면 컨테이너를 마우스 오른쪽 버튼으로 클릭한 다음 삭제를 선택합니다.

헤더 및 갤러리 화면

헤더 및 갤러리 화면을 사용하여 제품 카탈로그와 같은 다양한 제품 또는 서비스 정보를 표시할 수 있습니다. 갤러리 컨트롤을 데이터 원본에 연결하면 사용자 지정이 거의 필요 없는 카탈로그가 자동으로 만들어집니다.

헤더 및 갤러리 화면의 갤러리 컨트롤은 클래식 컨트롤입니다. 최신 갤러리 컨트롤이 해제되면 헤더 및 갤러리 화면에서 이를 사용합니다. 캔버스 앱의 최신 컨트롤 및 테마 개요에서 자세히 알아보세요.

헤더 및 갤러리 화면에는 다음과 같은 컨트롤 템플릿이 있습니다.

• 화면 컨테이너
  • 헤더 컨테이너
    • 헤더
  • 기본 컨테이너
    • 갤러리
      • Gallery 컨테이너
        • 이미지 컨테이너
          • Image
        • 제목 컨테이너
          • 제목 텍스트
          • 설명 텍스트
        • 버튼 컨테이너
          • Button

헤더 및 갤러리 화면 추가 및 사용자 지정

1. 새 화면>헤더 및 갤러리를 선택합니다.

2. 트리 보기에서 갤러리를 선택하고 Dataverse와 같은 데이터 원본에 연결합니다.

3. 이미지, 제목 텍스트, 텍스트 설명 등 갤러리 내부의 특정 컨트롤을 선택합니다. 컨트롤의 속성에서 ThisItem 구문을 사용하여 원하는 이미지, 제목 텍스트 및 설명을 설정합니다.

   예를 들어, 제목 텍스트 컨트롤에 계정 이름을 추가하려면 수식 입력줄에 ThisItem을 입력하여 데이터 집합에서 추가할 수 있는 사용 가능한 항목 목록을 확인합니다.

   

승인 요청 화면

승인 요청 화면에는 헤더, 제출 버튼이 있는 양식, 미리 정의된 단계가 있는 갤러리가 있습니다. 승인 요청 화면은 승인 요청을 제출하거나 비즈니스에 대한 워크플로 프로세스를 표시하는 등 양식 제출에 의해 작업이 트리거되는 시나리오에 유용합니다.

팁

승인 요청 화면을 추가하면 데이터 원본과 연결하라는 메시지가 표시됩니다. 데이터 원본은 요청 양식의 필드 이름을 결정합니다.

승인 요청 화면에는 다음과 같은 컨트롤 템플릿이 있습니다.

• 화면 컨테이너
  • 헤더 컨테이너
    • 헤더
  • 기본 컨테이너
    • 양식 컨테이너
      • 양식 제목 텍스트
      • 승인 양식
      • 제출 버튼
    • 사이드바 컨테이너
      • 검토자 텍스트
      • 검토자 갤러리

승인 요청 화면 추가 및 사용자 지정

1. 새 화면>승인 요청을 선택합니다.

2. ApprovalForm의 트리 보기에 Dataverse와 같은 데이터 원본에 연결하라는 메시지가 표시됩니다.

3. 데이터 원본 선택.

4. 승인 단계의 세부 정보를 보려면 트리 보기에서 SidebarContainer 노드 아래에 있는 ReviewersGallery를 선택하세요. 그런 다음 속성 창에서 고급 탭을 선택하고 항목으로 이동합니다.

   승인 단계에는 다음과 같은 세부 정보가 있습니다.

   • 이름: 단계 또는 승인자의 이름입니다
   • 제목: 단계 또는 승인자의 부제목입니다
   • 상태: 스테이지 상태
   • 현재: 이 단계가 승인 요청의 현재 단계인지 여부

   

버튼에 Power Automate 승인 워크플로를 추가하여 승인자에게 알릴 수 있습니다. Power Automate를 사용하여 승인 워크플로우 만들기 및 테스트에서 자세히 알아보세요.

헤더 및 양식

헤더 및 양식 화면에는 헤더, 양식 및 양식을 제출하거나 양식 제출을 취소할 수 있는 두 개의 버튼이 있습니다. 이 화면은 전체 화면 양식을 사용하는 데 적합합니다.

헤더 및 양식 화면에는 다음과 같은 컨트롤 템플릿이 있습니다.

• 화면 컨테이너
  • 헤더 컨테이너
    • 헤더
  • 기본 컨테이너
    • 양식 컨테이너
      • 양식
    • 버튼 컨테이너
      • 취소 버튼
      • 제출 버튼

헤더 및 양식 화면 추가 및 사용자 지정

1. 새 화면>헤더 및 양식을 선택합니다.

2. 트리 보기에서 양식이 선택되어 있고, 양식을 데이터 원본에 연결하라는 메시지가 나타납니다.

3. 데이터 원본 선택.

4. 필요에 따라, 최상의 화면 응답성을 보장하려면 양식에서 각 데이터 카드를 선택하고 속성 창의 디스플레이 탭에서 너비 맞춤 속성을 켜기로 설정합니다.

헤더 및 테이블

헤더 및 테이블 화면에는 헤더 컨트롤과 테이블 컨트롤이라는 두 개의 컨트롤이 있습니다. 이 템플릿은 화면에 자세한 데이터 테이블을 표시하는 데 적합합니다.

헤더 및 테이블 화면에는 다음과 같은 컨트롤이 있습니다.

• 헤더 컨테이너
  • 헤더
• 기본 컨테이너
  • 테이블

헤더 및 테이블 화면 추가 및 사용자 지정

1. 새 화면>헤더 및 테이블을 선택합니다.

2. 트리 보기에서 테이블을 선택하여 데이터 원본에 연결합니다.

테이블 및 양식

테이블 및 양식 화면에는 최신 테이블 컨트롤과 최신 양식 컨트롤이라는 두 가지 기본 컨트롤이 포함되어 있습니다. 이 템플릿에는 Power Fx 수식이 내장되어 있어 데이터를 쉽게 연결하고 사용자 지정할 수 있습니다. 이 템플릿은 양식을 사용하여 레코드를 선택하고 편집하는 데 적합합니다.

테이블 및 양식 화면에는 다음과 같은 컨트롤이 있습니다.

• 화면 컨테이너
  • 헤더 컨테이너
    • 헤더 컨트롤
  • 본문 컨테이너
    • 텍스트 입력(검색)
    • 테이블 컨트롤
    • 양식 컨트롤
    • 버튼
      • 새 알림
      • 편집
      • Delete
      • 제출
      • 취소

테이블 및 양식 화면 추가 및 사용자 지정

Power Apps Studio의 경우:

1. 새 화면>테이블 및 양식을 선택합니다.

2. 인라인 작업 표시줄에서 데이터를 선택합니다.

3. 원하는 데이터 원본을 선택합니다.

   

   연결되면 테이블 및 양식 컨트롤이 모두 데이터 원본에 바인딩됩니다.

테이블 컨트롤에서 레코드를 선택할 수 있으며 양식에는 선택한 레코드의 세부 정보가 표시됩니다.

이 템플릿의 모든 버튼에는 미리 빌드된 Power Fx가 있으므로 추가 사용자 지정이 필요하지 않습니다. 선택한 데이터 원본에 화면을 연결하면 이제 화면이 완전히 작동합니다.

화면 재정렬

앱에 화면이 두 개 이상 있는 경우 트리 보기에서 다른 순서로 배치할 수 있습니다.

다시 정렬하려는 화면의 오버플로 메뉴를 선택한 후, 위로 이동 또는 아래로 이동을 선택하세요.

StartScreen 속성을 사용하여 먼저 표시할 화면을 설정합니다.

탐색 추가

앱에 화면이 두 개 이상 있는 경우 사용자가 화면 사이를 이동할 수 있도록 탐색을 추가할 수 있습니다.

1. 화면을 선택한 상태에서 삽입을 선택하세요. 검색 상자에 다음 화살표를 입력한 후 선택하세요.

2. 화면에서 원하는 위치로 화살표를 이동합니다.

3. 화살표를 선택한 상태에서 OnSelect 속성을 Navigate 함수(예: Navigate(Target, Fade))로 설정합니다.

   대상을 탐색하려는 화면의 이름으로 바꾸세요.

   

   이 예시에서는 사용자가 화살표를 선택하면 대상 화면이 페이드 인됩니다.

4. Target 화면에서 같은 방식으로 뒤로 화살표 아이콘을 추가합니다. OnSelect 속성을 설정합니다(예: Navigate(Target, ScreenTransition.Fade)).

   대상을 반환하려는 화면의 이름으로 바꾸세요.

관련 정보

화면 컨트롤 참조