第 3 章：构建低代码原型

项目
04/25/2023

备注

第 2 章引用了现场技术人员和工程师所使用的移动应用以及本地员工所使用的桌面应用。以下章节着重介绍使用 Power Apps 构建的移动应用的设计、实施和推出。桌面应用留给读者作为练习。

Kiana 对低代码解决方案和 Power Apps 持怀疑态度。但是 Kiana 和 Maria 决定一起构建一个应用以帮助现场技术人员检查库存（如果需要，订购零件），查询知识库，并在他们因维修请求而离开办公室时查看其下一个约会。 Kiana 和 Maria 计划使用此体验来了解如何在 Power Apps 中添加控件和使用公式。

虽然构建初始的低代码原型通常是平民开发者任务，Kiana 决定关注该流程以了解应用的构建方式。 Kiana 需要此信息以帮助 Maria 将实际数据源、Web API 和其他所需服务集成到应用中。

项目 1：现场库存管理

Maria 的初始目标是构建一个画布应用，以显示零件列表并使用户能够查看任何零件的详细信息。最后，用户还应该能够订购零件；但是，此初始版本的应用只是一个原型，还没有连接到后端。在从 Caleb（潜在顾客现场技术人员）获得反馈后，Maria 与 Kiana 一起将画布应用与本地运行的库存系统相集成。

Maria 非常熟悉现有库存管理系统并了解它包含的信息。 Maria 首先创建一个 Excel 工作簿，其中包含用于存储某些示例零件详细信息的模拟数据的表。表中的字段包括 ID、名称、CategoryID、价格、概述、NumberInStock 和图像（引用零件图像的 URL）。该工作簿可用于构建和测试画布应用，以确保它正确显示所需的数据。 Maria 将此工作薄存储在名称为 BoilerParts.xlsx 的 OneDrive 帐户中。

备注

您可以在本指南的 Git 存储库的资产文件夹中找到此工作薄的副本。

样本零件工作表，显示具有 ID、名称、CategoryId、价格、概述、NumberInStock 和图像列的零件列表。

如果您是关系数据库设计者，您将注意到 Excel 工作簿显示非规范化的数据视图。例如，在关系数据库中，CategoryID 很有可能是数字标识符，用于引用包含类别的详细信息（包括名称）的单独表。

备注

图像列中的 URL 当前只是占位符。在已完成的应用中，这些 URL 将替换为真实图像文件的地址。

按照以下步骤创建具有 Power Apps 的应用。

登录到 Power Apps。
在主页上，在从数据开始下，选择 Excel Online。
在连接页面上，选择 OneDrive for Business，然后选择创建。
在 OneDrive for Business 页面上，选择 BoilerParts.xlsx 文件。
选择 Excel 文件形式的表（Maria 使用默认名称 Table1 创建了该表），然后选择连接。
等待 Power Apps 生成应用。
生成应用后，您将看到浏览屏幕，其中显示工作薄中零件表的每行中的 CategoryID、ID 和图像字段。
当前显示的字段对帮助工程师选择产品不是十分有用。在显示浏览屏幕的窗格上，在数据的第一行中选择换热器标签。在公式栏中，从下拉列表中选择文本属性。将此属性的值更改为 ThisItem.Name。将切换每行第一个字段中的文本以显示零件名称。

备注

在下图中，最初显示在窗体上的换热器标签已更改为产品名称 3.5 W/S Heater。
对 ID 和图像标签重复上一步。将 ID 字段的文本属性更改为 CategoryID，将图像字段的文本属性更改为概述。浏览屏幕现在应如下图所示，现场工程师可能会发现它对选择零件很有用。
浏览屏幕的搜索功能默认使用最初在生成屏幕时选择的字段—在此情况下，为 CategoryID、ID 和图像。结果按 CategoryID 排序。将此切换为名称、CategoryID 和概述字段是有意义的，结果按名称排序。在树视图窗格上选择 BrowseGallery1 控件。在公式栏左侧的下拉列表中，选择项目属性。向下拖动公式栏的下边缘，以便公式完全可见。公式包含以下表达式：
```
**SortByColumns(Search([\@Table1], TextSearchBox1.Text, "CategoryID","ID","Image"), "CategoryID", If(SortDescending1, Descending, Ascending))
```

