练习 - 使用 SharePoint 生成库存应用

已完成

假设这样一种场景:您希望 Contoso 公司内的用户可以自行订购咖啡机。 Contoso 希望您生成一个可以与处理该流程的任何人员共享的应用。

在本练习中,您将设置几个 SharePoint 列表来存储咖啡机数据和订单数据。 然后,您将创建一个 Power Apps 画布应用,用于与这些数据交互并下订单。

创建机器列表

您的第一个任务是创建机器列表:

  1. 下载 Machine Order Data Excel 文件。

  2. 转到用于存储应用数据的 SharePoint Online 站点。

  3. 在左上角,选择新建 > 列表

  4. 选择从 Excel 创建选项。

    SharePoint 中“创建列表”页面的屏幕截图,其中显示了“从 Excel 创建”选项。

  5. 选择上传文件,然后选择先前下载的 Machine-Order-Data.xlsx 文件。

  6. 自定义页面上,检查 Machines 表是否在从此文件中选择表下拉菜单中,然后选择右下角的下一步

    “自定义”页面的屏幕截图,其中显示选择了“Machines”作为表。

  7. 您可以调整列表名称并添加描述(可选)。 选择创建按钮以继续。 然后稍等片刻,获得新列表。

新列表完成后,浏览器应自动导航到新列表。 Excel 工作表中的所有数据应已加载并可供您使用。

创建订单列表

接下来,您将按照以下步骤创建订单列表:

  1. 选择左上角 SharePoint 站点名称下方的主页选项。

  2. 在左上角,选择新建 > 列表

  3. 选择空列表

  4. 将列表命名为 Orders-List,然后选择创建

    “名称”设置为“Orders-List”的屏幕截图。

  5. Orders-List 页面上,在列表名称下方,您会看到名为“Title”的列。 该列右侧是添加列选项。 选择添加列

  6. 创建列 对话框中,选择日期和时间,然后选择下一步

  7. 将此列命名为 OrderDate,然后选择保存

    “创建列”对话框的屏幕截图,其中突出显示了名称输入和“保存”按钮。

  8. 再次选择添加列

  9. 向下滚动并选择货币,然后选择下一步

  10. 将此列命名为 OrderTotal,然后选择保存

现在,您拥有了一个 SharePoint 列表,可以使用该列表存储咖啡机的订单数据。

创建画布应用

按照以下步骤在 Power Apps 中创建画布应用:

  1. 转到 make.powerapps.com

  2. 选择左侧的创建选项。

  3. 选择空白应用

    Power Apps 中“创建应用”页面的屏幕截图,其中选择了“空白应用”。

  4. 选择空白画布应用下的创建选项。

  5. 将应用命名为 Contoso Coffee Machine Ordering,然后选择创建按钮。

  6. 等待片刻后,您的屏幕将打开画布应用编辑器,您可以在其中设计和编辑要与 SharePoint 数据交互的 Power Apps 应用程序。

    画布应用编辑器的屏幕截图。

  7. 选择右上角的保存图标。 (默认情况下,Power Apps 每两分钟自动保存一次应用,但仅在您第一次手动保存后才会自动保存;因此,最好在创建应用后就对应用进行保存)。

  8. 选择添加数据下拉菜单。

  9. 搜索并选择 SharePoint(标准 SharePoint 选项,而不是 SharePoint 站点)。 您可能需要向下滚动搜索结果才能找到此项。 如果您还没有连接,请选择添加连接。 如果您已有连接,则可以选择现有连接并跳过下一个步骤以继续。

    展开“添加数据”下拉菜单以显示 SharePoint 的搜索结果的屏幕截图。

  10. 若要创建新连接,屏幕右侧会打开一个面板。 请确保选择直接连接(云服务)选项,然后选择屏幕下部的连接

  11. 在屏幕右侧,您现在应该会看到连接到 SharePoint 站点选项,该选项会提示您输入列表位置的 URL,或者您可以在最近的站点下查看以查找 SharePoint 站点。

    您用于创建机器列表的 SharePoint 站点应显示在最近站点列表中。 您只需选择站点即可继续。

    如果您的站点 显示在列表中,请返回到您创建列表的站点并复制 URL(站点的主屏幕,而不是列表页面),然后将 URL 粘贴到面板的顶行。 Power Apps 识别站点后,您可以选择连接以继续。

  12. 选择一个列表面板中。 选中 Machine-Order-DataOrders-List 复选框。

  13. 选择连接

    “选择列表”对话框的屏幕截图,其中选择了两个列表并显示“连接”按钮。

您现在已经创建 Power Apps 应用程序并将其连接到数据,以便可以直接通过该应用读取和写回到 SharePoint。

设计画布应用

