MS Power Apps 세부 정보 화면 및 양식 화면

이 자습서에서는 처음부터 Power Apps에서 세부 정보 화면과 양식 화면을 만드는 방법에 대해 설명합니다.

Power Apps는 사용하기 쉽도록 제작되었기 때문에 기존 화면, 갤러리 및 기타 기본 요소가 있는 템플릿과 함께 쉽게 제공됩니다 . 그러나 앱을 빌드하는 데 고유한 목표가 있을 수 있음을 알고 처음부터 고유한 앱을 빌드해야 하는 경우가 있습니다.

그렇기 때문에 앱을 만드는 빌딩 블록을 이해하는 것이 중요합니다. 화면도 그 중 하나입니다.

목차

• MS Power Apps에서 상세 화면 만들기
• 갤러리를 상세 화면에 연결하기
• 갤러리와 상세 화면 간 탐색
• 양식 편집 화면 만들기
• 제출 버튼 기능 만들기
• 편집 화면과 세부 정보 화면 간 탐색
• MS Power Apps에서 새 양식 화면 만들기
• MS Power Apps에서 새 양식과 편집 양식 간 전환
• 뒤로 기능 사용
• 결론

MS Power Apps에서 상세 화면 만들기

세부 정보 화면에는 데이터 원본의 각 레코드와 함께 제공되는 모든 정보가 포함되어 있습니다.

아래 예에서는 다양한 레코드를 표시하는 갤러리를 볼 수 있습니다. 갤러리에는 해당 레코드의 미리 보기만 포함됩니다. 이 경우 Viki Darling 항목을 보면 이름, 성, 위치 및 VIP 레벨이 표시됩니다.

그러나이 항목에는 다른 많은 세부 정보가 있습니다. 데이터 소스를 보면 고객 번호, 가입 날짜, 여권 번호 및 에이전트 이름도 있음을 알 수 있습니다.

바로 상세 화면입니다. 사용자가 갤러리의 진입점을 클릭하는 순간 방문하게 되는 화면입니다. 여기에서 갤러리에 표시되지 않는 다른 모든 세부 정보를 볼 수 있습니다.

세부 정보 화면 만들기를 시작하려면 MasterScreen으로 돌아가 복제합니다.

마스터 화면에서 시작하는 것은 처음부터 앱을 만드는 방법에 대한 자습서에서 논의한 내용입니다. 앱의 기본 요소가 포함된 마스터 화면이 있으면 모양과 레이아웃 측면에서 모든 화면을 균일하게 유지하기가 쉽습니다.

복제 화면의 이름을 DetailScreen으로 바꾸겠습니다.

상단의 레이블도 변경하고 Customer Details를 작성해 봅시다.

처음부터 이 화면을 만들고 있지만 모든 세부 사항을 수동으로 추가할 필요는 없습니다. Power Apps는 우리를 위해 전체 프로세스를 자동화했습니다.

삽입 리본 아래에서 수행할 수 있는 표시 양식을 추가하여 시작하겠습니다.

이 화면은 실제로 고객 세부 정보를 표시하는 것 외에 다른 용도가 없기 때문에 모서리를 드래그하여 양식이 전체 화면을 채우도록 할 수 있습니다.

상세 화면에는 데이터 소스가 필요합니다. 속성 아래의 오른쪽 창에서 여기 데이터 소스를 연결할 수 있습니다. 이 앱에서는 Table1을 사용하고 있습니다.

세부 정보를 가져올 데이터 소스가 있으므로 이제 화면에 표시할 세부 정보를 결정할 차례입니다. 필드 편집을 클릭하면 됩니다.

목적에 적합하다고 생각되는 모든 필드를 선택하여 필드를 추가할 수 있습니다. 이 경우 이러한 필드를 모두 추가해 보겠습니다.

그러면 Power Apps가 선택한 모든 필드를 방금 만든 양식인 FormViewer1에 로드합니다.