使用以下公式：更改搜索表达式以引用名称、CategoryID 和概述字段：

SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))

窗体标头中的标题没有帮助，默认主题与 VanArsdel 的公司外观不匹配。在浏览屏幕中，选择 Table1 标签，在公式栏上，将标签的文本属性更改为 "Browse Parts"（在值中包括双引号）。
在工具栏上，选择主题（可能必须扩展工具栏以显示更多项目），然后选择森林主题。将更改浏览屏幕的颜色和样式以匹配主题。

使“详细信息”屏幕更加有用

您创建了基本应用并修改了浏览屏幕以显示工程师可用于识别零件的字段。应用还包含详细信息屏幕，其中显示所选零件的所有信息。此屏幕上的字段当前未按逻辑顺序显示，因此应重新排列它们。还可以从此屏幕中删除 ID 字段，因为此信息与工程师无关。

在树视图窗格上，向下滚动并选择 DetailScreen1。此屏幕显示有关用户在浏览屏幕上选择的零件的详细信息。
在中间窗格上的详细信息屏幕的标头中，选择 Table1 标签。在右侧窗格的属性选项卡上，将文本属性更改为零件详细信息。

备注

在许多情况下，您可以使用公式栏作为属性窗格来实现相同结果。但是，某些属性仅通过属性窗格可用。
在树视图窗格上，在 DetailScreen1 下，选择 DetailForm1。在右侧窗格的属性选项卡上，选择字段旁边的编辑字段。在中间窗格上，选择并拖动字段，以便它们按下面从上到下的顺序显示：
- 客户
- CategoryID
- 概述
- 单价
- NumberInStock
- 图像
- ID
选择 ID 字段，选择字段右侧显示的省略号，然后从显示的下拉菜单中选择删除。此操作将从窗体中删除 ID 字段。
在树视图窗格上，在 DetailForm1 下，选择 CategoryID_DataCard1。此元素是用于显示字段名称（称为密钥）及其值的 DataCard 控件。

在右侧窗格的高级选项卡上，选择解锁以更改属性。在数据部分中，将 DisplayName 字段更改为 "Category"（包括双引号）。

备注

与属性选项卡一样，高级选项卡上的许多属性也可通过公式栏访问。若要设置这些属性，您可以根据需要使用公式栏。
重复上一步以将 NumberInStock_DataCard1 的密钥更改为 "Number in Stock"（包括双引号）。
您需要调整价格字段的格式以将数据显示为货币值。在树视图窗格上，在 DetailForm1 下，在 Price_DataCard1 下，选择 DataCardValue7。此字段用于显示价格字段的值。在右侧的 DataCardValue7 窗格的高级选项卡上，将文本属性更改为 Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

表达式 Parent.Default 引用父控件 (DataCard) 绑定到的数据项目—在此情况下，为价格列。文本函数使用指定为第二个参数的格式重新格式化此值；在此示例中，这是具有两位小数的本地货币。
图像数据卡应显示零件的图像，而不是图像文件的 URL。在树视图窗格上，在 DetailForm1 下，在 图像_DataCard1 下，选择 DataCardValue3，然后选择删除以删除此控件。
选择 图像_DataCard1。在左侧窗格上，选择 + 插入。在插入窗格上，展开媒体，然后选择图像。
返回到树视图窗格，验证 Image1 文本控件是否已添加到 图像_DataCard1 控件。
在树视图窗格上，选择 图像_DataCard1。在右侧窗格的高级选项卡上，将高度更改为 500，以便有足够的空间显示图像。
在树视图窗格上，选择 Image1。设置以下属性：
- 图像：Parent.Default
- ImagePosition：ImagePosition.Fit
- 宽度：550
- 高度：550
备注

显示的图像当前为空，因为 Excel 工作薄中的 URL 只是占位符。在后面的章节中，当将应用绑定到 Web API 时，您将解决此问题，并获取一个真正的 URL。

应用还包含一个编辑屏幕，使用户能够更改零件的信息。工程师不能更改零件的详细信息，创建新零件或从目录中删除零件。

