为零售业构建 Teams Power App 2：创建客户信息数据录入 UI

欢迎阅读 Teams Power App 系列的第二篇文章。我们正在为 Acme Shop（一家提供个性化购物服务的奢侈品时装店）创建一个内部应用。该应用的目标是让销售人员能够在客户预约时，根据过去的购买信息提供适当的推荐，从而通过提供定制化和个性化的服务来取悦客户。

在上一篇文章中，我们创建了一个用于记录和访问客户信息的基本应用程序。我们创建了数据表来存储这些信息，然后使用开箱即用的默认设置将它们连接到应用程序。

现在，我们将重新设计我们的应用程序，将 CustomerInfo 表与 Appointment 表连接起来。

设计用户界面

在为我们的应用程序设计员工用户界面 (UI) 时，有两种方式来呈现数据：从客户信息开始，或直接进入预约信息。要预订预约，让我们采用第一种方法。

在这种方法中，员工首先查找客户，然后调出该客户的相关信息，然后他们就可以预订预约。

创建新的客户屏幕

要创建此员工用户界面，请先单击“树视图”图标以显示“新屏幕”按钮。

在可用选项中，选择“侧边栏”。您可以随意探索其他选项。

选择“侧边栏”会创建一个包含三个部分的空白页面，但我们还会将其分解为其他部分，为以下内容腾出空间：

• 客户查找，用户可以在其中查看和选择系统中的客户。
• 客户标头，用于指示我们正在查看的当前客户。
• 客户信息表单，我们可以在其中加载和编辑客户详细信息。
• 预约查找，显示可选择的历史预约列表。
• 预约信息，显示所选预约的详细信息。

布局客户查找界面

客户信息部分包含三个组件：

• 文本框，用于按客户姓名搜索客户。
• 按钮，用于创建新客户。
• 垂直库，用于显示客户的一些标识性属性。

在添加组件之前，请选择标题为 SidebarContainer1 的空白容器，以在右侧显示另一个窗格。单击铅笔按钮将其重命名为“CustomerLookupContainer”之类的名称。

在仍然选择 CustomerLookupContainer 的情况下，打开插入窗格以插入您的组件。我们可以为所有三个组件使用插入窗格。

我们所需的一切都在“常用”组中。因此，让我们添加一个文本框、一个按钮和一个垂直库。

假设您已预先选择了容器，Power App 会将每个组件一个接一个地添加到容器中，使用容器的整个高度。

这是通过灵活高度的魔力实现的。单击 CustomerGallery，您会看到启用了灵活高度。这意味着 Power Apps 会自行判断组件需要多高。关闭它可让您指定自定义高度。让我们为客户库保留此设置。

虽然高度是灵活的，但库的宽度超出了侧边栏。仔细查看会发现库的宽度设置为 500（默认）。当然，我们可以将其更改为较小的值（例如 300），或者我们可以智能地将其设置为与 CustomerLookupContainer 相同的宽度。

选择图库后，单击“高级”选项卡以查找“宽度”属性。

通过输入 CustomerLookupContainer.Width，我们可以将其设置为与 CustomerLookupContainer 的宽度匹配。

通过输入 Parent.Width，我们也可以实现此目的，因为 CustomerLookupContainer 是此控件的父级。

您可以随意尝试我们在三个组件上进行的这些设置，并尝试其他设计元素。

筛选客户

对于下一部分，我们将文本框称为“CustomerSearchTextBox”。

现在，我们希望根据 CustomerSearchTextBox 中输入的文本来过滤库。

在同一窗格中有一个名为“数据源”的属性。单击它以显示数据源对话框，然后选择 CustomerInfos，因为这是我们的客户列表。这会告诉库显示 CustomerInfos 表中的所有内容。

虽然您可以使用“字段”和“布局”属性来自定义要显示的数据，但默认设置足以满足我们的目的。

那么，我们如何使用 CustomerSearchTextBox 过滤信息呢？答案再次在于客户库的“高级”选项卡。

找到 Items 属性并输入以下内容：

Filter(CustomerInfos, StartsWith(Name, CustomerSearchTextBox.Value))

库列表将仅包含姓名以我们在 CustomerSearchTextBox 中输入的字符串开头的客户。它会自动刷新，无需额外的代码或公式。我们可以使用预览功能进行测试。

现在，我们可以移到屏幕的右侧了！

客户信息屏幕

我们应用程序界面的右侧由一个 Header 容器和一个 MainSectionContainer 组成。

