练习 - 在 Power Apps 中创建您的第一个应用

15 分钟

在下面的练习中，您将使用 Excel 表作为数据源来创建您的第一个应用。您可以使用任何 Excel 表，前提是数据的格式设置为表，并存储在可由 Microsoft Power Apps 访问的位置，例如 OneDrive。

本练习包括两个部分：

从 Excel 表生成一个三屏应用。
创建一个空白的画布应用，您将在后续单元中增强该应用。

这两个应用都使用相同的数据。可以参考这款三屏应用，以了解控件如何协同工作以显示数据。

获取数据

若要完成本练习，您将需要下载 App in a Day 文件。选择该链接以下载文件。接下来，从下载的 zip 文件中提取文件。解压缩文件后，找到并打开名为 Machine-Order-Data.xslx 的 Excel 文件。

在浏览器中打开 OneDrive。选择 + 新增>文件上传。
在“打开”对话框中，导航到 Downloads 文件夹并选择 Machine-Order-Data.xlsx。
选择打开。然后，在 OneDrive 中搜索“Machine-Order-Data”以确认上传成功。

生成一个三屏应用

现在，您将创建一个三屏移动应用。

转到 Power Apps 制作者门户 make.powerapps.com 并登录。
从左侧导航窗格中，选择应用。
选择从应用模板开始。
在以数据为中心的移动应用下，选择从 Excel。
在选择表下，展开 OneDrive for Business，查找 Machine-Order_Data.xlsx 文件，选择机器表，然后选择创建应用。

Power Apps 生成一个工作移动应用。如果您的应用类似于下图，请继续执行下一步。如果不类似，请跳至步骤 #17。
展开 BrowseGallery1 并选择 Title1。选择 Title1 后，将光标向上移动到属性下拉列表中（位于树视图标头上方），然后选择名为 Text 的属性。
在编辑栏中，删除现有值并键入 ThisItem.（请务必输入句点）。自动完成功能显示库中当前物料的所有可用字段的列表。
由于您希望机器的名称显示在标题中，因此请从下拉列表中选择机器名称。请注意，编辑栏现在显示 ThisItem.'Machine Name'。这是一个 Power Fx 公式，用于指示 Power Apps 为库中的每个物料显示“机器名称”。

请注意，库中的每个物料现在都显示其自己的机器名称。这就是在库中使用 ThisItem 的强大功能：它会动态引用当前记录，因此库中的每个控件都显示特定于该物料的数据。
返回到“树视图”面板的 BrowseGallery1 下，现在选择 Subtitle1。在 Subtitle1 仍然选中的情况下，选择 Text 属性。此时，在编辑栏中键入 ThisItem.Price。

请注意，库中的每个物料现在都显示物料的价格。
接下来，您将向库中的每个物料添加机器颜色。在树视图中的 BrowseGallery1 内选择 Body1。在 Body1 仍然选中的情况下，在属性下拉列表中选择“Text”，然后键入 ThisItem.Color。
您还可以向库中添加咖啡机的图片。您首先需要将标题、副标题和正文字段稍微向右移动，以便为图像腾出空间。按住键盘上的 Shift 键，从“树视图”面板或库画布中选择 Title1、Subtitle1 和 Body1 字段。您的屏幕应该类似于下图。
在全部三个字段仍然选中的情况下，从属性下拉列表中选择 X。 X 值是字段在屏幕上的水平位置。将编辑栏中的值设置为 80。（或者，您可以将字段拖动到画布右侧。）
选择在 Body1、Subtitle1 和 Title1 字段左侧创建的空白区域。这将取消选择字段，您的屏幕应如下图所示。
从命令栏中，选择 + 插入，在搜索栏中键入图像，然后选择图像控件。
重设图像大小并将其移动到画布中的顶部物料上，直到它很好地显示在标题、副标题和正文字段的左侧。
在“树视图”窗格中或在画布上，选择图像，在属性下拉列表中选择图像，然后键入 ThisItem.Photo。咖啡机图像现在会显示在您的库中。

使用刚才学到的技能更新应用的其他屏幕（DetailScreen1 和 EditScreen1），以显示您想要显示的字段。
若要了解应用在移动设备上的外观，请使用右上角看起来像“播放”按钮的“预览”按钮（在“保存”按钮附近）。选择“播放”按钮（或按 F5）并试用该界面。

