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

已完成

在下面的练习中,我们将使用 Excel 表作为数据源来创建您的第一个应用。 如果您已将数据格式化为表并将其保存到您有权访问的数据源(例如 OneDrive)中,我们就可以将任意 Excel 表用作数据源。 在本练习中,我们将下载数据,将其保存到 OneDrive,构建一个简单的三屏应用,然后开始在空白画布上创建应用。 在后续学习单元中,我们将继续使用本练习中从空白屏幕开始创建的这款应用。 您可以参考这款三屏应用来了解控件之间是如何交互以访问数据的。 两个应用都能够与相同的数据进行交互。

获取数据

下载 Excel 电子表格 CoffeeMachineData.xlsx。 选择该链接,然后选择下载原始文件按钮下载文件。 下载完成后,继续执行以下步骤。

  1. 从 OneDrive 浏览器选项卡中,选择新增>文件上传

  2. 在“打开”弹出窗口中,选择 CoffeeMachineData.xlsx 文件所在的位置,很可能位于“下载”文件夹中。

  3. 找到并选择 CoffeeMachineData.xlsx 文件后,选择打开。 在 OneDrive 命令栏顶部中心的搜索字段中输入 CoffeeMachineData,确认该文件位于 OneDrive 中。 现在您的 OneDrive 中已经有了数据文件,让我们开始构建应用。

构建一个三屏应用

让我们首先构建一个只需在 Power Apps 中点击几下按钮即可构建的三屏应用。

  1. 返回 Power Apps Maker Portal make.powerapps.com 并使用您的组织帐户登录。

  2. 从左侧菜单中选择创建选项卡。

  3. 选择开始位置选项下的 Excel 按钮。

  4. 如果您在连接下方没有看到 OneDrive for business 连接,请选择 + 新建连接按钮,然后选择创建按钮来创建连接。 连接出现后,选择 OneDrive for Business 连接。

  5. 选择 Excel 文件下找到并选择 CoffeeMachineData.xlsx。 可以使用右上角的搜索字段搜索文件。

  6. 选择表下方,选择 CoffeeMachines。 CoffeeMachines 是存放应用数据的表。

  7. 选择右下角的连接按钮并观看 Power Apps 构建三屏应用的过程。

    不一会儿,Power Apps 就会向您展示一个具有移动版外观的功能齐全的应用。 要了解它在移动设备上的效果,请使用右上角“保存”图标附近看起来像“播放”按钮的“预览”按钮。 选择“播放”按钮(或按 F5)并试用该界面。

    请注意,您可以滚动浏览项目列表、选择项目、查看一些项目详细信息、编辑项目详细信息以及保存/取消更改。 如果您使用 Excel 按钮构建应用,很快就能构建出一个功能齐全的应用。

    我们来按右上角的 X 退出预览模式,然后保存此应用。

  8. 选择保存按钮并在另存为窗格中输入该应用的名称。 然后选择保存

  9. 从命令栏左上角选择返回按钮,退出应用。

现在您已经体验过用 Power Apps 构建应用,我们来开始构建自己的应用吧。

