캔버스 앱에서 표를 편집하는 앱 만들기

관련 데이터와 기능을 한 곳에 모으도록 생산성 애플리케이션을 설계하면 화면을 왔다 갔다 하지 않고도 더 많은 작업을 수행할 수 있습니다. Microsoft Excel은 빠르고 효율적인 방법으로 실시간으로 데이터를 편집할 수 있는 한 가지 방법입니다.

Power Apps를 사용하여 모든 데이터 원본에 프런트 엔드로 제공하여 동일한 개념을 적용할 수 있습니다. 또한 훨씬 더 자유롭게 사용자 정의할 수 있습니다.

이 자습서에서는 다음 구성 요소를 사용하여 샘플 앱을 만듭니다.

• 데이터 원본(Microsoft Dataverse. 대신 Excel을 사용할 수도 있습니다.)
• 양식 — 새 항목의 경우
• 갤러리 — 기존 항목을 표시하기 위해
• 텍스트 입력 컨트롤 — 기존 항목을 업데이트하기 위해

필수 조건

이 튜토리얼을 따르려면 Power Platform 환경에 대한 액세스 권한을 보유하고 Microsoft Dataverse에서 테이블을 생성할 수 있어야 합니다.

이 자습서에서는 다음 구조를 사용하여 샘플 앱을 만듭니다.

열을 추가하는 방법에 대한 자세한 내용은 테이블 열 작업을 참조하십시오.

샘플 데이터를 추가하기 위해 새로운 기본 양식이 생성되었습니다.

필수 열이 있는 기본 양식을 만드는 방법에 대해 알아보려면 양식 만들기를 참조하세요. 새 양식을 사용하여 레코드를 추가하려면 올바른 양식 주문을 사용해야 합니다.

1단계: 빈 앱 만들기

"카탈로그 관리 앱"이라는 이름으로 빈 캔버스 앱과 태블릿 레이아웃을 만듭니다.

2단계: 데이터 소스 추가

이 섹션에서는 Dataverse 테이블을 샘플 앱의 데이터 소스로 추가하는 방법을 보여줍니다. SharePoint 사이트 또는 OneDrive의 파일을 데이터 원본으로 사용하거나 원하는 다른 데이터 원본 유형을 사용할 수 있습니다.

1. 왼쪽 창에서 데이터 > 데이터 추가를 선택합니다.

2. 모든 테이블 보기를 선택합니다.

3. 편집 가능한 테이블 또는 이전에 만든 테이블을 선택합니다.

   

캔버스 앱에 연결을 추가하는 방법에 대한 자세한 내용은 데이터 원본 추가를 참고하세요.

3단계: 양식 컨트롤 설정

이 단계에서는 새 항목을 추가하는 양식 컨트롤을 추가합니다.

1. +(삽입) > 양식 수정을 선택합니다.

   

2. 오른쪽 창에서 양식 컨트롤 편집에 대한 데이터 원본으로 테이블을 선택합니다.

   

3. 필드 수정 속성 옵션을 사용하여 편집 양식 컨트롤에 표시할 열을 선택합니다. 열 순서를 적절하게 변경할 수도 있습니다.

   

4. 양식의 기본 모드를 신규로 선택합니다.

   

5. 캔버스를 적절하게 채우기 위해 데이터 카드의 너비, 높이 속성을 조정합니다.

6. 왼쪽 창에서 +(삽입) > 단추를 선택합니다.

7. 단추 텍스트를 제품 추가로 업데이트합니다.

8. 화면의 왼쪽 상단에서 단추 컨트롤에 대한 OnSelect 속성을 선택합니다.

9. 수식 입력줄에 다음 수식을 입력합니다.

   SubmitForm(Form1);
   NewForm(Form1);
   

   • SubmitForm 함수는 새 제품 세부 정보를 Dataverse 테이블에 제출합니다.
   • NewForm은 새 제품 세부 정보를 제출한 후 새 제품을 추가하기 위해 양식 모드를 다시 새 양식으로 변경합니다.
   • 이 수식에서 Form1은 이전에 추가한 편집 양식 컨트롤의 이름입니다. 양식 이름이 다른 경우 이 수식에서 양식 이름을 업데이트하십시오.

   

4단계: 갤러리를 편집 가능한 테이블로 설정