클릭하면 데이터 소스의 서로 다른 각 열에 대한 데이터 카드가 자동으로 설정되었음을 보여줍니다.

그리고 각 데이터 카드에 대해 실제로 데이터 카드가 무엇인지 포함하는 키를 설정했습니다.

또한 해당 열과 관련된 실제 값을 표시하는 값을 설정했습니다.

현재 이 양식에는 아직 값이 표시되지 않습니다. 갤러리를 DetailScreen에 아직 연결하지 않았기 때문입니다. 여기서도 목표는 갤러리에서 레코드를 선택한 후에만 세부 정보를 표시하는 것입니다.

갤러리를 상세 화면에 연결하기

Power Apps 의 갤러리에 대한 좋은 점은 Selected라는 속성이 있다는 것입니다. 기본적으로 갤러리를 세부 정보 화면에 연결하여 갤러리에서 레코드를 선택할 때마다 해당 특정 항목에 대한 세부 정보만 표시합니다.

이를 위해 FormViewer1을 강조 표시하고 Item 속성으로 이동합니다.

특히 앱에서 여러 갤러리를 사용하는 경우 여기에서 올바른 갤러리를 참조하고 있는지 확인하세요. 이 경우 Gallery2를 사용하려고 합니다.

세부 정보 화면의 수식 입력줄로 돌아가서 Gallery2.Selected를 입력하고 Enter 키를 누릅니다.

이제 갤러리에서 마지막으로 선택한 것이 무엇이든 여기에서 세부 정보를 볼 수 있습니다.

고객 보기 화면으로 돌아가 갤러리에서 Viki Darling을 선택합니다.

그것을 클릭하면 세부 정보 화면의 세부 정보도 변경되어 이제 Viki Darling에 대한 정보가 표시되는 것을 볼 수 있습니다.

이는 이러한 화면과 그 안의 요소 사이의 관계를 강조합니다. 세부 정보 화면의 필드는 양식 뷰어의 항목 속성에 의해 구동되고 갤러리에서 선택한 레코드에 의해 구동됩니다.

갤러리와 상세 화면 간 탐색

현재로서는 갤러리에서 항목을 선택하고 수동으로 세부 정보 화면으로 이동해야만 세부 정보를 볼 수 있습니다. 이상적으로는 사용자가 항목을 클릭하는 순간 자동으로 세부 정보 화면으로 이동해야 합니다. 따라서 화면 사이에 탐색 기능을 추가할 것입니다.

세부 정보 화면에서 갤러리로 돌아가는 탐색부터 시작하겠습니다. 삽입 리본 아래의 아이콘 버튼을 통해 왼쪽 화살표를 추가합니다.

화면의 다른 요소와 일치하도록 색상을 흰색으로 변경해 보겠습니다.

아이콘이 강조 표시된 상태에서 탐색 기능을 사용하고 아이콘을 놓을 화면을 참조해 보겠습니다. 이 경우에는 ViewCustomersScreen입니다.

한 화면에서 다른 화면으로 이동할 때 시각적으로 더 매력적으로 보이게 하려면 페이드 전환을 사용해 보겠습니다.

그런 다음 Enter 키를 눌러 해당 수식을 잠급니다. 일단 그렇게하면 아이콘을 클릭하기 만하면됩니다.

그러면 View Customers 화면이 나타납니다.

이번에는 고객 보기 화면에서 상세 화면으로 넘어가겠습니다.

이번에는 갤러리 내에서 다른 기록을 다루고 있습니다. 그러나 이것이 각 항목에 대해 다른 작업을 만들어야 한다는 의미는 아닙니다. 갤러리를 강조 표시하고 속성 드롭다운에서 OnSelect를 선택하기만 하면 됩니다.

Navigate 함수를 다시 사용하고 DetailScreen을 참조합니다. 이전에 사용한 것과 동일한 전환을 사용합니다. 그런 다음 Enter 키를 눌러 해당 수식을 잠급니다.

수식을 설정했으므로 이제 Megan Rohman의 기록을 클릭해 보겠습니다.