创建画布应用

  1. 从 Power Apps Maker Portal (make.powerapps.com) 开始,选择创建选项卡,然后选择空白应用

  2. 创建弹出窗口,在空白画布应用下选择创建

  3. 将应用命名为“Contoso 咖啡机”,并将“格式”的切换选项选为平板电脑。 选择创建

  4. 现在,您会看到一个空白屏幕,屏幕上面显示“欢迎使用 Power Apps Studio”弹出窗口或一条消息。 它会提示您“从‘插入’窗格中添加项目或连接到数据”。我们从创建一个库来查看数据记录开始。 选择“库”选项。 如果您没有看到这个弹出窗口,则从命令栏选择插入按钮,找到或选择垂直库

  5. 屏幕上会出现一个名为 Gallery1 的控件。 它当前未连接到数据,因此 Power Apps 会提示我们选择数据源。 因为有各种不同类型的数据,我们需要告知 Power Apps 我们想要连接到什么类型的数据。 在这种情况下,我们需要连接到保存到 OneDrive 的 Excel 电子表格。 这可以通过 OneDrive for Business 连接来实现。 通过此连接,我们可以访问企业 OneDrive 帐户中的文档以及我们有权访问的任意 SharePoint 文档库。

  6. 找到/选择 OneDrive for Business。您可以在搜索字段中输入 OneDrive 来快速找到它。 您可能需要选择添加连接并进行连接的身份验证。

  7. 完成与 OneDrive for Business 的连接后,屏幕右侧会出现一个面板,提示您选择 Excel 文件。 找到并选择我们复制到 OneDrive for Business 的名为“CoffeeMachineData.xlsx”的 Excel 文档。如果您找不到它,可以在搜索字段中输入文件名,以缩小选择范围。

  8. 选择“CoffeeMachineData.xlsx”后,面板随即会提示您选择表。 此时应该会出现一个“CoffeeMachines”选项。选择“CoffeeMachines”旁边的框,然后选择面板底部的连接按钮。

  9. 再次选择您的库。 屏幕右侧是库控件的属性面板。 确保数据源设置为“CoffeeMachines”。 如果您之前还未能看到库中填满图片、标题和价格,那么现在应该可以看到了。

  10. 调整库的大小,使其展开到屏幕底部并触及屏幕左侧。

  11. 现在我们来添加一个窗体控件,以便可以更新库中显示的数据。 从标题菜单中选择插入按钮。 找到并选择编辑窗体

  12. 屏幕上会显示控件 Form1。 将其拖到屏幕的右半部分,然后重新调整其位置和大小,使其占据屏幕的右半部分。

  13. 请注意,新窗体会提示我们连接到数据。 选中窗体控件后,可以看到属性面板位于屏幕右侧。 在属性正下方,您可以看到数据源和一个显示的下拉列表。 选择下拉列表并选择 CoffeeMachines 表。

  14. 窗体目前是空白的,我们来向其中添加字段。 在属性面板中,选择编辑字段的链接,它正好位于“数据源”下拉列表的下方。

  15. 字段弹出面板中,选择添加字段按钮。

  16. 选中选择字段下每个字段旁边的框。 然后选择添加。 现在,您的窗体显示了以三列形式排列的输入字段。 所有字段都应为空白。

  17. 接下来,我们需要指定要在窗体中显示的数据项。 可以看到库控件位于屏幕左侧。 库中显示了所有咖啡机,那么我们希望窗体中显示其中某一项。 选中窗体后,转到屏幕顶部的编辑 (fx) 栏。 在编辑栏的左侧,有一个下拉菜单,可用于查找窗体控件的属性。 选择下拉列表,然后找到/选择 Item 属性。

  18. fx 公式输入框中的 Item 字段中,输入 Gallery1.Selected。 您应该可以立即看到窗体字段中填充的数据。

  19. 您可以随时预览应用,方法是选择命令栏右上角的“播放”图标并按 F5 功能键,或者也可以直接选中并按住键盘上的 Alt 键。 在应用处于预览模式时,尝试滚动浏览库并选择一些不同的咖啡机。 观察它如何根据您选择的物料填充窗体。

  20. 接下来,我们来添加一个按钮控件,以便可以保存对数据所做的任何更改。 从命令栏中选择插入按钮,然后找到/选择按钮

  21. 我们来更改按钮文本,将“按钮”改为“保存”。在右侧的“属性”面板中,第一项是“Text”属性。 将“按钮”更改为“保存”并进行输入。

  22. 在屏幕底部的窗体下方重新调整新按钮控件的位置。

  23. 选中按钮控件后,转到 fx 编辑栏。 将 OnSelect 属性从“false”更改为 SubmitForm(Form1)

  24. 现在,再次将应用置于预览模式。 然后更新窗体中的某个字段,例如“Machine Price”。 按保存按钮以记录更改。

  25. 接下来,我们来为应用添加标题。 再次选择“插入”按钮,然后找到/选择矩形控件。

  26. 将矩形控件放在屏幕的左上角并将其展开,使其一直展开到屏幕的右侧。 在矩形的属性面板中,找到 Height 输入字段并输入 75。

    提示

    属性面板中的任意项都有一个相应的值,可在编辑 (fx) 栏中查看。 如果在属性面板中找不到,您可以选择编辑栏输入字段左侧的下拉列表。 这样,您就可以找到/选择 Height 属性。

  27. 现在,调整库和窗体控件的大小,使它们正好位于矩形下方。

  28. 插入文本标签控件。 将 Text 属性改为“Contoso 咖啡机”。

  29. 接下来,将标签控件的 Size 调整为 24,然后调整控件大小以使标题适合单行。

  30. 接下来,我们来更改字体颜色。 您可以通过选择命令栏中的颜色设置来更改它。 在标准颜色下方,选择白色圆形。

  31. 最后,重新调整标签控件的位置,使其位于屏幕中间矩形的中央。 请注意虚线在接近屏幕中心时是如何显示的,以帮助您对齐标签。

这样就可以了! 您通过空白屏幕创建了一个单屏应用,您可以用它来更新和保存咖啡机数据中的任何数据。 在下一个单元中,我们将在此应用的基础上继续学习新概念。