标签：Power HVAC App Teams 订单 按钮 我们 Orders 页面
目录
这是有关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 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连接器。我们现在保持简单，但有乐趣和实验。
此时，您会发现将电子邮件地址添加到数据源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属性设置为 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！
尝试您的创建，添加订单，然后验证所有内容是否正确保存在数据表中。
如果您想在将商品添加到购物车时检查临时收藏表的内容，请选择设置旁边的省略号，然后选择收藏。
让我们继续我们的审批系统的下一阶段。
创建经理审批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集合中，并提交集合进行处理。
对于中间部分，我们需要：
- 用作订单详细信息背景的矩形
- 一个矩形，里面有一个标签，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。
创建：
- 一个矩形作为已批准订单的背景
- 一个矩形，里面有一个标签，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，以使您能够将消息发布到您选择的团队频道。不要忘记删除临时画廊。
总结
我们在本教程中取得了很多成就。我们为我们的应用程序创建了一个客户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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。