让我们通过插入和连接一些控件来设计画布应用。

  1. 选择插入 > 文本标签

    展开“插入”菜单以显示常用项目的屏幕截图,其中包括“文本标签”。

  2. 移动显示在画布左上角的标签,然后调整其大小以覆盖整个画布。

  3. 在屏幕右侧,您可以使用易用的界面来编辑画布应用中的控件属性,而无需编辑代码。 在标签仍处于选中状态的情况下,将文本更改为 Contoso Coffee Machine Ordering

  4. 字号更改为 18

  5. 对于文本对齐方式,选择居中

  6. 颜色旁边的字母 A 图标表示文本颜色,“油漆桶”图标表示该标签的背景颜色。 选择 A 文本颜色图标,然后选择白色

  7. 选择“油漆桶”图标,然后选择深蓝色(或您需要的任何其他颜色)。

    选择“油漆桶”图标以显示颜色选择器的屏幕截图。

    注意

    对于大多数控件,您可以通过多种方式调整字体、颜色和背景色等设置。 属性 面板是一种方法,但您可能也注意到,命令栏功能区中显示这些相同的选项。

  8. 在上部功能区中,选择插入 > 垂直库

  9. 将显示一个弹出窗口,提示您将库连接到数据源。 选择 Machine-Order-Data

  10. 若要调整字段,让我们尝试使用命令栏功能区界面。 从命令栏中选择编辑字段

  11. 确保 Subtitle1 下拉菜单显示 PriceTitle1 选项显示 Machine Name。 在编辑字段对话框外部进行选择以继续。

  12. 库中显示的文本应反映机器名称和价格以及“示例图像”,我们稍后将对此进行修复。 现在,重设库的大小以使其位于标头标签下方,从而占据标签下方画布的左半部分。

  13. 让我们替换该示例图像,以便可以显示实际的产品图像。 选择库中的第一个图像图标。 命令栏功能区的正下方是 fx 公式,您可以在其中编写代码以更改 Power Apps 中控件的属性,删除 SampleImage 文本,然后输入 ThisItem.Photo

    在编辑栏中选择“图像”的屏幕截图,其中公式设置为“This Item Photo”。

  14. 接下来,让我们修改副标题字段的文本格式以显示货币。 选择库中第一个项目的 Subtitle1 标签,用于显示项目的价格。 请注意,在树视图中您以灰色突出显示此控件,公式字段显示 ThisItem.Price

    树视图的屏幕截图,其中显示展开了“Screen1”以显示“Gallery1”并展开了“Gallery1”以显示“Subtitle1”。

  15. 在公式字段中,将 Text 属性更改为:Text(ThisItem.Price,"$##,###.00")。 您会立即看到您的价格显示美元符号、千位分隔符和美分。

  16. 接下来,让我们添加一个窗体来修改数据。 选择编辑画布的空白部分(以退出库),然后选择插入 > 编辑窗体

  17. 选择 Orders-List 作为数据源,Power Apps 将根据我们的 SharePoint 列表列使用字段填充窗体。

  18. 重新放置窗体并重设其大小,以适合画布的右半部分。

    画布的屏幕截图,其中显示了已选择窗体以及在编辑栏中“Orders-List”作为 DataSource。

  19. 选择窗体中的标题卡片。 请注意,所选卡片上方的卡片名称左侧会显示一个挂锁图标。 我们将解锁卡片以对其进行自定义。 右键选择所选卡片,然后选择解锁

    已选择“标题”卡片的图像,其中显示了右键单击选项,并突出显示了“解锁”。

  20. 使用相同的方法解锁窗体上的 OrderDateOrderTotal 卡片。

  21. 选择窗体中标题下的文本输入框(如有必要,进行解锁)。

  22. Default 公式Parent.Default 更改为 Gallery1.Selected.'Machine Name'。 现在,您应该可以从屏幕左侧的库中看到所选项目的标题。

    提示

    当您输入公式时,Power Apps 将在您键入时自动建议选项。 您可以选择 TabEnter 键以选择突出显示的建议,或滚动浏览列表以选择一个建议。 此选项完全可选,但在熟悉公式后,可以加快公式创建速度和提高准确性。

  23. 选择 OrderDate 下的日期选取器控件,然后将公式 DefaultDate 更改为 Today()

  24. 选择 OrderTotal 下的文本输入框,然后将公式更改为 Gallery1.Selected.Price

  25. 选择整个窗体。 在左上角,DataSource 属性显示在包含公式输入字段的下拉菜单中,该字段显示 'Orders-List'。 通过选择此“属性”下拉菜单,您可以选择可用于控件的任何属性,并更改该控件属性的公式。 在本例中,您将更改窗体的 Item 属性,因此选择该下拉菜单,然后选择 Item

    下拉菜单的屏幕截图,其中选择了默认的 DataSource 并显示了“Item”。

  26. Item 的公式中,输入 Defaults('Orders-List')。 Defaults() 函数指示 Power Apps,我们每次提交此窗体时都会为 Orders-List SharePoint 列表创建一个新项目。

  27. 转到命令栏,然后选择插入 > 按钮

  28. 将按钮拖动到屏幕右侧的窗体输入下方。

  29. 将按钮的 Text 属性更改为 Submit Order

  30. 将按钮的 OnSelect 属性更改为 SubmitForm(Form1)

现在,您拥有了一个应用,用户可以在其中选择咖啡机、预览订单并提交订单。 您完成的应用应如下图所示。

订单预览的屏幕截图,其中显示了“提交订单”按钮。

通过从命令栏右上角选择播放(三角形)按钮(或选择键盘上的 F5 功能键),将应用置于预览模式下。 选择一台咖啡机,然后选择提交订单按钮。 返回到 SharePoint 列表上的 Orders-List,您应该会看到新创建的订单。

列表中新创建的订单的屏幕截图。

希望这能激起您对使用 Power Apps 与 SharePoint 数据进行交互的兴趣。 虽然这是一个基本应用程序,但您可以添加自定义来更改 UI/UX 以支持您的业务需求。