请注意，您可以滚动浏览物料列表，选择物料，查看一些物料详细信息，编辑物料详细信息或保存/取消更改。如果您使用 Excel 按钮生成应用，很快就能生成一个功能齐全的应用。

我们来按右上角的 X 退出预览模式，然后保存此应用。
选择保存按钮并在另存为窗格中输入该应用的名称。然后选择保存。
从命令栏左上角选择返回按钮，以退出应用。

现在，您已经体验过如何使用 Power Apps 生成应用，可以开始从头生成自己的应用了。

创建画布应用

从 Power Apps 制作者门户 (make.powerapps.com) 开始，选择创建选项卡。
在创建弹出窗口中，选择从空白画布应用开始。
在显示的从空白画布开始弹出窗口中，选择平板电脑大小。
系统会将您导航到 Power Apps 编辑画布。如果显示欢迎使用 Power Apps Studio 弹出窗口，您可以选择跳过。
从屏幕右上角选择保存，然后在另存为窗口中，将您的应用命名为 Contoso Coffee Machines。选择保存。
首先，创建库以查看数据记录。从命令栏中选择插入按钮，然后查找并选择垂直库。这是 Power Apps 在移动应用中为您自动创建的相同类型的库。
屏幕上会出现一个名为 Gallery1 的控件。它当前未连接到数据，因此 Power Apps 会提示您选择数据源。因为有各种不同类型的数据，您需要告知 Power Apps 想要连接到什么类型的数据。在这种情况下，您将连接到使用 OneDrive for Business 连接保存到 OneDrive 的 Excel 电子表格。通过此连接，您可以访问企业 OneDrive 帐户中的文档以及您有权访问的任何 SharePoint 文档库。
查找并选择 OneDrive for Business。您可以在搜索字段中输入 OneDrive 以快速找到它。您可能需要选择添加连接并对该连接进行身份验证。
完成与 OneDrive for Business 的连接后，屏幕右侧会显示一个面板，提示您选择 Excel 文件。查找并选择您复制到 OneDrive 的名为“Machine-Order-Data.xlsx”的 Excel 文档。如果您找不到它，可以在搜索字段中输入文件名，以缩小选择范围。
选择“Machine-Order-Data.xlsx”后，面板会提示您选择表。此时应该会显示两个选项：“Machines”和“MachineTypes”。选中“Machines”旁边的框，然后选择面板底部的连接按钮。
您将收到数据源已添加到应用的通知。
再次选择您的库。屏幕右侧是库控件的属性面板。确保数据源设置为“Machines”。如果您的库中没有填充图片、标题和价格，请立即按照上面用于移动应用的相同说明添加这些内容。（提示：使用 ThisItem.'Machine Name'、ThisItem.Price 和 ThisItem.Photo。）
重设库的大小，使其展开到屏幕底部并触及屏幕左侧。
现在，您可以添加一个窗体控件，以更新库中显示的数据。选择屏幕的空白部分以取消选择库，然后从标头菜单中选择插入按钮。查找并选择编辑窗体。
屏幕上会显示控件 Form1。将其拖动到屏幕的右半部分，然后重新调整其位置和大小，使其占据屏幕的右半部分。
请注意，新窗体会提示您连接到数据。选中窗体控件后，可以看到属性面板位于屏幕右侧。在属性正下方，您可以看到数据源和一个显示无的下拉列表。选择该下拉列表，然后选择机器表。
现在，您可以向窗体添加字段，因为窗体目前是空白的。在属性面板中，选择编辑字段的链接。它正好位于“数据源”下拉列表的下方。
在字段弹出面板中，选择添加字段按钮。
在选择字段下方，选中以下每个字段旁边的框：Photo、Machine ID、Machine Name、Price、Color、Description、Feature、Machine Type、Machine Type ID、Avg. Cups/Week 和 Avg. Espressos/Week。请务必按列出的顺序检查它们。您可能需要向下滚动以查看全部字段。然后选择添加。您可以关闭字段面板。