在树视图窗格上，选择 EditScreen1。选择省略号按钮，然后选择删除以删除此屏幕。
在树视图窗格上，选择 DetailsScreen1。请注意，Power Apps Studio 显示此屏幕的错误消息。因为 DetailsScreen1 包含的表达式引用了不再存在的 EditScreen1 屏幕，因此出现此错误。
在 DetailsScreen1 的标头中，选择铅笔 (IconEdit1) 图标。此控件的 OnSelect 属性包含表达式 EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)。选择编辑图标时，此表达式运行并尝试移动到 EditScreen1 屏幕。
在树视图窗格上，选择 IconEdit1，然后选择删除。不再需要此图标。
选择 IconDelete1，然后选择删除。此图标用于删除当前零件，也不再需要。
请注意，零件详细信息文本已从屏幕标题中消失，而 Power Apps Studio 将显示一条错误消息。因为将计算显示文本的标签控件的宽度，因此会出现此情况。在树视图窗格上，选择 LblAppName2。检查宽度属性。此属性的值是表达式 Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width 的结果。
将宽度属性的表达式更改为 Parent.Width - Self.X。错误应消失，零件详细信息文本应重新显示在屏幕标头中。
在树视图窗格上，选择 BrowseScreen1。此屏幕还将显示一条错误消息。工具栏中的 + 图标 (IconNewItem1) 使用户能够添加新零件。此图标的 OnSelect 属性引用 EditScreen1 屏幕。
选择 IconNewItem1，然后选择删除。与以前一样，屏幕标头中的文本将消失，并由于相同原因显示一条错误消息。
在树视图窗格上，在 BrowseScreen1 下，选择 LblAppName1。通过删除对 IconNewItem1.Width 的引用，修改宽度属性的表达式。新表达式应该为 Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width。
标头仍有一个问题。虽然浏览零件文本已重新显示，但将显示一个错误，并且刷新和排序图标位于错误的位置。在树视图窗格上，选择 IconSortUpDown1。查找此控件的 X 属性。此属性确定标头中图标的水平位置。当前基于 IconNewItem1 控件的宽度计算它。
将 X 属性的表达式更改为 Parent.Width - Self.Width。
在树视图窗格上，选择 IconRefresh1。将 X 属性的表达式更改为 Parent.Width - IconSortUpDown1.Width - Self.Width。这些错误应该全部消失。

保存并测试应用

现在，您可以保存并测试应用。

选择文件 > 另存为。
在另存为下，选择云，输入名称 VanArsdelApp，然后选择保存。
选择后退箭头以返回到主屏幕。
选择 F5 以预览应用。在浏览零件页面上，选择任何零件右侧的右尖括号 (>)。显示零件的详细信息屏幕。
选择详细信息屏幕标头中的左尖括号 (<) 以返回到浏览屏幕。
在浏览零件屏幕上，在搜索框中输入文本。在键入时，将筛选项目以仅显示在名称、CategoryID 或概述字段中具有匹配文本的项目。
关闭预览窗口，并返回到 Power Apps Studio。

项目 2：现场知识库

有关对知识库的访问，Maria 和 Caleb（技术人员）设想一个简单的界面，用户可以在该界面上输入搜索词，应用显示提及该搜索词的所有知识库文章。 Maria 知道此流程将涉及 Azure 认知搜索，但不需要（甚至不想要）了解它的工作原理。因此，Maria 决定只提供基本用户界面，稍后与 Kiana 一起添加实际功能。

Maria 决定基于在 Power Apps Studio 中提供的列表模板创建新屏幕。

在Power Apps Studio 主屏幕工具栏上，选择新建屏幕，然后选择列表。
在屏幕标头中，选择显示文本 [Title] 的标签。将文本属性更改为 "Query"（包括引号）。
在屏幕标头中，选择加号 (+)，然后选择删除。 + 图标旨在使用户能够向列表中添加更多项目。知识库仅限查询，因此不需要此功能。

请注意，由于计算其他项目的位置和宽度的方式，删除此图标将导致标头中出现一个错误。您之前在库存管理屏幕中看到过此错误，解决方案相同，如以下步骤中所述。
在树视图窗格上，向下滚动到 Screen1 部分，然后选择 LblAppName3。将宽度属性更改为公式 Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width。
在树视图窗格上，选择 IconSortUpDown2。将 X 属性修改为公式 Parent.Width - IconSortUpDown2.Width。
在树视图窗格上，选择 IconRefresh2。将 X 属性修改为 Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width。这应该解决屏幕的所有错误。
选择文件 > 保存。
在版本注释框中，输入文本 Added Knowledgebase UI，然后选择保存。
返回到主屏幕，然后选择 F5 以预览新屏幕。它应该如下图所示。

