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

已完成

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

获取数据

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

Excel 文件的 GitHub 链接的屏幕截图,其中突出显示了“下载原始文件”按钮。

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

    OneDrive 文件界面的屏幕截图,其中突出显示了文件上传。

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

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

构建一个三屏应用

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

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

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

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

    Power Apps 的屏幕截图,其中突出显示了“创建”选项卡和“Excel”。

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

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

    “连接”和“选择 Excel 文件”选项屏幕的屏幕截图,其中突出显示了 OneDrive 连接和 CoffeeMachineData.xlsx。

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

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

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

    Power Apps 生成的 CoffeeMachines 应用的屏幕截图。突出显示了播放按钮。

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

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

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

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

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

创建画布应用

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

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

    Power Apps 菜单选项的屏幕截图,其中突出显示了“空白应用”和“创建”。

  3. 将应用命名为“Contoso Coffee Machines”,并将“格式”开关设置为平板电脑。 选择创建

    “从头开始创建画布应用”弹出窗口的屏幕截图,其中应用名称显示为“Contoso Coffee Machines”且格式为“平板电脑”。突出显示了右下角的“创建”按钮。

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

    突出显示了“Gallery1”以及“插入”和“垂直库”的屏幕截图。

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

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

    显示“数据”字段的新插入库的屏幕截图。在搜索框中输入 OneDrive,并选择 OneDrive for Business。

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

    “选择 Excel 文件”对话框的屏幕截图,其中“coffee”作为搜索参数,搜索结果显示为“CoffeeMachineData.xlsx”。

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

    “选择表”提示的屏幕截图,其中已选择“Coffee Machines”并突出显示了“连接”按钮。

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

    库控件位于屏幕上并已选择的屏幕截图。在“属性”面板中,突出显示了数据源,其中显示“CoffeeMachines”表。

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

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

    命令栏中的“插入”按钮已选择并且显示“编辑”窗体的插入菜单已选择的屏幕截图。

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

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

    “Form1”属性选项卡的屏幕截图,其中“CoffeeMachines”作为数据源。

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

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

  16. 选中选择字段下每个字段旁边的框(您可能需要向下滚动才能看到所有字段)。 然后选择添加。 现在,您的窗体显示了以三列形式排列的输入字段。 您可以关闭字段面板。 所有字段都应为空白。

    显示“Form1”属性的图像的屏幕截图,其中包含“字段”面板并突出显示了所有字段。突出显示了“编辑”字段、“添加”字段和“添加”按钮。

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

    “Form1”属性下拉列表的屏幕截图,其中已选择“item”属性。

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

    “Form1”的屏幕截图,其中“items”属性为 Gallery1.Selected。窗体上的所有字段均已填充。

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

  20. 接下来,我们来添加一个按钮控件,以便可以保存对数据所做的任何更改。 从命令栏中选择插入按钮,然后查找/选择按钮。 请参考下图了解后续三个步骤。

    显示按钮控件的图像的屏幕截图,其中“保存更改”为 text 属性并且“OnSelect”属性为“SubmitForm(Form1)”。

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

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

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

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

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

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

    显示矩形属性的图像的屏幕截图,其中突出显示了按钮高度值为 75。

    提示

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

  27. 现在,重设库和窗体控件的大小,使它们正好位于矩形下方。 请参考下图中已编号的后续步骤。

    显示标签控件属性的屏幕截图,其中文本为“Contoso Coffee Machines”、字号为 24、居中放置并突出显示了颜色。

  28. 插入文本标签控件。 将 Text 属性更改为“Contoso Coffee Machines”。

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

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

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

    练习结束时 Contoso 咖啡机应用的屏幕截图。

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