现在，您的窗体显示以三列格式排列的输入字段。请注意，它按您选择字段的顺序添加了字段。所有字段都应为空。
接下来，您可以指定要在窗体中显示的数据项。可以看到库控件位于屏幕左侧。库中显示所有咖啡机，因此您希望窗体中显示其中一款。选中窗体后，转到屏幕顶部的编辑 (fx) 栏。在编辑栏的左侧，有一个下拉菜单，可用于查找“窗体”控件的属性。选择下拉列表，然后找到/选择 Item 属性。
在 fx 公式输入框中的“Item”字段中，输入 Gallery1.Selected。您应该可以立即看到窗体字段中填充的数据。
照片图像已添加为文本框，而不是图像控件。这就是您可以看到图像的 URL 而不是图像本身的原因。您可以通过选择照片数据卡来解决此问题（在本示例中为 Photo_DataCard2）。在照片数据卡中，选择数据卡值（在本示例中为 DataCardValue12）。删除数据卡值。
当您删除数据卡值时，画布上将出现几个红色 x，指示存在公式错误。您可以立即修复这些错误。但首先，再次选择照片数据卡，然后选择插入。搜索单词图像，然后选择图像。
您将收到弹出错误消息，指示数据库已锁定。需要先解锁数据卡，然后才能插入图像控件。选择解锁和添加。现在，图像控件应该已插入到照片数据卡中。
选择新插入的图像控件，然后在编辑栏中输入 ThisItem.Photo。您的屏幕应该类似于下图。
现在，您可以修复删除图像文本输入数据卡值时出现的公式错误。选择最右侧的红色 x，然后选择在编辑栏中编辑。
编辑栏将显示 DataCardValue12.Y + DataCardValue12.Height（或您之前删除的数据卡值的等效名称）。您记得您删除的数据卡是 DataCardValue12。更改公式，以删除对数据卡值的引用并包括图像控件的名称。在本例中，图像控件为 Image2，因此更新后的公式将是 Image2.Y + Image2.Height。（您的公式应包含您的实际图像名称。）第一个错误警告将消失。
选择剩余的错误警告（红色 x），然后再次选择在编辑栏中编辑。编辑栏显示“Update”属性设置为 DataCardValue12.Text。删除公式中的数据卡值，并再次将其替换为图像控件的名称。在本示例中，公式将更新为 Image2.Text。

这次错误没有消失，因为图像没有称为 text 的属性。您需要进一步编辑公式。将公式更改为 Image2.Image。公式错误警告现在应消失。
通过选择命令栏右上角的“播放”图标并按 F5 功能键，或者在单击控件的同时选中并按住 Alt 键来预览应用。在应用处于预览模式时，尝试滚动浏览库并选择一些不同的咖啡机。观察它如何使用您选择的物料填充窗体。
接下来，您将添加一个按钮控件，以保存对数据所做的任何更改。首先，从“树视图”窗格中选择 Screen1。从命令栏中选择插入按钮，然后查找并选择按钮。
调整按钮和窗体的大小和位置，使按钮位于屏幕右侧窗体的正下方。
将按钮的文本从“按钮”更改为“保存更改”。在右侧的“属性”面板中，第一项是 Text 属性。将“按钮”替换为“保存更改”并进行输入。
选中按钮控件后，转到 fx 编辑栏。将 OnSelect 属性从“false”更改为 SubmitForm(Form1)。（如果您的窗体未命名为 Form1，请使用窗体的实际名称。）
现在，再次将应用置于预览模式下。然后更新窗体中的某个字段，例如“Machine Price”。按保存按钮以记录更改。
接下来，您将为应用添加标头。在“树视图”窗格中，选择 Screen1。再次选择插入按钮，然后查找并选择矩形控件。
将矩形控件放置在屏幕的左上角并将其展开，使其从左侧一直展开到屏幕的右侧。在矩形的属性面板中，找到 Height 输入字段并输入 75。

提示

属性面板中的任意项都有一个相应的值，可在编辑 (fx) 栏中查看。如果在属性面板中找不到，您可以选择编辑栏输入字段左侧的下拉列表。这样，您就可以找到/选择 Height 属性。
现在，调整库和窗体控件的大小，使它们正好位于矩形下方。
插入文本标签控件。将 Text 属性更改为“Contoso Coffee Machines”。
接下来，将标签控件的 Size 调整为字号 24，然后重设控件大小以使标题适合单行。
接下来，通过选择命令栏中的颜色设置来更改字体颜色。在标准颜色下方，选择白色圆形。
在标签仍然选中的情况下，在属性窗格中找到文本对齐。将对齐方式更改为居中对齐。
最后，重新调整标签控件的位置，使其位于屏幕中间矩形的中央。请注意虚线在接近屏幕中心时的显示方式，以帮助您对齐标签。您的屏幕应该类似于下图。