이 단계에서는 항목을 편집 가능한 테이블로 편집하기 위해 빈 세로 갤러리를 추가합니다.

1. 왼쪽 창에서 +(삽입) >레이아웃 > 빈 세로 갤러리를 선택합니다.

2. Dataverse에서 테이블을 데이터 원본으로 선택합니다.

3. 이 갤러리에는 데이터 원본에서 편집 가능한 모든 열이 포함되므로 전체 캔버스의 나머지 절반을 차지하도록 갤러리 크기를 조정합니다.

4. 갤러리 편집을 선택합니다.

   

5. 왼쪽 창에서 +(삽입) > 입력 > 텍스트 입력을 선택합니다.

6. 갤러리를 다음 작업으로 정렬합니다.

   

   1. 텍스트 입력 컨트롤의 맨 위 행을 갤러리 내 왼쪽 위 모서리로 이동합니다. 이 맨 위 행을 이동하면 동일한 열의 나머지 행이 자동으로 이동됩니다.
   2. 갤러리 내에서 첫 번째 행 높이의 크기를 조정하여 방금 왼쪽 상단으로 이동한 첫 번째 행의 크기를 차지합니다.

   마지막에 갤러리의 왼쪽에 쌓인 모든 행이 표시되어야 합니다.

7. 갤러리 내 첫 번째 텍스트 입력 행에 대해 기본 속성 수식을 업데이트합니다.

   ThisItem.Product
   

   • 이 수식에서 ThisItem은 선택한 데이터 원본 내의 항목과 관련됩니다. 이 예에서는 Dataverse 테이블입니다.
   • "제품"은 테이블 내의 열 이름입니다.
   • 갤러리의 첫 번째 행에 대해 이 수식이 업데이트되면 제품 이름으로 전체 열이 자동으로 업데이트됩니다. 오류가 표시되면 갤러리를 Dataverse 테이블에 연결했는지 확인합니다.

   

8. 이전 단계를 반복하여 앱 내부에 편집 가능한 필드로 표시하려는 각 열에 대한 텍스트 입력 컨트롤을 추가합니다. "제품"을 적절한 열 이름으로 바꾸는 수식에서 올바른 열을 선택했는지 확인하십시오.

   팁

   너비를 조정하려면 너비 속성을 사용하거나 각 열의 첫 번째 행 주위에 있는 단추를 사용하여 드래그합니다.

9. 갤러리 내부의 첫 번째 열에서 첫 번째 행을 선택하고 OnChange 속성에 다음 수식과 열 및 컨트롤 이름을 적절하게 추가합니다.

   Patch('Editable tables',ThisItem,{Product:TextInput8.Text})
   

   • 이 수식의 Patch 함수는 데이터 원본로 선택된 테이블을 변경 시 값으로 업데이트합니다.
   • "편집 가능한 테이블"은 샘플 데이터 원본 이름입니다.
   • ThisItem은 이 열에 대해 선택한 데이터 원본 내의 항목과 관련됩니다.
   • "제품"은 선택된 데이터 원본 내의 열 이름입니다.
   • "TextInput8"은 선택한 데이터 원본의 "제품" 열에 연결된 갤러리에 추가된 텍스트 입력 컨트롤의 이름입니다.
   • "TextInput8"의 "텍스트"는 캔버스의 편집 가능한 테이블 내에서 선택한 셀에 입력된 텍스트입니다.

   

10. 연결된 데이터 원본의 나머지 열에 대해 추가된 각 텍스트 입력 컨트롤에 대해 이전 단계를 반복합니다. 올바른 열 및 컨트롤 이름을 사용하도록 수식이 업데이트되었는지 확인합니다.

5단계: 편집 및 취소 옵션 설정

이 단계는 편집 진행을 편집하고 취소하는 옵션을 추가합니다. 기본적으로 편집 가능한 텍스트 입력 컨트롤이 있는 갤러리는 의도하지 않은 업데이트의 대상이 될 수 있습니다. 명시적인 편집 옵션이 있고 편집 기능을 중지하려면 편집이 항상 예상되도록 합니다.

1. 상단 메뉴 > 아이콘에서 삽입을 선택하고 편집과 취소(배지) 아이콘을 추가합니다.

   

2. 왼쪽 창에서 트리 뷰를 선택한 다음 앱을 선택합니다.

