为零售业构建 Teams Power App 3：创建客户显示 UI

欢迎阅读 Teams Power Apps 系列的第三篇文章，我们将为零售客户管理应用程序添加约会预订功能。这将使 Acme 商店的员工能够为他们的个人购物服务预订约会。

在本系列的第一篇文章中，我们创建了一个用于安排客户约会的简单应用程序。然后，在第二篇文章中，我们创建了一个新的界面，显示完整的客户信息，包括他们的历史购买记录。员工可以从左侧选择一个客户，并在屏幕右侧查看其详细信息。这使员工能够使用历史数据全面了解客户的需求和偏好。这使员工能够在当前约会中定制客户体验。

在这第三篇文章中，我们使员工能够输入新的客户信息和更新现有的客户信息。我们还创建了一个单独的屏幕用于预订新约会，使电话接线员能够根据所有可用的客户信息预订约会。

编辑现有客户信息

为了启用编辑现有客户信息，我们首先添加保存和取消按钮，一个对勾和一个叉，如下所示

与本系列第二篇文章中的客户查找类似，我们使用 OnSelect 属性来执行此操作。在保存按钮的 OnSelect 属性中，输入以下语句

SubmitForm(CustomerForm)

SubmitForm 将表单中的任何更改保存到数据源。

在取消按钮上，在 OnSelect 属性中输入以下内容

ResetForm(CustomerForm)

让我们点击预览，观察这两个按钮的实际效果。

一旦设置好，创建新客户也同样简单。为此，创建添加客户按钮并在 OnSelect 属性中输入以下内容

NewForm(CustomerForm);

预览并注意新按钮会清除表单，并使员工能够输入新客户的信息。

有一个问题。假设用户已经选择了一个现有客户。在这种情况下，这个其他客户的约会信息仍然保留在屏幕上，没有提供关于我们正在添加的新客户的任何相关信息。

如所示，我们所有的数据操作都发生在 EditForm 上，并且我们所有的操作都通过更改 EditForm 状态进行操作。有关更多信息，请参阅表单文档，但以下是摘要。

EditForm 有三种模式

• FormMode.Edit — 将编辑表单置于编辑模式以修改现有数据。
• FormMode.New — 使用默认值填充表单以向数据源添加记录。
• FormMode.View — 使用现有数据填充表单。这不可编辑。

我们使用以下函数操作表单的状态

• SubmitForm
• EditForm
• NewForm
• ResetForm
• ViewForm

SubmitForm 使我们能够根据 EditForm 的模式提交新实体和现有实体，然后将表单置于编辑模式。

在上一篇文章中，我们将约会查找与变量 CurrentCustomer 和 CurrentAppt 相关联。一个简单的解决方案是在创建新客户时清除当前选择。为此，更改添加按钮的 OnSelect 属性。

NewForm(CustomerForm);
Set(CurrentCustomer, Blank());
Set(CurrentAppt,Blank());

使用分号，我们可以在同一个属性中输入多个语句。通过新增内容，添加客户按钮不仅清除客户表单，还清除了 CurrentCustomer 和 CurrentAppt 的值。这有效地清除了约会图库和表单。

现在，当员工输入新客户的信息时，客户标签和约会信息都会重置。

我们为约会表单重复这些相同的步骤。

预订新约会

当前屏幕上的约会仅供显示。我们应该创建一个单独的屏幕来预订新的客户约会。

在 TreeView 窗格中，单击“插入新页面”并将此页面重命名为“约会”。

在新页面上，使用另一个编辑表单输入约会数据。

要导航到新页面，创建另一个按钮并使用 Navigate 命令打开屏幕。

然后，将 OnSelect 操作的值设置为 Navigate(Appointment)。

新约会屏幕

新的约会屏幕应包含

• 一个反映客户的标签
• 提交和取消按钮
• 一个用于输入约会数据的编辑表单 (NewAppointmentForm)

与客户屏幕类似，标签反映 CurrentCustomer 的值："新约会对象: " & CurrentCustomer.Name。