请注意，如果选择任何虚拟条目旁边的 > 图标，详细信息功能当前不起作用。当您稍后将 Azure 认知搜索集成到应用中时，您将解决此问题。
关闭预览窗口，并返回到 Power Apps Studio。

项目 3：现场计划和注释

Maria 与办公室接待员 Malik 合作设计用于应用的现场计划和约会部分的界面。 Malik 提供一个包含一些 Maria 可用于生成约会屏幕的示例数据的 Excel 工作薄。工作簿包含一个表，其中包含以下列：

ID （约会 ID）
客户 ID（客户的唯一标识符）
客户名称
客户地址
问题详细信息（客户遇到的问题的文本说明）
联系人电话
状态
约会日期
约会时间
注释（包括工程师添加的任何注释的文本说明）
图像（设备维修后的工作状态或作为工程师注释的补充图片的照片）

约会工作簿。

备注

与现场库存管理数据一样，该工作簿也提供非规范化的数据视图。在现有的约会系统中，此数据存储在保留约会数据和客户数据的单独的表中。

Maria 将此文件存储在名称为 Appointments.xlsx 的 OneDrive 帐户中。请记住，以前在工作簿中使用了表的默认名称，并且必须在生成的各种屏幕中更改标题，因此 Maria 将工作簿中的表重命名为约会。

备注

此工作薄在本指南的 Git 存储库的资产文件夹中可用。

Maria 想要直接从 Excel 文件中生成应用的约会部分。 Maria 决定采用与现场库存管理功能类似的方法，但这次除外，将允许工程师创建和编辑约会。

Maria 决定生成最初作为单独应用的约会屏幕。这样，Maria 可以使用 Power Apps Studio 自动生成大部分应用。 Power Apps Studio 当前不允许您在现有应用中从数据连接生成其他屏幕。在创建和测试屏幕后，Maria 将其复制到现场库存和知识库应用。

备注

替代方法是将 Excel 文件中作为第二个数据源的约会表添加到现有应用，然后为约会手动创建屏幕。 Maria 选择从工作簿生成新屏幕并复制屏幕。目前，与手动生成屏幕相比，Maria 更熟悉复制和粘贴的概念，并且将逐步了解如何在生成此应用的过程中从头开始创建屏幕。

若要创建约会应用

在 Power Apps Studio 菜单栏中，选择文件。
在左侧窗格上，选择新建。在主窗格上，选择 OneDrive for Business - 手机布局框。
在连接窗格上，选择 Appointments.xlsx。
在 Excel 文件中，选择约会表，然后选择连接。
等待应用生成。显示新应用后，它将使用默认主题包含浏览屏幕、详细信息屏幕和编辑屏幕。
在树视图窗格上，在 BrowseScreen1 部分的 BrowseGallery1 下，选择 Image1，然后选择删除。浏览屏幕应仅列出约会，而不应列出与它们关联的任何图像。

请注意，删除 Image1 控件将导致屏幕上出现几个错误，因为 Title1 控件的宽度和位置都引用图像控件。您将在以下步骤中修复这些问题。
在树视图窗格上，在 BrowseGallery1 下，选择 Title1。将 X 属性的值更改为 16。将宽度属性中的公式更改为 Parent.TemplateWidth - 104。这应该解决屏幕的错误。
在树视图窗格上，在 BrowseGallery1 下，选择 Body1。此控件当前显示客户的联系人电话详细信息。将文本属性中的值更改为 ThisItem.'Customer Name'（包括单引号）。

