练习 - 在 Power Apps 中创建第一个应用
在下面的练习中,我们将使用 Excel 表作为数据源来创建您的第一个应用。 如果您已将数据格式化为表并将其保存到您有权访问的数据源(例如 OneDrive),我们可以将任何 Excel 表用作数据源。 在本练习中,我们将下载数据,将其保存到 OneDrive,构建一个简单的三屏应用,然后开始在空白画布上创建应用。 在后续学习单元中,我们将继续使用本练习中从空白屏幕开始创建的这款应用。 您可以参考这款三屏应用来了解控件之间是如何交互以访问数据的。 两个应用都能够与相同的数据进行交互。
获取数据
下载 Excel 电子表格 CoffeeMachineData.xlsx。 选择该链接,然后选择下载原始文件按钮以下载文件。 下载完成后,继续执行以下步骤。
从 OneDrive 浏览器选项卡中,选择新增 > 文件上传。
在“打开”弹出窗口中,选择 CoffeeMachineData.xlsx 文件所在的位置,很可能位于“Downloads”文件夹中。
找到并选择 CoffeeMachineData.xlsx 文件后,选择打开。 在 OneDrive 命令栏顶部中心的搜索字段中输入 CoffeeMachineData,确认该文件位于 OneDrive 中。 现在您的 OneDrive 中已经有了数据文件,让我们开始构建应用。
构建一个三屏应用
让我们首先构建一个只需在 Power Apps 中点击几下按钮即可构建的三屏应用。
返回 Power Apps Maker Portal make.powerapps.com 并使用您的组织帐户登录。
从左侧菜单中选择创建选项卡。
在开始位置选项下选择 Excel 按钮。
如果您在连接下方没有看到 OneDrive 连接,请选择 + 新建连接按钮,然后选择创建按钮以创建连接。 连接出现后,选择 OneDrive for Business 连接。
在选择 Excel 文件下找到并选择 CoffeeMachineData.xlsx。 可以使用右上角的搜索字段搜索文件。
在选择表下方,选择 CoffeeMachines。 CoffeeMachines 是存放应用数据的表。
选择右下角的连接按钮并观看 Power Apps 构建三屏应用的过程。
不一会儿,Power Apps 就会向您展示一个具有移动版外观的功能齐全的应用。 要了解它在移动设备上的效果,请使用右上角“保存”图标附近看起来像“播放”按钮的“预览”按钮。 选择“播放”按钮(或按 F5)并试用该界面。
请注意,您可以滚动浏览项目列表,选择项目,查看一些项目详细信息,编辑项目详细信息以及保存/取消更改。 如果您使用 Excel 按钮构建应用,很快就能构建出一个功能齐全的应用。
我们来按右上角的 X 退出预览模式,然后保存此应用。
选择保存按钮并在另存为窗格中输入该应用的名称。 然后选择保存。
从命令栏左上角选择返回按钮,退出应用。
现在您已经体验过用 Power Apps 构建应用,我们来开始构建自己的应用吧。
创建画布应用
从 Power Apps Maker Portal (make.powerapps.com) 开始,选择创建选项卡,然后选择空白应用。
在创建弹出窗口中,在空白画布应用下,选择创建。
将应用命名为“Contoso Coffee Machines”,并将“格式”开关设置为平板电脑。 选择创建。
现在,您会看到一个空白屏幕,屏幕上面显示“欢迎使用 Power Apps Studio”弹出窗口或消息。 它会提示您“从‘插入’窗格中添加项目或连接到数据”。我们从创建一个库来查看数据记录开始。 选择“库”选项。 如果您没有看到此弹出窗口,则从命令栏选择插入按钮,然后找到/选择垂直库。
屏幕上会出现一个名为 Gallery1 的控件。 它当前未连接到数据,因此 Power Apps 会提示我们选择数据源。 因为有各种不同类型的数据,我们需要告知 Power Apps 我们想要连接到什么类型的数据。 在这种情况下,我们需要连接到保存到 OneDrive 的 Excel 电子表格。 这可以通过 OneDrive for Business 连接来实现。 通过此连接,我们可以访问企业 OneDrive 帐户中的文档以及我们有权访问的任意 SharePoint 文档库。
找到/选择 OneDrive for Business。您可以在搜索字段中输入 OneDrive 来快速找到它。 您可能需要选择添加连接并对该连接进行身份验证。
完成与 OneDrive for Business 的连接后,屏幕右侧会显示一个面板,提示您选择 Excel 文件。 查找并选择我们复制到 OneDrive 的名为“CoffeeMachineData.xlsx”的 Excel 文档。如果您找不到它,可以在搜索字段中输入文件名,以缩小选择范围。
选择“CoffeeMachineData.xlsx”后,面板随即会提示您选择表。 此时应该会出现一个“CoffeeMachines”选项。选择“CoffeeMachines”旁边的框,然后选择面板底部的连接按钮。
再次选择您的库。 屏幕右侧是库控件的属性面板。 确保数据源设置为“CoffeeMachines”。 如果您之前还未能看到库中填满图片、标题和价格,那么现在应该可以看到了。
重设库的大小,使其展开到屏幕底部并触及屏幕左侧。
现在我们来添加一个窗体控件,以便可以更新库中显示的数据。 从标头菜单中选择插入按钮。 找到并选择编辑窗体。
屏幕上会显示控件 Form1。 将其拖到屏幕的右半部分,然后重新调整其位置和大小,使其占据屏幕的右半部分。
请注意,新窗体会提示我们连接到数据。 选中窗体控件后,可以看到属性面板位于屏幕右侧。 在属性正下方,您可以看到数据源和一个显示无的下拉列表。 选择下拉列表并选择 CoffeeMachines 表。
窗体目前是空白的,让我们来向其中添加字段。 在属性面板中,选择编辑字段的链接,它正好位于“数据源”下拉列表的下方。
在字段弹出面板中,选择添加字段按钮。
选中选择字段下每个字段旁边的框(您可能需要向下滚动才能看到所有字段)。 然后选择添加。 现在,您的窗体显示了以三列形式排列的输入字段。 您可以关闭字段面板。 所有字段都应为空白。
接下来,我们需要指定要在窗体中显示的数据项。 可以看到库控件位于屏幕左侧。 库中显示了所有咖啡机,那么我们希望窗体中显示其中某一项。 选中窗体后,转到屏幕顶部的编辑 (fx) 栏。 在编辑栏的左侧,有一个下拉菜单,可用于查找“窗体”控件的属性。 选择下拉列表,然后找到/选择 Item 属性。
在 fx 公式输入框中的“Item”字段中,输入 Gallery1.Selected。 您应该可以立即看到窗体字段中填充的数据。
您可以随时预览应用,方法是选择命令栏右上角的“播放”图标并按 F5 功能键,或者也可以直接选中并按住键盘上的 Alt 键。 在应用处于预览模式时,尝试滚动浏览库并选择一些不同的咖啡机。 观察它如何根据您选择的物料填充窗体。
接下来,我们来添加一个按钮控件,以便可以保存对数据所做的任何更改。 从命令栏中选择插入按钮,然后查找/选择按钮。 请参考下图了解后续三个步骤。
让我们将按钮文本从“按钮”更改为“保存更改”。在右侧的“属性”面板中,第一项是 Text 属性。 将“按钮”替换为“保存更改”并进行输入。
在屏幕底部的窗体下方重新调整新按钮控件的位置。
选中按钮控件后,转到 fx 编辑栏。 将 OnSelect 属性从“false”更改为 SubmitForm(Form1)。
现在,再次将应用置于预览模式。 然后更新窗体中的某个字段,例如“Machine Price”。 按保存按钮以记录更改。
接下来,我们来为应用添加标题。 再次选择“插入”按钮,然后找到/选择矩形控件。
将矩形控件放在屏幕的左上角并将其展开,使其一直展开到屏幕的右侧。 在矩形的属性面板中,找到 Height 输入字段并输入 75。
提示
属性面板中的任意项都有一个相应的值,可在编辑 (fx) 栏中查看。 如果在属性面板中找不到,您可以选择编辑栏输入字段左侧的下拉列表。 这样,您就可以找到/选择 Height 属性。
现在,重设库和窗体控件的大小,使它们正好位于矩形下方。 请参考下图中已编号的后续步骤。
插入文本标签控件。 将 Text 属性更改为“Contoso Coffee Machines”。
接下来,将标签控件的 Size 调整为字号 24,然后重设控件大小以使标题适合单行。
接下来,我们来更改字体颜色。 您可以通过选择命令栏中的颜色设置来更改它。 在标准颜色下方,选择白色圆形。
最后,重新调整标签控件的位置,使其位于屏幕中间矩形的中央。 请注意虚线在接近屏幕中心时的显示方式,以帮助您对齐标签。
这样就可以了! 您通过空白屏幕创建了一个单屏应用,您可以用它来更新和保存咖啡机数据中的任何数据。 在下一个单元中,我们将在此应用的基础上继续学习新概念。