3. 앱 OnStart 속성을 선택하고 갤러리 이름을 적절하게 변경하여 다음 수식을 추가합니다.

   Gallery2.DisplayMode = "galleryDisplayMode";
   Set(galleryDisplayMode, DisplayMode.Disabled);
   

   • 이 수식에서 "Gallery2"는 갤러리의 이름입니다.
   • DisplayMode는 선택한 갤러리의 DisplayMode 속성입니다.
   • "galleryDisplayMode"는 이 수식이 갤러리의 표시 모드 값을 저장하기 위해 만드는 새 변수입니다.
   • Set 함수는 "DisplayMode.Disabled"를 사용하여 "Disabled" 값으로 이전 줄에 정의된 "galleryDisplayMode" 변수를 설정합니다. 비활성화된 디스플레이 모드에서는 앱이 시작될 때 기본적으로 갤러리를 편집할 수 없습니다(앱 OnStart).

4. 빈 세로 갤러리를 선택한 다음 DisplayMode 속성을 선택합니다.

5. 속성 값을 Edit에서 galleryDisplayMode로 업데이트합니다. 이렇게 변경하면 갤러리 모드가 항상 이전 단계에서 만든 "galleryDisplayMode" 변수 값을 사용하여 정의됩니다.

6. 다음과 같이 아이콘의 속성 및 수식을 업데이트합니다.

   Icon	속성	수식
   편집	OnSelect	Set(galleryDisplayMode, DisplayMode.Edit)
   편집	표시	galleryDisplayMode = DisplayMode.Disabled
   취소	OnSelect	Set(galleryDisplayMode, DisplayMode.Disabled)
   취소	표시	galleryDisplayMode = DisplayMode.Edit

   • Set 함수는 선택한 아이콘에 따라 갤러리의 표시 모드를 설정합니다.
   • "galleryDisplayMode" 변수는 편집 또는 취소 아이콘의 가시성을 제어합니다. 갤러리가 편집 가능한 경우 취소 단추만 나타납니다. 그리고 갤러리가 비활성화 된 경우에만 편집 단추가 나타납니다.

7. 갤러리 상태에 따라 두 아이콘의 가시성을 관리하기 때문에 편집 및 취소 아이콘을 겹칩니다.

   

   팁

   앱을 미리 보려면 화면 오른쪽 상단의 미리 보기 단추를 누르거나 키보드의 F5 키를 사용하세요. 테스트를 위한 또 다른 빠른 대안은 키보드에서 Alt 키를 누른 상태에서 단추를 선택합니다. 이 방법은 또한 키를 누른 상태에서 특정 선택 항목에 대한 앱의 미리 보기 기능을 시뮬레이션합니다.

6단계: 검색 기능 추가

연결된 데이터 원본의 데이터가 커질수록 특정 행을 찾기가 어려워집니다. 이 단계에서는 앱에 검색 기능을 추가하여 검색된 키워드로 갤러리를 필터링하여 관련 데이터를 더 쉽게 찾을 수 있습니다.

1. 갤러리 위 캔버스 중간에 텍스트 입력 컨트롤을 추가합니다.

2. 갤러리의 항목 속성을 테이블 이름 대신 다음 수식으로 업데이트하여 테이블을 교체하고 적절하게 이름을 제어합니다.

   If(IsBlank(TextInput15.Text),'Editable tables',Filter('Editable tables',(TextInput15.Text in Product) || TextInput15.Text in Segment))
   

   • If 함수는 검색어가 지정되었는지 또는 비어 있는지 조건을 확인합니다. 갤러리는 나열된 항목에 따라 채워집니다.
   • IsBlank 함수는 검색어가 지정되었는지 또는 지정되지 않았는지 조건을 확인합니다.
   • "편집 가능한 테이블"은 이 예에서 연결된 샘플 데이터 원본의 이름입니다. 검색어가 지정되지 않은 경우 이 값이 기본값으로 설정됩니다.
   • Filter 함수는 이 함수 내에 설정된 텍스트 기준에 따라 갤러리의 항목을 필터링합니다. 이 기능은 검색어에 따라 갤러리를 필터링하는 데 사용됩니다.
   • "TextInput15"는 갤러리를 필터링하기 위한 검색 상자로 사용되는 텍스트 입력 컨트롤의 이름입니다.
   • "Product" 및 "Segment"는 .Text 구문을 사용하는 "TextInput15" 컨트롤에 정의된 텍스트를 사용하여 검색되는 열의 이름입니다.
   • "In"은 연결된 데이터 원본의 지정된 열에 대한 텍스트 입력 제어 값을 확인합니다.
   • "||" 조건은 제품 또는 세그먼트 열에 대해 검색을 수행해야 함을 나타내는 "OR" 조건입니다. 마찬가지로 특정 비즈니스 요구 사항에 맞게 수식을 업데이트할 수 있습니다.

   

   팁

   수식 입력줄 내에서 "//"를 사용하여 이전 기능을 유지하거나 주석을 추가할 수 있습니다. 이 방법은 더 복잡한 수식에 더 유용하거나 나중에 되돌리려는 경우에 대비하여 이전 기능을 유지하는 데 유용할 수 있습니다.

