为制造业构建 Teams Power App 2：创建客户 UI

这是关于在 Teams 中进行 Power Apps 开发的三部分系列文章的第二篇。

引言

本文为我们的 HVAC 制造商订单应用程序构建了客户用户界面 (UI)。我们将创建一个类似购物车界面的应用，客户可以在其中选择产品并将订单发送给经理审批。

在开始之前，让我们快速浏览一下所需的工具，并熟悉开发环境。

在左侧的 Power Apps 栏中，你可以浏览大部分内容。你可以在树状视图中看到你创建的屏幕。你可以通过“插入”选项卡将项目添加到屏幕中。通过“数据”选项卡与你的应用程序数据进行交互。

与常规开发一样，Power Apps 也有编码标准。要了解更多关于这些内容，请参阅白皮书PowerApps Canvas App Coding Standards and Guideline。这篇白皮书包含了大量信息，从命名约定到性能优化建议。

创建主屏幕

让我们从添加一个空白屏幕开始，以创建主屏幕。边走边命名屏幕会很方便。

与用户协作

根据登录的人员自定义应用程序的主屏幕和安全访问权限非常简单。

在此示例中，我们将设置一个全局变量 varUser，以防止多次调用 Active Directory。请记住，最终用户可能在移动设备上使用我们的应用程序。最大化性能绝对是值得的。变量 User 返回当前登录用户的详细信息，为我们的应用程序提供身份验证层。

要设置此全局变量，请在树状视图中选择App，并将 OnStart 事件设置为 Set(varUser,User())。然后，选择App右侧的省略号，然后单击Run OnStart。

现在我们的全局变量已准备好使用。

我们在主屏幕顶部添加了一个矩形，并将标签的 Text 属性设置为："Welcome " & varUser.FullName。我们在顶部添加了一个关闭图标，其 OnSelect 属性设置为 Exit(true)。这将关闭应用程序并注销用户。

接下来，我们添加一个按钮和一个图像，并将按钮和图像组合在一起。将按钮的 Text 属性更改为 Create New Order，将其 OnSelect 属性更改为 Navigate('New Order Screen')。添加一个新屏幕并将其命名为“New Order Screen”。我们鼓励你探索此处可用的所有属性。

我们需要两个新屏幕来匹配那两个新按钮View Orders和Approve Orders。使用复制和粘贴功能复制你的第一个按钮，然后按如下方式调整属性

我们添加到 Visible 属性中的代码确保员工无法批准自己的订单，并且仅制造商才能看到“准备处理”的订单。有许多方法可以实现这一点。根据公司的设置，你还可以使用 Office365Groups 连接器使按钮的可见性依赖于用户的组成员身份。我们暂时保持简单，但请尽情享受并尝试。

此时，你会发现将你的电子邮件地址添加到 HVAC_Managers 和 HVAC_Manufacturers 数据源会很有帮助。然后，按钮将对开发人员可见。

这就是我们此时的主屏幕的样子

具有如下的树状视图

如何预览你的应用程序

你可以随时通过选择右上角的预览按钮来预览你的应用程序，或者快速检查一些内容，按住 Alt 键并与屏幕进行交互。这是一个方便的功能，可以快速确认某些内容是否正常工作。

创建客户订单 UI

现在，让我们继续创建一个屏幕供我们的客户提交订单以供审批。

我们在“New Order Screen”上重用了主屏幕上的矩形条。将标签文本更改为 "Create New Order for " & varUser.FullName，并将图标更改为主页形状，OnSelect 设置为 Navigate('Home Screen')。

现在我们必须添加一个库并将其连接到 Products 表。

将Layout设置为 Title, subtitle, and body，然后编辑Fields以显示Product Name、Description和Price。请记住，我们在第一篇文章中已将一些产品添加到数据库，因为有数据会很有帮助。

在创建客户订单 UI 时，让我们进行格式设置。以正确的格式显示我们的价格会很好。我们可以通过将Price标签的 Text 属性更改为 Text(ThisItem.Price, "[$-en-US]$#,##0.00") 来实现此目的。现在我们的价格看起来像价格了！

我们可以将以下项目拖到库中。确保将其放在顶行上，以便它们在所有行中重复。