浏览屏幕名称上的详细信息现在显示客户名称。
在树视图窗格上，选择 BrowseGallery1。使用公式栏，检查项目属性中的表达式。控件使用约会日期、时间和联系人电话搜索约会。更改此公式以搜索客户名称，而不是联系人电话：
```
SortByColumns(Search([@Appointments], TextSearchBox1.Text, "Appointment_x0020_Date","Appointment_x0020_Time","Customer_x0020_Name"), "Appointment_x0020_Date", If(SortDescending1, Descending, Ascending)).
```
请注意，约会按日期和时间排序（显示前两个字段）。
在树视图窗格上，删除 IconNewItem1。只有本地员工可以为工程师和技术人员预订新约会。请注意，此操作会导致窗体出现错误，因为标头中其他控件的宽度和位置引用您刚刚删除的图标。
在树视图窗格上，选择 LblAppName1。更改宽度属性的公式。更改为 Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width。
在树视图窗格上，选择 IconRefresh1。将 X 属性的值更改为 Parent.Width - IconSortUpDown1.Width - Self.Width。
在树视图窗格上，选择 iconSortUpDown1。将 X 属性的值更改为 Parent.Width - Self.Width。
在树视图窗格上，选择 BrowseScreen1，然后选择省略号按钮 (...)。在显示的下拉菜单上，选择重命名，然后将屏幕的名称更改为 BrowseAppointments。
使用相同的技术，将 BrowseGallery1 控件的名称更改为 BrowseAppointmentsGallery。

将完成浏览屏幕。

若要创建详细信息屏幕

现在，您可以将注意力放在详细信息屏幕上。

在树视图窗格上，向下滚动到 DetailsScreen1 部分。您可以看见详细信息按字段名称以字母顺序显示，根本不显示一些有用的信息（例如注释字段）。
在树视图窗格上，选择 DetailForm1。在右侧窗格的属性选项卡上，选择字段旁边的编辑字段。在中间窗格上，选择以下每个字段，然后选择删除：
- 约会日期
- 约会时间
- 客户 ID
- ID
选择 + 添加字段，并添加以下字段：
- 备注
- 问题详细信息
- 状态
拖动每个字段，以便按以下顺序（从上到下）显示字段：
- 客户名称
- 客户地址
- 联系人电话
- 问题详细信息
- 状态
- 备注
- 图像
在树视图窗格上，选择 Notes_DataCard1。将高度属性更改为 320。
在树视图窗格上，删除 IconDelete1。工程师不能从系统中删除约会。
选择 LblAppName2，然后将宽度属性更改为 Parent.Width - Self.X - IconEdit1.Width。
使用前面介绍的技术，将 DetailsScreen1 的名称更改为 AppointmentDetails。

若要编辑“编辑”屏幕

现在，要查看的最后一个屏幕是编辑屏幕。

在树视图窗格上，选择 EditScreen1。
在树视图窗格上，在 EditScreen1 部分中，选择 EditForm1。在右侧窗格的属性选项卡上，选择字段旁边的编辑字段。
删除以下字段：
- 客户地址
- ID
- 客户 ID
- 约会日期
- 约会时间
添加以下字段：
- 问题详细信息
- 状态
- 备注
拖动每个字段，以便按以下顺序（从上到下）显示字段：
- 联系人姓名
- 客户编号
- 问题详细信息
- 状态
- 备注
- 图像
选择客户名称字段，然后展开该字段以查看其属性。将控件类型更改为查看文本。此更改使控件只读；在编辑屏幕上查看客户的名称很有用，但工程师不能更改它。
选择联系人电话字段，然后展开该字段以查看其属性。将控件类型更改为查看文本。此字段也应该是只读的。
选择注释字段，展开该字段，然后将控件类型更改为编辑多行文本。此设置使工程师能够添加可跨多行的详细注释。
选择状态字段，展开该字段，然后将控件类型更改为允许的值。
在树视图窗格上，选择 Status_DataCard5。在右侧窗格的属性选项卡上，选择解锁以更改属性。向下滚动到 AllowedValues 属性，将文本更改为 ["Fixed", "Parts Ordered", "Unresolved"]（包括方括号）。现场工程师只能将状态设置为这些定义的值之一。
在树视图窗格上，将 EditScreen1 重命名为 EditAppointment。

现在，您可以保存并测试应用。

