拆解一个Power Apps模板应用 - 6 - EditTicketFormScreen

最新推荐文章于 2024-06-04 09:49:47 发布

aladinggao

最新推荐文章于 2024-06-04 09:49:47 发布

阅读量572

点赞数

分类专栏： Microsoft Power Apps 文章标签： microsoft

本文链接：https://blog.csdn.net/aladinggao/article/details/108938582

版权

Microsoft 同时被 2 个专栏收录

53 篇文章 14 订阅

订阅专栏

Power Apps

44 篇文章 54 订阅

订阅专栏

接上一节，本节继续分析屏幕组建。

五. EditTicketFormScreen

类似ViewTicketScreen, 这里也采用了Scrollable样式的页面布局，并且最终只包含了一个卡片。

顶层的页面层面: /#在页面初始化显示的时候，设定了几个变量#/

OnVisible = UpdateContext({ShowAssignedToGallery:false, AssignedToUserDisplayName:"", AssignedToUserMail:"",EditTicketPriority:SelectedTicket.Priority.Value});

If(!IsBlank(SelectedTicket.AssignedTo), UpdateContext ( {AssignedToUserDisplayName: SelectedTicket.AssignedTo.DisplayName, AssignedToUserMail:SelectedTicket.AssignedTo.Email}) )

卡片层面，主体由四部分控件组成：

a. 绿色标题栏

和上面多次提到的标题栏一样，主要是返回按钮，设置了OnSelect = ResetForm(EditTicketForm); Back()

b. 红色的工单信息显示区域

和ViewTicketScreen类似，都是成对的动静态标签。对于动态标签，如果是文本数据，标签的Text = SelectedTicket.<字段名>；如果是日期, 则使用加格式化的Text函数来获取日期数据，如: Text = Text(SelectedTicket.Created, ShortDate)

在这里再重复提一下：

当选中一个控件后，在右侧的属性边栏里，各个属性也是按类别进行分组的，如下图所示，显示了当前控件有三类属性: Action 、 Data 、 Design。分别对应了该控件与动作相关、数据相关以及与控件在页面上的视觉效果相关的三类属性设置。前两类的设置直接和App的运行逻辑相关，最后的视觉效果属性绝大多数是用来美化界面的，但有三个比较特殊，分别是： DisplayMode、Visible和TabIndex。这三个不单纯和界面的美化有关，更多的在于以视觉效果来控制页面上控件所能发挥的效果，如:DisplayMode(Disable：控件不可用；View: 只用来显示数据；Edit：可以用来编辑数据)； Visible: 通过控制控件是否可见来控制控件的功能； TabIndex: 参考 https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/controls/properties-accessibility 。

c. 蓝色编辑工单的窗体区域

由六个子控件组成， AssignedTo, Description, TaskStatus, Completed, Category 和 Priority

表单层面，设置DataSource = <SPO 里的列表名>； Item = First(Filter(HelpDesk, ID=SelectedTicket.ID)) /#通过所选工单的ID 来过滤列表获取要编辑的工单。这里有一个函数 First(), https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-first-last, First() 用来返回列表的第一个记录。由于First() 里套装了Filter() 函数，这里的First() 就会返回过滤后的第一个记录。#/

同样的，和ViewTicketForm类似，除了Completed子控件外，其余五个是标准的在选择了数据源字段后所生成的子控件（会包含StarVisible, ErrorMessage, Value 和 Title）。

再次说明的是：对于编辑模式的表单来说，有两个属性通常是需要设定的。一个就是需要对Update属性进行定义，通常其属性值就是卡片下存在输入性质的子控件所获取的值。另一个就是Format，用来定义输入的数据类型。

要注意的地方在于:

第一、页面上的前三个卡片 Status、PercentComplete 以及 Assign To是只有管理员才能修改的，因此其DisplayMode = If(isAdmin,DisplayMode.Edit,DisplayMode.Disabled)

第二、 AssignTo控件的设置:

设置了DisplayFields = ["DisplayName","Email","Picture"]， /#其效果在于，运行App后，在Assigned To文本框里输入用户信息的时候，如有匹配的用户，就会显示这里设定的用户属性值，如下图：

设置了SearchFields = [“Claims”] /# #/
PaddingLeft = If(EditTicketFormAssignedToValue.DisplayMode = DisplayMode.Edit, 5, 0) /# 这个设置也比较有趣，用来控制不同显示模式时的页面布局 #/
BorderColor = If(IsBlank(Parent.Error), ColorValue("#ebebeb"), Color.Red)

第三、再来看看Completed卡片

主要是Number 和 Value 两个子控件。

Number: Text = EditTicketFormCompletedValue.Value & " %"
Value： Default = If(IsNumeric(ThisItem.PercentComplete), ThisItem.PercentComplete*100,0)

顺便提一下，这里的进度条是Input 里的Slider 控件。

控制进度条的两个主要属性: HandleSize – 控制进度条上圆点的的大小； RailThickness – 控制滑轨的宽度。

d. 紫色的取消及Update 按钮

取消按钮： OnSelect = ResetForm(EditTicketForm);Navigate(MyTicketsScreen,None)
Update 按钮: OnSelect = SubmitForm(EditTicketForm); HelpDeskFlow.Run("'" & SelectedTicket.ID & "'"); ResetForm(EditTicketForm); Navigate(MyTicketsScreen,None)

因为所编辑的表单存在必填项，这里的Update按钮也对必填项进行了校验，通过后才会提交。实现方式，设置 DisplayMode = If(isAdmin, If(!IsBlank( EditTicketFormAssignedToValue. Selected.DisplayName) && EditTicketForm.Valid, Edit, Disabled), If(EditTicketForm.Valid, Edit,Disabled) )

下一节我们继续解析后续的屏幕构成。

未完，待续。。。