연습 - Power Apps에서 추가 페이지 및 메일 디자인

10분

이 단원에서는 혼합 현실 기능을 지원하기 위해 몇 가지 추가 페이지를 디자인합니다. 이러한 페이지는 애플리케이션이 적절하게 동작하기 위해 필요한 몇 가지 특정 함수를 수행합니다. 또한 Power Apps의 전자 메일 기능을 사용하여 주문 세부 정보를 고객에게 보냅니다.

노트 만들기 페이지

사용자는 MR 세션의 보기 중에 사진을 찍어 갤러리를 통해 표시할 수 있습니다. 메모 페이지에서MR 세션에서 보기 중에 캡처한 텍스트 노트와 이미지를 저장할 수 있습니다.

두 개의 새 빈 화면을 만들고 Product_notes 이름을 바꾸고 Carpet_notes.
Product_notes 페이지 디자인: 입력 드롭다운을 선택한 다음 텍스트 입력을 선택합니다. 이름을 TextInput_products.
갤러리> 가로 형식을 포함하려면가로 갤러리를 선택합니다. 이 갤러리의 MR 세션에서 보기 중에 찍은 사진을 저장합니다. 갤러리 View_products 이름을 바꿉니다.
갤러리를 화면의 다른 부분에 배치합니다. 부제목과 제목을 삭제하여 이미지만 유지합니다. 이미지를 확대합니다.
갤러리를 선택하고 다음 줄을 추가하여 Items 속성을 구성합니다.
```
ViewInMR1.Photos
```
MR 세션의 보기에서 찍은 모든 사진은 이후 참조를 위해 이 갤러리에 저장됩니다.
화면 맨 위에 레이블을 삽입해 보겠습니다. 레이블 옵션을 선택한 다음 가운데에 맞춥니다. 필요에 따라 위치, 색 및 텍스트 표시를 사용자 지정합니다. 이름을 Notes_label.
사용자가 필요할 때 홈페이지로 이동할 수 있도록 이전에 추가한 레이블 위에 뒤로 아이콘을 배치합니다. 뒤로 아이콘을 추가하려면 삽입 탭에서 아이콘 드롭다운을 확장한 다음 뒤로 아이콘을 선택합니다.
뒤로 아이콘을 올바르게 배치하고 다음을 추가하여 OnSelect 속성을 구성합니다.
```
Navigate(Product_details,ScreenTransition.Cover)
```
Product_details 화면으로 전환하고 삽입 탭의 아이콘 드롭다운에서 메모 아이콘을 추가합니다.
다음 줄을 추가하여 메모 아이콘의 OnSelect 속성을 구성합니다.
```
Navigate(Product_notes,ScreenTransition.CoverRight)
```
Notes_carpets 동일한 프로시저를 복제합니다.

비고

카펫 범주의 MR 기능에는 뷰를 포함하지 않습니다. Notes_carpets 페이지의 경우 MR 세션에서 보기 중에 찍은 사진을 저장할 갤러리 컨트롤을 추가하지 않습니다.

팁 (조언)

키보드에서 F5 키를 누르거나 Power Apps Studio의 오른쪽 위 모서리에 있는 재생 단추를 선택하여 애플리케이션을 테스트할 수 있습니다.

주문 요약 페이지 만들기

Product_details 및Carpet_details 화면에 단추를 추가합니다. 단추 Order_product 이름을 바꾸고 Order_carpet. 단추의 표시 텍스트를 순서로 변경합니다.
두 개의 새 빈 화면을 만들고 Order_products 이름을 바꾸고 Order_carpets.
Product_details 화면을 선택한 다음 다음과 같이 주문 단추의 OnSelect 속성을 구성합니다.
```
Navigate('Order_products',ScreenTransition.Cover)
```
Carpet_details 화면에 대해 동일한 절차를 따릅니다.
Order_products 페이지에서 Product, Price, Color 및 Notes 레이블을 삽입하고 그에 따라 이름을 바꿉니다.
그림과 같이 제품, 가격, 색 및 노트 옆에 빈 레이블을 삽입합니다.

다음과 같이 빈 레이블의 Text 속성을 구성합니다.

제품:
```
Gallery_products.Selected.Name
```
가격:
```
Gallery_products.Selected.Price
```
색:
```
Gallery_products.Selected.Color
```
참고:
```
TextInput_products.Text
```