7단계: 브랜딩, 프로필 정보, 재설정 등 기타 변경 사항

샘플 앱은 이 자습서의 예상 기능으로 완성되었습니다. 그러나 예를 들어—필터 텍스트 입력 컨트롤, 갤러리 및 앱의 제목—과 같은 브랜딩, 사용자 프로필 세부 정보를 재설정하는 기능 등 추가 고려 사항이 추가될 수 있습니다. 더 많은 작업을 수행할 수도 있습니다. 추가 및 캔버스 앱에서 컨트롤 구성으로 시작해 보세요.

다음 테이블에는 샘플 앱에 추가된 모든 브랜딩, 프로필 및 재설정 정보가 요약되어 있습니다. 이 문서의 앞부분에서 설명한 방법을 사용하여 다양한 컨트롤과 속성을 사용합니다. 테이블, 커넥터 및 제어 이름을 적절하게 바꾸십시오.

기능	Ctrl	속성	추가 정보
화면 상단의 앱 배너/레이블	텍스트 레이블	텍스트 - "관리자 카탈로그 관리" 글꼴 크기 - 28 채우기 색 - 파란색 텍스트 맞춤 - 가운데 맞춤	모든 값을 적절하게 변경하십시오.
화면 오른쪽 위에 사용자 표시 이름 추가	텍스트 레이블	Text - Office365Users.MyProfileV2().displayName	Office 365 사용자에 연결을 추가하여 Microsoft 365에 먼저 연결합니다.
화면 오른쪽 위에 있는 사용자 표시 이름 왼쪽에 사용자 프로필 사진 추가	이미지	Image - Office365Users.UserPhotoV2(Office365Users.MyProfileV2().userPrincipalName)	Office 365 사용자에 연결을 추가하여 Microsoft 365에 먼저 연결합니다.
화면 왼쪽 위에 있는 검색 텍스트 상자 재설정	"다시 로드" 유형의 아이콘	OnSelect - Reset(TextInput15) 여기서 "TextInput15"는 검색 상자로 사용되는 텍스트 입력 컨트롤입니다.	선택하면 검색 텍스트 상자가 재설정되어 갤러리에 기본적으로 모든 데이터가 표시됩니다.
제품 추가 단추 텍스트 업데이트	제품 단추 추가	텍스트 - "새 제품 추가"	적절하게 변경합니다.
현재 제품을 나타내기 위해 검색 입력 상자의 왼쪽에 있는 갤러리 위에 레이블을 추가합니다.	텍스트 레이블	텍스트 - "현재 제품" 글꼴 크기 - 16 글꼴 두께 - 굵게	적절하게 변경합니다.
검색 텍스트 입력 상자에 힌트 텍스트 추가	Text input	힌트 텍스트 - "제품 또는 세그먼트 검색"	적절하게 변경하고 필드 목록(예: 제품, 세그먼트)이 데이터 원본의 열 이름과 일치하는지 확인하십시오.

예를 들어 위에서 구성된 컨트롤과 속성을 사용하여 완성된 화면은 다음과 같습니다.

8단계: 앱 저장, 게시 및 공유

이제 샘플 앱을 완료했으므로 앱을 저장, 게시하거나 조직 내 또는 게스트와 공유합니다.

참조

• 컨트롤 참조
• 수식을 이용한 작업

참고

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

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