使用集合来处理订单项

我们还将添加一个新按钮，当我们将滑块数量更改为大于 0 时，该按钮将出现，使用户能够将产品添加到他们的购物车。在这里，我们使用了一个集合，一种临时表。

按钮需要以下属性

  OnSelect:        
  ```
  Collect(colOrderDetails, {CustomerName: varUser.FullName , ProductName:     ThisItem.ProductName,Quantity:sliQuantity.Value, Subtotal: (ThisItem.Price *   sliQuantity.Value)});
  Reset(sliQuantity)
  ```
  Text:	"Add to Cart"
  Visible: `sliQuantity.Value >0`

这些属性创建了一个名为 colOrderDetails 的集合，该集合保存数据，直到更新实际数据源 (HVAC_Ordered_Items) 为止。CustomerName 字段由 varUser 填充。如果你愿意，也可以是文本输入框。

现在是时候确保我们使用一个新的集合来启动我们的屏幕了。选择New Order Screen并将 Clear(colOrderDetails) 添加到 OnVisible 属性。

接下来，让我们制作屏幕的购物车详细信息部分。

这包括：

• 一个矩形，用于容纳紫色背景
• 一个标签，文本设置为“Order Details”
• 一个矩形，用于容纳订单详细信息标题的背景
• 一个库

• 一个垃圾桶图标，其 OnSelect 属性设置为 Remove(colOrderDetails, ThisItem)
• 一个标签，文本设置为 ("Total: " & Text(Sum(colOrderDetails, Subtotal), "[$-en-US]$#,##0.00"))
• 一个重置图标，工具提示为“Reset Order”，其 OnSelect 属性设置为 Clear(colOrderDetails)
• 一个按钮

UpdateContext(
	{
    	ReturnedRecord: Patch(
        	HVAC_Orders,
        	Defaults(HVAC_Orders),
        	{
            	CustomerName: varUser.FullName,
            	Total: Sum(
                	colOrderDetails,
                	Subtotal
            	),
            	OrderStatus: 'OrderStatus (HVAC_Orders)'.'Awaiting Approval'
        	}
    	)
	}
);
Refresh(HVAC_Orders);
ForAll(
	colOrderDetails,
	Patch(
    	HVAC_Ordered_Items,
    	Defaults(HVAC_Ordered_Items),
    	{
    	    CustomerName: colOrderDetails[@CustomerName],
        	ProductName: colOrderDetails[@ProductName],
        	OrderID: RetunedRecord.OrderID,
        	Subtotal: colOrderDetails[@Subtotal],
        	Quantity: colOrderDetails[@Quantity]
    	}
	)
);
Clear(colOrderDetails);
Notify("Order sent for approval. For reference, your order number is " & ReturnedRecord.OrderID,NotificationType.Information, 6000);
Navigate('Home Screen')

这个按钮是我们迄今为止最复杂的代码。当用户按下按钮时，应用程序将在 HVAC_Orders 表中创建一个新订单（订单状态设置为“等待批准”），并且我们返回刚创建的记录。

然后，对于我们购物车集合 colOrderDetails 中的每一条记录，我们在 HVAC_Ordered_Items 表中创建一条新记录，其 OrderID 设置为返回记录的 OrderID。会出现一个六秒钟的通知，向用户显示他们的订单号，并告知他们将返回主屏幕。

为了进行额外验证，我们将所有内容分组到大型订单详细信息矩形中，并将组的可见部分设置为 !IsEmpty(colOrderDetails)。

我们已经创建了一个相当高级的应用程序，其中有一个订单屏幕，它只花费了正常开发时间的一小部分，而且我们甚至还没有离开 Teams！

尝试你的创作，添加订单，然后验证所有内容是否都已正确保存到数据表中。

如果你想在将项目添加到购物车时检查临时集合表的内容，请选择设置旁边的省略号，然后选择Collections。

让我们继续进行审批系统的下一阶段。

创建经理审批 UI

我们必须创建“Approve Orders”屏幕，供管理层批准或拒绝员工的订单。花一些时间将与应用程序其余部分相似的主题应用于屏幕，顶部有矩形条，带有Home按钮和标题。