맨 위에 다른 레이블을 추가하고 표시 텍스트를 주문 요약으로 변경합니다. 필요에 따라 글꼴 크기와 글꼴을 변경합니다.
갤러리 드롭다운을 확장하고 가로를 선택합니다. 이미지만 유지합니다. 갤러리의 다른 구성 요소를 삭제합니다. 이름을 Order_gallery_products
다음 줄을 추가하여 이 갤러리의 Items 속성을 구성합니다.
```
ViewInMR1.Photos
```
세 개의 레이블을 추가하고 표시 텍스트를 전자 메일 입력으로 변경하여 주문 확인 메일!, 조직 메일 ID: 및 고객 메일 ID:를 각각 가져옵니다.
입력 드롭다운을 확장하고 텍스트 입력을 선택합니다. 화면에 두 개의 텍스트 입력 구성 요소를 추가하고 이미지에 표시된 대로 배치합니다. 이름을 Input1_products 이름을 바꾸고 Input2_products.
메일 ID 입력을 추가하여 힌트 텍스트 속성을 구성합니다. 기본 속성에 값을 저장하지 않습니다. 필요에 따라 글꼴 크기와 색을 조정합니다.
삽입 탭에서 단추를 추가하고 확인을 추가하여 텍스트 속성을 구성합니다.
아이콘 드롭다운 을 확장하고 뒤로 및 홈 아이콘을 선택합니다. 이미지에 표시된 대로 올바르게 배치합니다.

다음과 같이 두 아이콘의 OnSelect 속성을 구성합니다.

뒤로:

Navigate(Product_details,ScreenTransition.CoverRight)

홈:

Navigate('Home Page',ScreenTransition.CoverRight)

Order_carpets 대해 동일한 절차를 따릅니다.

끝 페이지 만들기

빈 화면을 만들고 끝 페이지의 이름을 바꿉니다.
레이블을 추가하고 표시 텍스트를 성공적으로 제출된 주문으로 변경합니다!. 화면에 필요에 따라 레이블을 배치합니다.
화면 아래쪽에 단추를 추가합니다. Shop을 더 추가하여 단추의 Text 속성을 구성 합니다. 사용자를 홈페이지로 보내겠습니다. 더 보기 단추를 선택한 다음 OnSelect 속성에 다음 줄을 추가합니다.
```
Navigate('Home Page',ScreenTransition.Cover)
```
미디어 드롭다운을 확장하고 이미지를 선택하여 끝 페이지에 이미지 구성 요소를 추가합니다.
이미지에 표시된 대로 이미지를 배치합니다. 표시할 로고 파일을 선택합니다.

팁 (조언)

위쪽의 파일 탭을 선택하고 저장 옵션을 선택하여 애플리케이션을 자주 저장 합니다. 메시지가 표시되면 클라우드 옵션을 선택한 다음 저장을 선택합니다.

Power Apps를 통해 전자 메일 보내기

데이터 탭을 선택하고 + 데이터 추가를 선택합니다. 커넥터를 확장한 다음 Office 365 Outlook을 선택하여 이 애플리케이션의 커넥터 중 하나로 추가합니다.

Order_products 열고 다음 줄을 추가하여 확인 단추의 OnSelect 속성을 구성합니다.

Office365Outlook.SendEmailV2(Input1_products & ";"& Input2_products,"Order Summary","<b> Your order is successfully submitted! </b> <br> Order details are as follows: <ul> <li> Product: " & Order_product_name_details & "</li> <li> Price: " & Order_price_details & "</li> <li> Color: " & Order_color_details & "</li> </ul>Notes: " & TextInput_products & "<br><b> Thank you for shopping with us! </b>");
Navigate('End page',ScreenTransition.Cover)

비고

이전 함수에 사용된 이름은 개발 시 이 애플리케이션에 사용된 명명 규칙을 따릅니다. 애플리케이션에 따라 함수를 사용자 지정할 수 있습니다.

이전 단계를 구현하면 애플리케이션이 다음과 같은 방식으로 작동하게 됩니다. 애플리케이션에는 모든 세션 노트를 저장하는 메모 페이지 , 주문을 검토하고 메일을 보내는 주문 요약 페이지 , 애플리케이션에 대한 훌륭한 폐쇄를 제공하는 종료 페이지 가 포함됩니다.

모바일 디바이스에서 애플리케이션 테스트

디바이스에 대한 다운로드 링크를 선택합니다.
- iOS(iPad 또는 iPhone)의 경우 App Store로 이동합니다.
- Android의 경우 Google Play로 이동합니다.
모바일 장치에서 Power Apps를 열고 Microsoft 계정 자격 증명으로 로그인합니다.
최근에 사용한 앱은 Power Apps 모바일에 로그인할 때 기본 화면에 표시됩니다.

홈은 로그인할 때 기본 화면입니다. 최근에 사용한 앱과 즐겨찾기로 표시한 앱이 표시됩니다.
모바일 디바이스에서 앱을 실행하려면 앱 타일을 선택합니다. Power Apps 모바일을 사용하여 캔버스 앱을 처음 실행하는 경우 화면에 살짝 밀기 제스처가 표시됩니다.
앱을 닫려면 손가락을 사용하여 앱의 왼쪽 가장자리에서 오른쪽으로 살짝 밉다. Android 디바이스에서 뒤로 단추를 선택하고 앱을 닫으려고 했는지 확인할 수도 있습니다.

비고

앱이 데이터 원본에 연결하거나 디바이스의 기능(예: 카메라 또는 위치 서비스)을 사용할 수 있는 권한이 필요한 경우 앱을 사용하려면 먼저 동의해야 합니다. 일반적으로 앱을 처음 실행할 때만 메시지가 표시됩니다.

피드백

이 페이지가 도움이 되었나요?