이제 Megan Rohman의 세부 정보가 화면에 자동으로 채워지는 세부 정보 화면으로 바로 이동합니다.

그리고 세부 정보 화면에서 고객 보기 화면으로의 탐색을 설정했기 때문에 화살표 아이콘을 클릭하기만 하면 바로 갤러리로 돌아갑니다.

양식 편집 화면 만들기

데이터 소스가 모든 정보를 제공하지만 고객 정보를 업데이트해야 하는 경우가 있습니다. 즉, 양식 편집 화면도 필요합니다.

이제 마스터 화면의 복제본을 하나 더 만들고 이름을 EditScreen으로 바꾸겠습니다.

동일한 화면을 사용하여 새 고객을 추가할 것이므로 레이블을 New / Edit Customers로 변경하겠습니다.

이 화면에서는 편집 양식을 삽입합니다.

앞에서 추가한 표시 형식과 마찬가지로 데이터 소스를 추가해야 합니다. Table1을 다시 선택하겠습니다.

필드를 추가하는 것은 가지고 있는 데이터와 염두에 두고 있는 최종 사용자에 따라 달라집니다. 예를 들어 고객의 여권 번호는 실제로 변경되지 않습니다. 따라서 양식에서 제외하고 싶을 수도 있습니다.

지금은 모든 것을 추가하겠습니다. 이번에는 각 필드 아래에 공백이 있는 것을 볼 수 있습니다.

이러한 공간도 편집할 수 있습니다. 예를 들어 DateJoined에서는 실제로 시간이 필요하지 않습니다. 날짜만 있으면 됩니다.

또한 필드에 공백이 없음을 알 수 있습니다. 그것도 우리가 바꿀 수 있는 한 가지입니다. FirstName 대신 First Name을 말할 수 있습니다.

이러한 변경 사항은 나중에 다루겠습니다. 지금은 View Customers 화면에서 선택한 고객의 세부 정보가 이 양식 편집 화면에 표시되는지 확인해야 합니다.

Form2가 강조 표시된 상태에서 Items 속성으로 이동하여 이를 Gallery2.Selected와 동일시합니다.

이제 양식에 고객 중 한 명의 세부 정보가 표시됩니다.

편집을 시작하면 변경 사항을 제출하기 위해 클릭할 버튼이 필요합니다. 삽입 리본을 통해 버튼을 추가해 보겠습니다.

버튼에 레이블을 지정하고 제출이라고 작성합니다.

양식에는 편집, 새로 만들기 및 보기의 세 가지 모드가 있습니다. 현재 이 양식은 편집 모드입니다. 즉, 이러한 필드로 이동하여 항목을 변경할 수 있습니다.

이와 대조적으로 상세 화면은 기술적으로 디스플레이 갤러리입니다. 그렇기 때문에 오른쪽 창의 속성을 보면 이것도 양식인 경우에도 편집할 수 있는 옵션이 제공되지 않습니다.

표시 형식은 이 편집 화면이 보기 모드일 때 작동하는 방식과 유사합니다. 편집할 수 없도록 모든 항목을 잠급니다.

그렇기 때문에 갤러리의 항목을 변경해야 하는 경우 양식이 편집 모드여야 합니다. 또한 실제로 양식을 제출하고 기본 레코드를 업데이트하려면 하단의 제출 버튼이 작동해야 합니다.

제출 버튼 기능 만들기

제출 단추를 클릭할 때마다 작업을 잠그려면 OnSelect 속성으로 이동하여 수식 입력줄에 SubmitForm을 작성해야 합니���.

SubmitForm은 양식의 모든 업데이트를 집계하고 해당 변경 사항을 제출하는 기능입니다. 또한 제출하려는 실제 양식(이 경우 Form2)도 사용합니다.

이제 수식이 고정되면 어떤 일이 발생하는지 살펴보겠습니다. 현재 Coy Newell의 위치는 United States로 표시됩니다.