然后，我们将 EditForm 连接到 AppointmentInfo。

在此表单中，员工正在设置约会的初始信息，因此我们目前不需要订单号或购买物品列表。这意味着我们可以省略这些字段，只在 EditForm 上保留 CustomerName、AppointmentDate 和 Notes。

请注意，新条目需要主键 CustomerName。但是，由于此表单是为现有客户创建新约会，因此此值已已知，我们不希望用户对其进行编辑。

有一个解决方案。首先，我们将其值默认为 CurrentCustomer.Name。回想一下，CurrentCustomer 是我们分配给在上一屏幕中选择的客户的变量。为此，单击字段控件内的文本框。找到 Default 属性并将其值更改为 CurrentCustomer.Name。

然后，突出显示包含 CustomerName 的控件，并将可见性设置为 false。

一切配置完成后，屏幕如下所示

接下来，转到保存按钮并将 OnSelect 操作的值更改为以下内容

SubmitForm(AddNewAppointment);
Back();

在返回按钮上，将 onSelect 操作设置为

ResetForm(AddNewApointment);
Back();

在这里，我们使用函数 Back 返回到上一屏幕。SubmitForm 将表单置于编辑模式。这意味着在员工提交表单后，它看起来像这样

我们需要将表单设置回新状态。我们通过调用 NewForm(AddNewAppointment) 函数来解决这个问题。可以将此函数添加到保存按钮，但我们将其添加到屏幕本身。

在 TreeView 中选择屏幕并检查其属性。您将看到一个 OnVisible 属性。此属性定义用户导航到屏幕时的行为。

因此，我们在此处将此属性设置为 NewForm(AddNewAppointment)。这样，我们知道每次打开表单时，它都将处于新状态。

但是，现在我们隐藏了客户姓名字段，我们如何知道我们选择了哪个客户？不用担心，CurrentCustomer 可由应用程序中的任何控件访问。我们可以创建一个标签并将其文本设置为 CurrentCustomer.Name。

现在我们已经构建了一个功能齐全的客户管理应用程序，用于记录客户信息和创建新约会。

后续步骤

在本系列中，我们演示了如何使用 Power Apps 快速创建一个功能应用程序，并通过 Microsoft Teams 在您的组织内共享它。这种简单、低成本、低代码的解决方案可与从头开始定制的应用程序相媲美。Power Apps 为更高级的定制提供了大量机会。

在第一篇文章中，我们创建了一个基本的约会信息输入表单。接下来，我们创建了一个新屏幕来呈现客户信息，包括他们所有先前约会的详细信息。在本系列的最后一篇文章中，我们添加了输入客户和约会数据的能力。

尽管很简单，但像这样的应用程序可以帮助零售商进行客户管理。通过轻松访问客户购买（店内和在线）、会员卡使用情况和平均购买金额的详细信息，零售员工可以在当前的约会中个性化客户体验。这些详细信息允许员工根据客户喜欢的颜色和价格范围推荐类似或互补的商品。这有助于改善客户体验并提高销售额。

您可以通过添加更多信息字段、将其与在线约会应用程序连接、将其连接到销售点 (POS) 系统以自动记录购买和美元价值、添加根据过去购买推荐产品的功能等等，进一步定制您的应用程序。员工将能够通过他们现有的 Microsoft Teams 帐户访问所有这些功能。

对于专业开发人员来说，创建 Teams Power App 是一种轻松构建最小可行产品 (MVP) 以原型化想法的方式。它使我们免于编写过多的样板代码，不需要额外的基础设施来托管后端服务，并且我们可以将其卸载给非开发人员（例如零售店老板）进行维护。

现在您知道创建 Power Apps 是多么容易，并且员工可以通过 Teams 访问这些应用程序，是时候创建您自己独特的应用程序了。免费试用 Power Apps。

查看我们的低代码应用开发 7 步指南，即可立即开始使用 Power Apps。