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

2023-11-07 21:28:04

目录

介绍

创建主页面

与用户一起工作

如何预览您的应用

创建客户订单UI

为订单项目使用集合

创建经理审批UI

等待批准面板

订单详情面板

发布到团队频道

总结

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

介绍

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

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

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

浏览左侧栏中的大多数Power Apps。您将能够在树视图中看到您创建的页面。您可以在“插入”选项卡上将项目添加到页面截图中。在“数据”选项卡上与您的应用程序的数据进行交互。

就像在正常开发中一样，Power Apps有编码标准。要了解有关这些的更多信息，请查看白皮书PowerApps Canvas应用程序编码标准和指南。本文包含大量信息，从命名约定到性能增强建议。

创建主页面

让我们首先添加一个空白页面来创建一个主页面。随时随地为页面命名非常方便。

与用户一起工作

自定义应用程序的主页面和安全访问，取决于登录的人，很简单。

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

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

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

我们的全局变量现在可以使用了。

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

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

接下来，我们添加一个按钮和一个图像并将按钮和图像分组。将按钮的Text属性更改为Create New Order，并将其OnSelect属性更改为Navigate('New Order Screen')。添加一个新页面并将其命名为“新订单页面”。我们鼓励您在这里调查所有可用的属性。

我们需要两个新页面来搭配两个新按钮View Orders和Approve Orders。使用复制和粘贴功能复制您的第一个按钮，然后按如下方式调整属性：

Text

“查看订单”

OnSelect

Navigate('View Orders' )

Visible

HVAC_Manufacturers.Email中的User().Email

 

Text

“批准订单”

OnSelect

Navigate('Approve Orders Screen')

Visible

HVAC_Managers.Email中的User().Email

我们添加到Visible属性的代码确保员工无法批准自己的订单，并且“准备处理”订单仅对制造商可见。有很多方法可以实现这一点。根据公司的设置，您可以还使按钮的可见性依赖于用户的组成员身份，使用Office365Groups连接器。我们现在保持简单，但有乐趣和实验。

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

此时，您会发现将电子邮件地址添加到数据源HVAC_Managers和HVAC_Manufacturers很有帮助。然后按钮将变得可见以用于开发目的。

这是我们的主页面此时的样子：

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

使用这样的树视图：

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

如何预览您的应用

您可以随时通过选择右上角的“预览”按钮来预览您的应用程序，或者要快速检查某些内容，请按住Alt键并与页面交互。这是一个方便的功能，可以快速确认某些东西是否有效。

创建客户订单UI

现在让我们继续为我们的客户创建一个页面来下订单以供批准。

我们在新订单页面上重用主页面中的矩形条。将标签的文本更改为"Create New Order for " & varUser.FullName，图标为主形状，OnSelect设置为Navigate('Home Screen')。

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

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

将布局设置为标题、副标题和正文，然后编辑字段以显示产品名称、描述和价格。请记住，我们在第一篇文章中向数据库添加了一些产品，因为拥有数据很有帮助。

让我们在创建客户订单UI时进行格式化。以正确的格式显示我们的价格会很好。我们可以通过将Price label Text属性更改为Text(ThisItem.Price, "[$-en-US]$#,##0.00")来做到这一点。现在我们的价格看起来像价格！

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

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

Label

文本

“数量”

Slider

值

0

 

最小值

0

 

最大值

10

Reset Icon

OnSelect

Reset(sliQuantity)

Label

文本

"Subtotal =" & Text(ThisItem.Price * sliQuantity.Value, "[$-en-US]$#,##0.00")

为订单项目使用集合

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

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

该按钮需要以下属性：

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属性。

接下来，让我们制作页面的Cart details部分。

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

这包括：

  • 一个矩形来保存紫色背景
  • 带有文本“订单详细信息”的标签
  • 用于保存订单详细信息标题背景的矩形
  • 画廊

Name

gal订单详情

数据源

颜色订单详情

布局

标题和副标题

字段

产品名称和数量

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

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

文本

“发送订单以获得批准”

OnSelect

更新上下文(

         {

         返回记录：补丁（

        HVAC_订单，

        默认值（HVAC_Orders），

        {

                  客户名称：varUser.FullName，

                  总和 （

                  颜色订单详情，

                  小计

                  ),订单状态

                  ：'订单状态（HVAC_Orders）'。'等待批准'

        }

         )

         }

);

刷新（HVAC_Orders）；

对所有人（

         颜色订单详情，

         修补（

         HVAC_Ordered_Items,

         默认值（HVAC_Ordered_Items），

         {

             客户名称：colOrderDetails[@CustomerName],

        产品名称：colOrderDetails[@ProductName],

        OrderID: RetunedRecord.OrderID,

        小计：colOrderDetails[@Subtotal],

        数量：colOrderDetails[@Quantity]

         }

         )

);

清除（颜色订单详细信息）；

Notify( "订单已发送以供审批。作为参考，您的订单号为 " & ReturnedRecord.OrderID,NotificationType.Information, 6000 );