캐나다로 변경하고 제출을 클릭합니다.

이제 세부정보 화면으로 돌아가면 캐나다가 위치로 표시됩니다.

편집 화면으로 돌아가 이번에는 성을 변경해 보겠습니다. 따라서 Newell 대신 Smith로 변경하고 제출을 클릭합니다.

다시 세부 정보 화면으로 이동하면 여기에서도 변경 사항이 적용되었음을 알 수 있습니다.

고객 보기 화면으로 이동하면 Coy Newell이 이제 Coy Smith이고 위치가 이제 미국이 아닌 캐나다인 것도 표시됩니다.

이것은 우리가 작업할 때 백그라운드에서 업데이트되고 현재 작업 중인 것과 연결된 모든 화면의 데이터가 변경되고 있음을 보여줍니다. 이렇게 하면 우리가 가지고 있는 정보를 훨씬 쉽게 변경할 수 있습니다.

편집 화면과 세부 정보 화면 간 탐색

이제 편집 화면이 있으므로 세부 정보 화면에서 해당 페이지로 이동하는 방법을 원합니다. 편집 아이콘을 추가해 보겠습니다.

다시 한 번 색상을 변경하여 다른 모든 요소와 균일하게 만듭니다.

아이콘이 강조 표시된 상태에서 OnSelect 속성을 선택하고 Navigate 함수를 사용하여 이 아이콘이 안내할 화면인 편집 화면을 참조합니다. 이번에는 화면 전환을 추가하지 않겠습니다.

이제 편집 화면에서 수행한 변경 사항을 제출한 후 세부 정보 화면으로 돌아갈 수 있기를 원합니다. 따라서 뒤로 아이콘을 추가하고 동일한 수식을 사용하되 이번에는 DetailScreen으로 돌아가겠습니다.

추가 탐색 기능을 사용하면 앱이 게시된 후 최종 사용자가 한 화면에서 다른 화면으로 더 쉽게 이동할 수 있습니다.

MS Power Apps에서 새 양식 화면 만들기

양식 편집 화면이 있으므로 사용자가 아직 갤러리에 없는 레코드를 추가할 수 있도록 허용해야 합니다. 이번에는 새로운 양식을 추가하지 않을 것입니다. 대신 마지막 화면에 New / Edit Customers 레이블을 지정했기 때문에 기존 화면을 사용하겠습니다.

앞에서 Power Apps의 양식을 사용하면 편집 및 보기 모드로 이동할 수 있을 뿐만 아니라 새 모드로 이동할 수도 있다고 언급했습니다.

기본적으로 새 모드로 들어가는 것은 모든 텍스트 상자가 비어 있음을 의미합니다. 상자에 무엇이든 쓰고 제출을 누르면 기존 항목을 편집하는 대신 레코드가 추가됩니다.

따라서 우리가 할 수 있어야 하는 것은 필요에 따라 이 양식의 모드를 edit에서 new로 변경한 다음 new에서 edit로 변경하는 것입니다.

마스터 화면 만들기에 대한 이전 튜토리얼 에서 만든 홈 화면부터 시작하겠습니다 . 보시다시피 새 고객을 추가하기 위한 버튼이 이미 있습니다.

현재 이 버튼은 아직 어떤 화면으로도 연결되지 않습니다. 버튼을 강조 표시하고 OnSelect로 이동한 다음 Navigate 기능을 사용하여 EditScreen으로 연결해 보겠습니다.

이제 홈 페이지에서 해당 버튼을 클릭할 때마다 편집 화면으로 이동합니다.

문제는 이 화면에 이전에 편집했던 모든 세부 정보가 여전히 남아 있다는 것입니다. 새 고객을 추가하고 있으므로 빈 화면이 있는 것이 좋습니다.

이제 홈 화면으로 돌아가서 NewForm이라는 또 다른 기능을 추가해 보겠습니다. NewForm은 양식에 도달하기 전에 먼저 양식을 새 모드로 전환합니다.

