其他分享
首页 > 其他分享> > 为制造业构建Teams Power App 2:创建客户UI

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

作者:互联网

目录

介绍

创建主页面

与用户一起工作

如何预览您的应用

创建客户订单UI

为订单项目使用集合

创建经理审批UI

等待批准面板

订单详情面板

发布到团队频道

总结


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

介绍

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

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

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

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

创建主页面

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

与用户一起工作

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

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

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

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

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

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

我们需要两个新页面来搭配两个新按钮View OrdersApprove 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连接器。我们现在保持简单,但有乐趣和实验。

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

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

使用这样的树视图

如何预览您的应用

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

创建客户订单UI

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

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

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

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

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

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

Label

文本

“数量”

Slider

0

 

最小值

0

 

最大值

10

Reset Icon

OnSelect

Reset(sliQuantity)

Label

文本

"Subtotal =" & Text(ThisItem.Price * sliQuantity.Value, "[$-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属性。

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

这包括:

Name

gal订单详情

数据源

颜色订单详情

布局

标题和副标题

字段

产品名称和数量

文本

“发送订单以获得批准”

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!

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

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

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

创建经理审批UI

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

等待批准面板

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

Name

galApproveOrder

数据源

HVAC_Orders

布局

标题

字段

ThisItem.OrderID

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

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

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

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

订单详情面板

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

对于中间部分,我们需要:

Name

galOrderDetailsApproval

数据源

HVAC_Ordered_Items

布局

标题和副标题

字段

产品名称和数量

项目

Filter(HVAC_Ordered_Items, OrderID=galApproveOrder.Selected.OrderID

文本

“批准”

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

创建:

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,以使您能够将消息发布到您选择的团队频道。不要忘记删除临时画廊。

总结

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

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

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

标签:Power,HVAC,App,Teams,订单,按钮,我们,Orders,页面
来源: https://blog.csdn.net/mzl87/article/details/121874135