选择文件 > 另存为。
在另存为下，选择云，输入名称 VanArsdelAppointments，然后选择保存。
选择 Power Apps Studio 工具栏中的后退箭头以返回到主屏幕。
选择 F5 以预览应用。在约会页面上，选择任何约会旁边的 > 图标。应显示约会的详细信息屏幕。在标头中，选择编辑以更新约会。验证以下条件：
- 客户名称和联系人电话字段为只读。
- 状态字段仅限于下拉列表中的值。
- 可以输入跨多行的注释。
- 您可以将图像文件上传到图像字段。
备注

以后添加的增强功能允许您从应用内通过手机获取图片，并将其添加到图像字段。

将屏幕合并到一个应用中

Maria 生成了两个应用，但她想要将其合并到一个应用中。为此，Maria 将约会应用的屏幕复制到现场库存管理和知识库应用中，如下所示：

打开新的浏览器窗口，然后使用您的帐户详细信息登录到 Power Apps Studio。
在左侧窗格上，选择应用，选择 VanArdselApp，然后选择编辑。
在工具栏中，选择新建屏幕，然后选择空白。此操作将新屏幕添加到应用中，您将向其中复制 VanArsdelAppointments 应用的浏览屏幕的控件。
新屏幕将命名为 Screen2。在树视图窗格上，将其重命名为 BrowseAppointments。
重复上一个步骤两次，再添加两个空白屏幕（Screen3 和 Screen4）。
将 Screen3 重命名为 AppointmentDetails，并 Screen4 重命名为 EditAppointment。
在 Power Apps Studio 的左侧工具栏上，选择数据图标。在数据窗格上，选择添加数据。在选择数据源下拉列表中，在搜索字段中，输入 OneDrive，然后选择 OneDrive for Business。
选择 Appointments.xlsx Excel 文件，选择约会表，然后选择连接。
切换到显示 VanArsdelAppointments 应用的浏览器窗口。
在工具栏上，选择主题（可能必须扩展工具栏以显示更多项目），然后选择森林主题。这是 VanArsdel 应用使用的相同主题。
在左侧工具栏上，选择树视图图标，选择 BrowseAppointments 屏幕，然后选择 Ctrl+A。此操作选择屏幕中的所有控件。
选择 Ctrl+C 以将这些控件复制到剪贴板。
返回到显示 VanArsdelApp 应用的浏览器窗口。
在左侧工具栏上，选择树视图图标，然后选择 BrowseAppointments 屏幕。
选择 Ctrl+V 以在屏幕上粘贴控件。

备注

有时，屏幕标头的显示位置有点太低。若要解决此问题，在树视图窗格上选择 IconSortUpDOwn1_1、IconRefresh1_1、LblAppName1_1 和 RectQuickActionBar1_1 控件（在单击以一次选择多个控件的同时按住 Shift），然后使用鼠标或箭头键在设计视图窗格中将其上移。
切换回显示 VanArsdelAppointments 应用的浏览器窗口，然后选择 AppointmentDetails 屏幕中的控件并将其复制到剪贴板（选择 Ctrl+A，然后选择 Ctrl+C）。
返回到显示 VanArsdelApp 应用的浏览器窗口，选择 AppointmentDetails 屏幕，然后粘贴控件 (Ctrl+V)。根据需要调整控件在屏幕标头中的位置。

备注

您将看到在 AppointmentDetails 屏幕标头中报告了一个错误。因为屏幕在 EditAppointment 屏幕中引用的控件尚未复制，因此会出现此错误。后续步骤应解决此错误。
切换回显示 VanArsdelAppointments 应用的浏览器窗口，然后选择 EditAppointment 屏幕上的控件并将其复制到剪贴板。
返回到显示 VanArsdelApp 应用的浏览器窗口，选择 EditAppointment 屏幕，然后粘贴控件。同样，根据需要移动屏幕标头中的控件。
在树视图窗格上，选择 AppointmentDetails 屏幕，并验证之前指示的错误现在是否已消失。
在树视图窗格上，选择 BrowseScreen1 屏幕。将此屏幕重命名为 BrowseParts。
将 DetailsScreen1 屏幕重命名为 PartDetails。
将 Screen1 屏幕重命名为 Knowledgebase。

备注

重命名屏幕（而不是使用 Power Apps Studio 生成的默认名称）来反映其功能是一个好做法，特别是在应用包含多个屏幕时。如果应用由其他开发人员修改，这可以帮助避免以后的混淆。

