练习 - 在 Power Apps 中设计其他页面和电子邮件

10 分钟

在本单元中，你将设计一些额外的页面来支持混合现实功能。这些页面将执行应用程序正常运行所需的某些特定功能。你还将使用 Power Apps 的电子邮件功能，将订单详细信息发送给客户。

创建备注页

用户可在“在 MR 中度量”会话期间拍摄照片，并通过库显示照片。在“备注页”上，可以存储文本说明和“在 MR 中查看”会话期间捕获的图像。

创建两个新的“空白”屏幕，并将其重命名为 Product_notes 和 Carpet_notes。
设计 Product_notes 页面：选择“输入”下拉列表，然后选择“文本输入”。将其重命名为 TextInput_products。
选择“库”>“水平”以包含水平类型的库。将在此库中存储“在 MR 中查看”会话过程中拍摄的照片。将库重命名为 View_products。
将库放置在屏幕的另一个部分。仅保留图像，删除“副标题”和“标题”。放大图像。
选择该库，并通过添加以下行来配置“项”属性：
```
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 页中，插入“产品”、“价格”、“颜色”和“备注”标签，并相应重命名。
在“产品”、“价格”、“颜色”和“备注”旁边插入空标签，如下图所示。

如下配置以下空标签的“文本”属性：

产品：
```
Gallery_products.Selected.Name
```
价格：
```
Gallery_products.Selected.Price
```
颜色：
```
Gallery_products.Selected.Color
```
注意：
```
TextInput_products.Text
```

在顶部添加另一个标签，并将其显示文本更改为“订单摘要”。根据需要更改字号和字体。
展开“库”下拉列表，然后选择“水平”。仅保留图像；删除“库”的其他组件。将其重命名为 Order_gallery_products
通过添加以下行来配置此库的“项”属性：
```
ViewInMR1.Photos
```
添加三个“标签”，将显示文本分别改为“输入电子邮件以获取订单确认邮件”、“组织邮件 ID:”和“客户邮件 ID:”。
展开“输入”下拉列表并选择“文本输入”。将两个“文本输入”组件添加到屏幕中，并按图中所示放置。将它们重命名为 Input1_products 和 Input2_products。
配置“提示文本”属性：添加“输入邮件 ID:”；在“默认”属性中不存储任何值。根据需要调整字体大小和颜色。
从“插入”选项卡中添加一个按钮，并通过添加“确认”来配置其“文本”属性。
展开“图标”下拉列表并选择“返回”和“主页”图标。正确放置图标，如图所示。

如下配置这两个图标的“OnSelect”属性：

Navigate(Product_details,ScreenTransition.CoverRight)

开始：

Navigate('Home Page',ScreenTransition.CoverRight)

为 Order_carpets 执行相同的步骤。

创建结束页

创建一个“空白”屏幕，并将其重命名为“结束页”。
添加“标签”并将其显示文本更改为“订单成功提交！”。将标签置于屏幕上的所需位置。
在屏幕底部添加一个“按钮”。通过添加“购买更多”，配置该按钮的“文本”属性。引导用户进入主页：选择“购买更多”按钮，然后在“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 设备上，还可以选择“后退”按钮，并确认你打算关闭应用。

注意

如果应用需要连接数据源，或必须征得同意才能使用设备功能（例如照相机或定位服务），必须先确认连接或予以同意，然后才能使用应用。通常，只会在首次运行应用时收到提示。