导航（'主页面'）

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

然后，对于购物车集合 colOrderDetails 中的每条记录，我们在 HVAC_Ordered_Items 表中创建一个新记录，将 OrderID 设置为返回记录的 OrderID。向用户显示一条 6 秒的通知，其中包含他们的订单号和一条他们将返回主页面的消息。

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

我们有一个非常先进的应用程序，它的订单页面只需要正常开发时间的一小部分，我们甚至还没有离开 Teams！

尝试您的创建，添加订单，然后验证所有内容是否正确保存在数据表中。

如果您想在将商品添加到购物车时检查临时收藏表的内容，请选择设置旁边的省略号，然后选择收藏。

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

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

创建经理审批UI

我们必须创建我们的批准订单页面，以便管理层批准或拒绝员工的订单。花一点时间将类似的主题应用到应用程序的其余部分，顶部的矩形栏带有主页按钮和标题。

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

等待批准面板

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

要创建等待批准面板，在页面左侧，我们必须添加：

  • 一个矩形作为我们画廊的背景，带有边框
  • 文本属性设置为“等待批准”的标签
  • 画廊

Name

galApproveOrder

数据源

HVAC_Orders

布局

标题

字段

ThisItem.OrderID

项

Filter(HVAC_Orders, OrderStatus = 'OrderStatus (HVAC_Orders)'.'Awaiting Approval'

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

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

设置TemplateFill为If(ThisItem.IsSelected, RGBA(224,224,237,1))。这使经理可以更轻松地查看选择了图库中的哪个项目。

页面上的所有其他项目都应将其Visible属性设置为If(!IsBlank(galApproveOrder), true) 以在不需要批准的情况下防止项目可见。

订单详情面板

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

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

对于中间部分，我们需要：

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

Name

galOrderDetailsApproval

数据源

HVAC_Ordered_Items

布局

标题和副标题

字段

产品名称和数量

项目

Filter(HVAC_Ordered_Items, OrderID=galApproveOrder.Selected.OrderID
  • 文本属性设置为 "Total: " & Text(galApproveOrder.Selected.Total, "[$-en- US]$#,##0.00")的标签
  • 批准按钮

文本

“批准”

OnSelect

收集（colBatchOrders，{OrderID：galApproveOrder.Selected.OrderID}）；

补丁(HVAC_Orders, galApproveOrder.Selected, {OrderStatus: ' OrderStatus (HVAC_Orders)' .Approved});
  • 拒绝按钮

文本

“拒绝”

OnSelect

Patch(HVAC_Orders, galApproveOrder.Selected, {OrderStatus:'OrderStatus (HVAC_Orders)'.Rejected});

批准订单面板

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

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

创建：

  • 一个矩形作为已批准订单的背景
  • 一个矩形，里面有一个标签，Text属性设置为 Approved
  • 画廊

Name

galApprovedOrders

数据源

批量订单

布局

标题

字段

订单号

项

过滤器（HVAC_Ordered_Items，OrderID=galApproveOrder.Selected.OrderID
  • 发送订单进行处理的按钮

文本

“发送处理”

可见的

!IsEmpty(colBatchOrders)

OnSelect

对所有人（

         colBatchOrders，

         修补（

         HVAC_订单，

         抬头（

        HVAC_订单，

        订单 ID = colBatchOrders[@OrderID]

         ),

         {订单状态：'订单状态（HVAC_Orders）'。'准备处理' }

         )

);

清除（colBatchOrders）；

MicrosoftTeams.PostMessageToChannelV3(

         “ a15e2e15-8592-4d89-ac3f-419baefe3943”，

          “ 19:e45661661372454886f656b60500a97f@thread.tacv2”，

         {

         content: " <p>新订单准备处理</p>" ,

         内容类型：“ html”

         },

         {主题：“警报：新订单” }

);

导航（'主页面'）；

同样，这里发生了很多事情。当经理选择发送以进行处理按钮时，所有收集的订单的状态都会更新为准备处理。该应用程序向制造商的团队频道发送一条消息，提醒他们新订单已准备就绪。然后应用程序将管理器重定向到主页面。

发布到团队频道

在我们的应用程序可以向团队频道发布消息之前，它需要一些信息，即组ID和频道ID。这个信息很难找到，但结果肯定是值得的，技巧也值得在这里分享。

我们需要一些临时画廊来找到这些ID。

将两个添加到页面上，在您的应用程序中的某个位置。将第一个图库的Items属性设置为MicrosoftTeams.GetAllTeams().value

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

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

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

总结

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

在本系列的最后一篇文章中，我们将为制造商员工创建一个查看页面，以查看订单并将其发送到加工部门。我们确定您已经渴望微调您的应用程序！

https://www.codeproject.com/Articles/5303170/Build-a-Teams-Power-App-for-Manufacturing-2-Create

上一篇：微软：远程工作影响员工的生产力和创新


下一篇：【M365运维】Teams相关的几个问题