练习 - 在 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屏幕，并从“插入”选项卡上的“图标”下拉列表中添加“备注”图标。
通过添加以下行来配置 Note 图标的 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 页中，插入 “产品”、“ 价格”、“ 颜色”和 “备注 ”标签，并相应地重命名它们。
在 “产品”、“ 价格”、“ 颜色”和 “备注 ”旁边插入空标签，如图所示。

按如下所示配置这些空标签的 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。
通过添加 Enter 邮件 ID 配置提示文本属性：在 Default 属性中不存储任何值。根据需要调整字号和颜色。
添加“插入”选项卡中的按钮，并通过添加“确认”配置其 Text 属性。
展开 “图标 ”下拉列表，然后选择“ 返回 ”和“ 开始 ”图标。正确定位它们，如下图所示。

按如下所示配置这两个图标的 OnSelect 属性：

Navigate(Product_details,ScreenTransition.CoverRight)

主页：

Navigate('Home Page',ScreenTransition.CoverRight)

按照相同的过程 Order_carpets作。

创建结束页

创建空白屏幕并将其重命名为 “结束”页。
添加标签，并将其显示文本更改为 “成功提交！”。将标签定位为屏幕上所需的标签。
在屏幕底部添加按钮。通过添加“商店”来配置按钮的 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），请转到应用商店。
- 对于 Android，请转到 Google Play。
在移动设备上打开 Power Apps 并使用Microsoft帐户凭据登录。
登录到 Power Apps 移动应用时，最近使用的应用将显示在默认屏幕上。

登录时，主页是默认屏幕。它显示最近使用的应用以及已标记为收藏夹的应用。
若要在移动设备上运行应用，请选择应用磁贴。如果这是你第一次使用 Power Apps 移动应用运行画布应用，屏幕会显示轻扫手势。
若要关闭应用，请使用手指从应用的左边缘向右轻扫。在 Android 设备上，还可以选择 “后退 ”按钮并确认你打算关闭应用。

注释

如果应用需要连接到数据源或权限才能使用设备的功能（例如相机或位置服务），则必须同意才能使用该应用。通常，仅在首次运行应用时提示你。

反馈

此页面是否有帮助？