销售应用融合开发（第三部分）：处理表单数据

• 下载项目文件 - 57.1 KB

本系列融合开发文章展示了一种优秀的学习方法，团队可以利用特定工具来简化开发周期。

之前的文章展示了 Azure 在 为 Microsoft Power App 扩展核心功能 并使其成为更好的汽车销售工具方面所起的关键作用。它们还展示了如何 实现数据库和应用服务 以实现系统间的通信。

这第三篇也是最后一篇文章将探讨如何让我们的 Power App 对销售团队更有帮助，并在不同平台上创造丰富的用户体验。我们将涵盖：

• 如何使用自定义连接器将上一篇文章中创建的 API 添加到我们的 Power App 中。
• 如何修改 Power App 以调用上一篇文章中创建的 API。
• 如何添加一个按钮，让销售人员能够触发预订车辆的 API 调用，确保没有其他人会卖掉客户想要的车辆。这样，销售人员可以在试驾完成后进行协商并完成交易。

创建自定义连接器

连接器是 API 的代理，它允许底层服务与 Power Apps 进行通信。它提供了一组称为触发器和操作的操作。

操作是用户对 Power App 进行的更改。Swagger OpenAPI 定义了操作。这些更改可以包括在 PostgreSQL 数据库中查找、写入、更新或删除数据的操作。这些操作使用户能够根据指定条件查找和显示车辆。

相比之下，函数和触发器会监听事件，并在事件触发时执行操作。按下 Power App 上的按钮就是一个触发器。例如，我们在本文中创建了一个预订按钮。

要创建自定义连接器，请登录 Power Apps。导航到 **Data**，然后导航到 **Custom Connectors**。

在 **Custom Connectors** 列表中，单击 **New custom connector**。然后，由于我们使用的是 OpenAPI，请选择 **import an openAPI file**。

在 **Connector name** 字段中输入一个名称。然后导航到您下载或创建的 OpenAPI 文件。单击 **Continue**。

注意：OpenAPI 目前是第三版，Power Apps **不支持**。请确保将 JSON 文件转换为第二版。

将显示连接器的常规信息。

单击右侧的 **Create Connector** 来创建并保存连接器。

可以在 **Security** 部分设置连接器的安全性。**Definition** 部分也很重要，因为它包含了连接器所有必需的操作。第五步是 **Test**，这仅在您创建连接器后才能进行。您可以测试 API 并获取响应。

**Swagger Editor** 允许在 Power App 中编辑 fastAPI，而无需直接修改 openAPI 文件。

下图显示了定义的示例。

下一步是使用我们创建的连接器在 Power App 中使用 OpenAPI。下图显示了流程

修改 Power App 以调用 Sales API

接下来，我们将编辑 Power App 以使用上一节中创建的连接器调用 Sales API。连接器将成为我们的数据源，而不是 Excel 文件。

首先，在 **Power Apps** 菜单中导航到 **Apps** 并编辑应用。首先，删除 Google Sheets 作为您的数据源，这样应用看起来就像下面的截图

在左侧面板中，单击 **Add data** 并选择上面创建的连接器。

加载应用数据后，更新的屏幕将显示数据。

在这种情况下，应用程序拥有数据和连接器，我们可以添加搜索条件。

我们可以通过在右侧面板的 **Advanced** 属性的 **HintText** 字段中将“Search by ID”更改为“Search”。

下一步为应用添加筛选属性。此步骤对于销售团队了解库存车辆至关重要。然后，我们添加一个按车辆颜色或型号搜索的操作。

为此，请单击左侧面板中的 **Tree view** 菜单。单击 **Screens**，然后在 **Screen1** 下选择 **Form** 布局。当屏幕上的项目被选中时，转到 fx 函数框并插入此函数

Filter(FastAPI.getAll(),StartsWith(color, TextInput2.Text) || StartsWith(model, TextInput2.Text))

Filter 函数需要两个主要组件。它们是：

• 数据源，在本例中是 FastAPI.getAll 函数。此函数检索 Azure 数据库（Cars 表）中列出的所有项目，并填充表单布局。
• 逻辑，在 filter 函数中实现的搜索条件。在本例中，我们将使用 StartsWith 和 or 函数。StartsWith 函数将搜索栏中的文本输入与表单列表中的任何匹配颜色或型号进行比较。