等待审批面板

要创建等待审批面板，在屏幕左侧，我们需要添加

• 一个矩形，用作库的背景，带边框
• 一个标签，Text 属性设置为“Awaiting Approval”
• 一个库

等待审批面板应仅显示尚未批准的订单。

将 TemplateFill 设置为 If(ThisItem.IsSelected, RGBA(224,224,237,1))。这有助于经理更容易地看到库中哪个项目被选中。

屏幕上的所有其他项目都应将其 Visible 属性设置为 If(!IsBlank(galApproveOrder), true)，以防止在没有需要批准的项目时显示这些项目。

订单详细信息面板

接下来，我们创建订单详细信息面板。经理将选择一个订单 ID 来批准。然后，订单详细信息将出现在屏幕中间，并附有批准或拒绝按钮。然后，应用程序会将批准的订单添加到集合 colBatchOrders 中，并将集合提交进行处理。

对于中间部分，我们需要

• 一个矩形，用作订单详细信息的背景
• 一个矩形，内部带有一个标签，Text 属性设置为 "Order Details for " & galApproveOrder.Selected.CustomerName
• 一个库

• 一个标签，Text 属性设置为 "Total: " & Text(galApproveOrder.Selected.Total, "[$-en-US]$#,##0.00")
• 一个Approve按钮

Collect(colBatchOrders, {OrderID: galApproveOrder.Selected.OrderID});
Patch(HVAC_Orders, galApproveOrder.Selected, {OrderStatus:'OrderStatus (HVAC_Orders)'.Approved});

• 一个Reject按钮

已批准订单面板

现在我们必须创建屏幕的最后一部分，该部分显示已批准的订单，准备好作为Ready for Processing提交给制造商。

Create

• 一个矩形，用作已批准订单的背景
• 一个矩形，内部带有一个标签，Text 属性设置为 Approved
• 一个库

Filter(HVAC_Ordered_Items, OrderID=galApproveOrder.Selected.OrderID

• 一个发送订单进行处理的按钮

ForAll(
	colBatchOrders,
	Patch(
    	HVAC_Orders,
    	LookUp(
        	HVAC_Orders,
        	OrderID = colBatchOrders[@OrderID]
    	),
    	{OrderStatus: 'OrderStatus (HVAC_Orders)'.'Ready for Processing'}
	)
);
Clear(colBatchOrders);
MicrosoftTeams.PostMessageToChannelV3(
	"a15e2e15-8592-4d89-ac3f-419baefe3943",
	"19:e45661661372454886f656b60500a97f@thread.tacv2",
	{
    	content: "<p>New order ready for processing</p>",
    	contentType: "html"
	},
	{subject: "ALERT: NEW ORDER"}
);
Navigate(‘Home Screen’);

同样，这里有很多事情要做。当经理选择Send for Processing按钮时，所有收集的订单的状态将更新为Ready for Processing。应用程序会将一条消息发送到制造商的 Teams 频道，通知他们有一个新订单已准备好。然后，应用程序会将经理重定向到主屏幕。

发布到 Teams 频道

在我们的应用程序能够发布消息到 Teams 频道之前，它需要一些信息，即组 ID 和频道 ID。这些信息很难找到，但结果绝对值得努力，而且这项技能在这里值得分享。

我们需要一些临时库来查找这些 ID。

在你的应用程序的某个屏幕上添加两个。将第一个库的 Items 属性设置为 MicrosoftTeams.GetAllTeams().value

将第二个设置为 MicrosoftTeams.GetChannelsForGroup(YourGallery.Selected.id).value

然后，你可以检查这些库并检索所需的 ChannelID 和 GroupID，以便能够将消息发布到你选择的 Teams 频道。不要忘记删除临时库。

摘要

我们在本教程中取得了如此大的成就。我们为我们的应用程序创建了一个客户 UI，使客户员工能够输入订单，客户经理能够批准订单并将其发送到制造商的 Teams 频道。

在本系列的最后一篇文章中，我们将创建一个用于制造商员工查看订单并将其发送到处理部门的视图屏幕。我们相信你已经迫不及待地想要微调你的应用程序了！