介绍

创建主页面

与用户一起工作

如何预览您的应用

创建客户订单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 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

为制造业构建Teams Power App 2：创建客户UI相关推荐

为制造业构建Teams Power App 1：Dataverse入门
目录介绍场景:HVAC订购系统在Teams中创建Power App 选择团队并命名应用程序添加一些数据总结这是有关Teams中Power Apps开发的三部分系列文章中的第一篇. 创建Te ...
为制造业构建Teams Power App 3：创建制造商UI
目录介绍创建制造商用户界面订单面板订单详情面板在Actoin中的应用程序下一步这是有关Teams中Power Apps开发的三部分系列文章中的第三篇文章. 介绍本系列的前两篇文章使用T ...
Teams Bot App 初探
上一篇文章深入讲了incoming webhook.这篇文章我们来看一个稍微复杂点的,正式点的 teams app:bot. 我们先来和之前一样,通过teams toolkit 的 sample ga ...
如何查看jinja2模板的上級_如何使用Python的Flask和谷歌app Engine来构建一个web app...
前言如果您想在很短的时间内使用Python构建web应用程序,那么Flask是一个非常好的选择.Flask是一个小而强大的web框架.它也很容易学习和简单的代码. 在本教程中,我将向您展示如何使用A ...
什么是Microsoft Teams的App Studio
Teams的app studio很多用户可能不知道,但是对于一个teams平台的开发人员来说,这个是开发利器,利用这个工具你可以轻松的配置manifest文件,可以轻松的一站式创建teams app所 ...
从今天开始学习iOS开发（iOS 7版）-- 构建一款App之App开发过程（二）
构建一款App之App开发过程 App开发过程设计用户界面定义交互教程: Storyboard (构建一款app一章中包含四个小节:App开发过程.设计用户界面.定义交互以及教程,本文是第一小节 ...
power bi 创建空表_如何使用R在Power BI中创建地理地图
power bi 创建空表介绍 (Introduction) This is the fifth article of a series dedicated to discovering geogr ...
sencha app watch php,Sencha Touch构建移动端App
Sencha Touch是什么 Sencha Touch是专门用于移动应用开发的JavaScript框架,也是第一个基于HTML5的移动应用框架,其前身是Ext.使用Sencha Touch,开发者可 ...
Sencha学习笔记4: Creating your First App - 官方创建您的第一个Sencha Touch应用指导
英文原文地址:http://docs.sencha.com/touch/2.3.1/#!/guide/first_app (天地会珠海分舵声明:本翻译文章建议读者参照英文原文进行阅读,因为原文包含了实 ...

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

介绍

创建主页面

与用户一起工作

如何预览您的应用

创建客户订单UI

为订单项目使用集合

创建经理审批UI

等待批准面板

订单详情面板

发布到团队频道

总结

为制造业构建Teams Power App 2：创建客户UI相关推荐

最新文章

热门文章