当我们运行应用程序时，我们可以根据颜色或型号过滤车辆。

本节探讨了如何在我们的应用程序中使用 Sales API 实现搜索功能。通过公民开发者和专业开发者的共同努力，该应用程序可以从系统中提取数据并在 Power App 中显示。

接下来，我们添加一个预订按钮。每当触发该按钮时，现有的 Azure 数据库和 Power App 都会更新。

添加一个按钮来触发预订车辆 API 调用

销售人员必须单击“查看详细信息”箭头来预订车辆，这将打开一个新屏幕（如下创建）并通过以下函数传递车辆详细信息。箭头上的 OnSelect 属性配置此操作

Navigate(NewScreen,ScreenTransition.CoverRight); Set(viewItem,ThisItem)

我们的 Navigate 函数包含两部分：

• ScreenTransition.CoverRight 是从主屏幕到可用屏幕的过渡类型。
• Set(variableName, value) 有助于创建变量。在本例中，变量名是 viewItem，值为 ThisItem。代码将此变量传递到新屏幕。当用户单击箭头时，新屏幕将打开。

单击 **Insert** 选项卡并选择 **New screen** 来创建新屏幕。在 **New screen** 菜单中，选择 **blank screen** 选项。新屏幕命名为“AvailableScreen”。

要添加数据表来显示所选车辆的详细信息，请在 AvailableScreen 的 **Insert** 选项卡中选择 **data table**。

接下来，为该表添加一个数据源。使用此函数根据 Item_ID 获取车辆

FastAPI.getItem(viewItem.item_id)

FastAPI.getItem 函数通过使用 Item_ID 作为参数来获取一辆车。viewItem 对象包含从前一个屏幕传递过来的所有车辆详细信息。

配置好数据源后，转到表的属性并单击 **edit fields**。此菜单选项允许您选择要显示的列。

要添加预订按钮，请单击 **Insert** 选项卡上的按钮，并将其放置在数据表下方的任意位置。您可以通过更改按钮属性中 **text** 选项的值来将按钮的默认文本更改为“reserve”。

按钮必须运行 FastAPI.updateItem 函数来预订车辆。代码传递车辆 ID，并运行一个查询来更新车辆详细信息，以使此函数成功运行。

以下是按钮 OnSelect 属性中的代码

FastAPI.updateItem(viewItem.item_id);
Navigate(SuccessScreen,ScreenTransition.CoverRight)

更新项目后，应用程序会过渡到一个新屏幕，通知销售人员他们已成功预订了车辆。

要创建显示“成功预订”消息的新屏幕，请单击 **New Screen** 并从菜单中选择 **Success**。

按钮应将销售人员带回主屏幕。使用以下代码：

Navigate(Screen1);

最后，运行应用程序并搜索一辆车。

单击箭头查看选定的车辆详细信息（如下面的截图），然后单击 **reserve**。

车辆已预订。我们可以再次搜索该车辆，并立即看到“不可用”。

Azure 数据库也相应更新。

后续步骤

在本文中，我们学习了如何创建自定义连接器并将现有 API 添加到 Power App。这一部分对销售人员非常有益，因为他们现在可以通过查找和更新数据来高效工作。公民开发者可以简单地添加函数来连接到现有数据或系统。

融合开发方法已被证明在开发中至关重要。所有专业知识都很重要，所有专家共同努力，带来巨大的优势。公民开发者专注于概述业务问题并创建原型解决方案，而专业开发者则处理现有系统并连接必要的资源。

Microsoft 的 Power Platform 不仅仅是其各个部分的简单组合。它是一套支持低代码开发的ので、生成一个可用的应用程序相对容易。融合团队可以使用 Power App 平台上的大多数数据源来构建令人惊叹的应用程序。他们还可以使用各种自定义连接器来连接和导入数据。

探索 Microsoft Power Apps 的详细 文档 以了解更多信息。如果您准备好为您的销售应用赋能并应对其他业务挑战，请 开始使用 Power Apps。

要了解专业代码开发如何融入 Power Apps 的低代码开发，以及为什么专业代码和低代码开发人员需要彼此，请查看我们点播的数字活动，Pro Code on a Low Code Platform。