将主屏幕添加到应用

最后一个阶段是将主屏幕添加到应用。通过主屏幕，工程师可以在应用的不同部分（库存管理、知识库和约会）之间移动。

在工具栏上的 VanArsdelApp 应用中，选择新建屏幕，然后选择空白。
在树视图窗格上，将 Screen2 重命名为主屏幕。
在工具栏上，选择插入。在控件列表中，展开媒体，然后选择图像。控件将添加到屏幕。
将控件的 X 位置设置为 16，将 Y 位置设置为 22。将宽度更改为 605，将高度更改为 127。将图像位置更改为填充。
当仍然位于属性选项卡上时，在图像下拉列表中，选择 + 添加图像文件，然后将 VanArsdelLogo.png 图像上传到控件。

备注

图像文件在本指南的 Git 存储库中的资产文件夹中可用。
从控件列表中，将四个文本标签控件添加到窗体并定位它们，以便它们在 VanArsdel 徽标下堆叠。
选择最上面的文本标签控件。在右侧窗格的属性选项卡上，将文本属性设置为下一个约会。将字体大小设置为 30，使用颜色选取器将字体颜色设置为绿色（以匹配徽标）。
选择第二个文本标签控件。将文本属性的值更改为 First(Appointments).'Customer Name'（包括引号）。此公式检索约会表中第一行的客户名称。

备注

当前，此公式只是充当占位符。您稍后将修改标签以检索工程师的下一个约会，而不是始终显示第一个。
选择第三个 文本标签 控件，然后将 Text 属性设置为 First(Appointments).'Appointment Date'。
将第四个 label 控件的 Text 属性设置为 First(Appointments).'Appointment Time'。将字体大小属性设置为 30。
从控件列表中，添加矩形控件。为此控件设置以下属性：
- 显示模式：视图
- X：0
- Y：632
- 宽度：635
- 高度：1
此控件充当屏幕中间的视觉分隔符。
向屏幕中添加三个按钮控件，它们在分隔符下面垂直排列并均匀间隔。将顶部按钮的文本属性设置为约会，将中间按钮的文本属性设置为零件并将底部按钮的文本属性设置为知识库。
选择约会按钮。将 OnSelect 操作中的表达式更改为公式 Navigate(BrowseAppointments, ScreenTransition.Fade)。当用户选择按钮时，此操作将显示切换到约会屏幕。
将零件按钮的 OnSelect 操作设置为 Navigate(BrowseParts, ScreenTransition.Fade)。
将知识库按钮的 OnSelect 操作设置为 Navigate(Knowledgebase, ScreenTransition.Fade)。

除了从主屏幕导航到系统中的其他屏幕，约会、零件和知识库屏幕还需要一种使用户能够返回到主屏幕的方法。 Maria 决定将按钮添加回这些屏幕。

在树视图窗格上，选择 BrowseParts 屏幕。
选择 RectQuickActionBar1 控件以聚焦它。
选择插入菜单，然后选择添加图标。将图标移动到 RectQuickActionBar1 控件的左侧。请注意，该图标将阻挡浏览零件标签的一部分。
在树视图菜单上，将新图标控件的名称更改为 IconReturn1。
将 OnSelect 操作的公式更改为表达式 Back(ScreenTransition.Fade)。返回函数将用户导航到他们访问的上一个屏幕。
在属性选项卡上，将图标属性更改为 < 左。
在屏幕标头中，选择浏览零件标签。将 X 属性更改为 IconReturn1.Width + 20。 浏览零件标签不再被部分遮挡。
按照步骤 16 到步骤 22 中描述的流程，将名为 IconReturn2 的图标添加到知识库屏幕中的 RectQuickActionBar3 控件。
同样，将名为 IconReturn3 的图标添加到 BrowseAppointments 屏幕中的 RectQuickActionBar1_1 控件。
在树视图窗格上，选择应用对象。将 StartScreen 属性更改为 Home 表达式。此操作可确保在应用启动时显示主屏幕。

备注

如果不指定在应用启动时要显示哪个屏幕，将使用显示在树视图窗格顶部的屏幕。若要将屏幕移动到列表的开头，请在树视图窗格上右键单击屏幕，然后选择上移，直到它位于顶部。