이 함수는 새 모드로 전환하려는 실제 양식이 필요하므로 Form2를 참조합니다.

두 함수 사이에 세미콜론을 사용했습니다. 기본적으로 세미콜론은 이러한 기능이 실행되는 순서를 나타냅니다. 먼저 NewForm 기능을 실행하고 완료되면 Navigate 기능을 실행하는 유일한 시간입니다.

수식을 수정했으므로 이제 새 고객 추가 버튼을 클릭하면 빈 양식이 표시됩니다.

MS Power Apps에서 새 양식과 편집 양식 간 전환

갤러리로 돌아가서 Viki Darling의 기록을 클릭해 보겠습니다.

여기에서 일부 필드를 편집하고 싶다고 가정해 보겠습니다. 편집 아이콘을 클릭하겠습니다.

문제는 우리가 편집 양식이 아닌 새로운 양식에 도달하고 있다는 것입니다. 새 고객 추가 버튼에 대한 탐색을 만들 때 새 양식으로 남겨두었기 때문입니다.

그래서 이번에는 편집 아이콘이 해당 화면에 도달하기 전에 양식을 편집 모드로 전환하기를 원합니다. 그렇게 하기 위해 새 양식에 대해 수행한 것과 동일한 수식을 사용하지만 대신 EditForm 함수를 사용할 것입니다.

EditForm 함수는 참조되는 양식을 현재 모드에서 편집 모드로 변경합니다. 설정이 완료되면 세부 정보 화면에서 편집 아이콘을 클릭할 때마다 이제 편집 모드의 편집 화면으로 이동합니다.

이것은 제출 버튼을 제출할 때 새 항목을 추가하는 대신 기존 레코드를 업데이트한다는 의미이기도 합니다.

뒤로 기능 사용

이제 필요한 양식이 있으므로 탐색을 다시 확인하여 최종 사용자가 올바른 화면에 방문하는지 확인하십시오.

홈 화면에서 새 고객을 추가하기로 결정했다고 가정해 보겠습니다. 빈 양식으로 연결되는 버튼을 클릭합니다. 하지만 마음이 바뀌고 뒤로 버튼을 클릭합니다.

하지만 그렇게 해도 홈 화면으로 돌아가지 않습니다. 대신 세부 정보 화면으로 이동합니다.

무슨 일이 있었는지 알아보려면 뒤로 아이콘으로 이동하여 첨부된 작업을 살펴보겠습니다. 기본적으로 세부 정보 화면으로 이동하도록 뒤로 버튼을 설정한 것으로 나타났습니다.

여기서 우리가 원하는 것은 여기에 착륙하기 전에 있던 이전 화면으로 돌아가는 것입니다. 즉, Navigate 기능을 사용하여 특정 화면을 참조하는 대신 Back 기능으로 전환해야 합니다.

이 기능은 어떤 화면도 참조할 필요가 없습니다. 어떤 화면에서 왔는지에 따라 동작이 변경됩니다. 즉, 홈 화면에서 왔든 상세 화면에서 왔든 이제 뒤로 기능을 클릭하면 마지막으로 방문한 화면으로 이동합니다.

Power Apps 소개: 정의, 기능, 기능 및 중요성
Power Apps 환경: 앱 요소를 적절하게 설정
PowerApps 기능 및 수식 | 소개

결론

세부 사항, 편집 및 새로운 양식 화면이 갖춰지면서 앱이 서서히 형태를 갖춰가고 거의 게시할 준비가 되었습니다. 이것이 Power Apps의 좋은 점입니다. 템플릿으로 시작하든 처음부터 앱을 생성하든 상관없이 모든 것이 간단하고 쉽게 만들 수 있습니다.

또한 페이지 간 탐색이 제대로 작동하는지 확인하는 것이 얼마나 중요한지 확인했습니다. 이는 앱이 출시된 후 최종 사용자에게 충분히 직관적인지 확인하는 데 중요한 역할을 합니다.

모두 제일 좋다,

헨리