我们使用 Header 容器用于其目的：屏幕的标题。在选中容器的情况下，插入一个标签。

现在，我们希望标签的文本是当前选定的客户。我们如何知道当前客户是谁？我们可以通过引入一个变量来确定：CurrentCustomer。

将文本的属性设置为以下内容：

"Customer:" + CurrentCustomer.Name

Power Apps Studio 会突出显示 CurrentCustomer，并指示它不知道 CurrentCustomer 是什么。

不用担心。我们使用 Set 命令引入此变量。

选择左侧的 Customer Gallery，找到其 OnSelect 属性，然后插入 Set(CurrentCustomer, ThisItem)。

这意味着每当用户从列表中选择一个客户时，Power App 就会将被引用的已单击项（通过Thisitem引用）设置为一个名为 CurrentCustomer 的变量。

由于我们的标签反映了 CurrentCustomer.Name 的值，因此每当我们在左侧选择一个客户时，他们的名字就会显示在标题中。这有助于零售员工验证他们正在查看哪个客户记录。

预约信息屏幕

现在，我们可以将 MainSectionContainer 分为两个部分：顶部是客户信息，底部是预约。正如我们在 TreeView 中看到的，它是一个垂直库，容器内的所有内容都垂直对齐，因此我们可以在预约的水平布局中插入一个 EditForm 来编辑客户信息。

在水平布局中，我们插入另一个垂直库和一个编辑表单。

将库和编辑表单都连接到 AppointmentInfo 表。将编辑表单设置为两列表单。

更改文本控件的一些样式后，我们会得到类似如下的结果：

要复制此布局，我们需要调整宽度和高度属性。水平布局强制执行灵活宽度，但垂直库的默认高度为 500。对此有一个简单的解决方案：在“高级”选项卡中将高度属性的值更改为 Parent.Height。

类似地，我们可以通过将库的宽度强制设置为 300，同时使用其父容器的宽度来使显示表单灵活，从而调整库和 EditForm。

我们可以调整内边距和边框以分隔屏幕的不同部分。

按“预览”测试您的应用程序界面。您会注意到，目前唯一能做的就是查看系统中的客户。这是因为我们还没有让屏幕的右侧响应左侧。

将预约与客户关联

我们依赖变量和 OnSelect 操作来连接屏幕组件，将预约与客户关联起来。

单击垂直库（客户和预约）上的“高级”选项卡。您会注意到一个名为“操作”的部分。OnSelect 事件是操作的触发器。例如，当员工选择库中的项目时，OnSelect 中定义的操作会触发。

我们使用此操作来告知右侧这是我们想要信息的项目。它涉及两个步骤。

首先，选择 Customer Gallery 并将 OnSelect 操作设置为以下内容：

ResetForm(CustomerForm);
Set(CurrentCustomer, ThisItem);
Set(CurrentAppt, Blank());

ThisItem 是一个保留标识符，即当前选定的项。当员工从列表中选择一项时，我们重置 EditForm，然后将选定的项设置为名为 CurrentCustomer 的变量。

我们还没有介绍 CurrentAppt 变量。我们使用此变量来显示当前选定的预约。在此处，我们将它置为空，因为我们之前选择的预约信息是针对之前选定的客户的。

接下来，选择客户编辑表单（CustomerForm）并将 Item 属性值更改为 CurrentCustomer。当发生这种情况时，CustomerForm 会自动刷新其数据以反映 CurrentCustomer 的值。

同样，我们使用变量 CurrentAppt 连接预约查找。为此，首先选择 Appointment gallery 并设置 OnSelect 操作：

Set(CurrentAppt, ThisItem)

然后，选择 Appointment 表单并将 Item 属性值更改为 CurrentAppt。

完成此设置后，我们现在拥有一个功能齐全的应用程序，其用户界面允许我们查找客户信息。

后续步骤

在我们 Teams Power App 系列的第二篇文章中，我们创建了一个用户界面来呈现客户信息，包括他们的历史预约。我们还使用一系列容器和垂直库创建了用户界面。我们通过一系列变量将客户查找与客户视图连接起来，然后将客户查找与历史预约视图连接起来。

您可以以多种方式排列表单，以包含您需要的字段并创建您想要的布局。包含您认为最能帮助员工定制客户体验的内容。

该应用程序仍然缺少最后一项：创建新客户信息和预订新预约的功能。我们将在本系列的下一篇也是最后一篇文章中介绍。

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