拆解一个Power Apps模板应用 - 3 - MyTicketScreen

接上一节， 本节继续解析屏幕构件。

二. MyTicketScreen

 屏幕总体构成如下:

屏幕层面, 该屏幕关联到了一个工作流，用来通过电子邮件发送工单状态（工作流的相关内容会在后面描述）。

另外，该屏幕在加载显示的时候执行下面的五个动作（每个动作之间以分号分隔）：

• OnVisible= Refresh(HelpDesk);    /#刷新数据源 Helpdesk 列表#/

ClearCollect(AllTickets,HelpDesk);  /#清理集合AllTickets, 然后把刷新过的 Helpdesk 列表 加载到集合里。#/

If(isAdmin, Set(TicketToRunFlow, First(Sort(AllTickets,Created,Descending))), Set(TicketToRunFlow, First(Sort(Filter(AllTickets, Author.Email = MyProfile.Mail || Author.Claims = MyProfile.UserPrincipalName), Created,Descending) ) ) );  /# 如果是管理员(isAdmin 值为 true)，就把所有工单按创建时间降序排列，然后把第一个工单分配给变量 RicketToRunFlow, 也就是即将运行工作流的一个工单。否则，不是管理员，就根据用户的电子邮件地址或者UPN来识别出用户身份，并将该用户的所有工单按创建时间降序排列，然后把第一个工单分配给变量 RicketToRunFlow。#/

If(RunFlow,HelpDeskFlow.Run("'"&TicketToRunFlow.ID&"'")); /# 如果RunFlow 为 true(App 层面初始化的值为 false), 就运行 HelpDeskFlow, 并将工单的 ID 作为参数传递给工作流。#/

If(RunFlow,Set(RunFlow, false )) /# 最后把 RunFlow的值重新设置回 false #/

再来看屏幕下级的四个控件:

• 第一个控件，Logout按钮。OnSelect = Navigate(LoginScreen,None)  /#返回LoginScreen页面#/
• 第二个控件，新建Ticket 按钮。 OnSelect = Navigate(CreateTicketFormScreen,None) /#跳转到CreateTicketFormScreen页面#/
• 第三个控件，屏幕标题的一个标签。
• 第四个控件，屏幕的主体，是一个库（英文对应Gallery），以卡片形式显示每个Ticket。具体由下面的子控件构成：

先来看看最顶部的库的层面， 有三个属性设置值得分析：

• OnSelect = Set(SelectedTicket,ThisItem)   /# 把当前对象赋值给 SelectedTicket变量  #/
• Items = If(isAdmin,Sort(AllTickets,Created,Descending),Sort(Filter(AllTickets,Author.Email = MyProfile.Mail || Author.Claims = MyProfile.UserPrincipalName ),Created,Descending))  /#这里也涉及到上面普通用户点击的OnSelect设置，为什么点击用户按钮后，不管是不是管理员，都会把isAdmin设为 false？ 可以看到 isAdmin 在这里起了关键的作用，如果是管理员，就显示所有工单， 并按照创建时间降序排序。但如果不是管理员，则对所有工单按照用户的指定属性进行过滤， 然后按照创建时间降序排序。#/
• WrapCount = 1       /# 用于设定每行显示的卡片数，来控制页面布局#/

上图标出了库下面的14个子控件，逐个来看:

1. 工单卡左上角的一个票券图标，主要设置了Image 和 OnSelect 两个属性。

• Image  =  'icons-8-train-ticket-96-px'.  /#这里涉及到App 里媒体资源的管理，在App创建界面的左侧工具栏里，有一个就是管理媒体文件资源的，只要将图片、音视频等文件上传进来，然后就可以在App里使用了。可以看到上面的Image所指向的文件就出现在下面的这个媒体资源管理清单里。

#/

• OnSelect = Select(Parent)   /# 也就是执行上一级的Gallery 的OnSelect 动作Set(SelectedTicket,ThisItem)。 https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-select ， 官方对Select（）的描述: The Select function simulates a select action on a control as if the user had clicked or tapped the control. As a result, the OnSelect formula on the target control is evaluated.#/

2. 右下角的编辑按钮， 主要设置了 OnSelect 属性。

• OnSelect = Select(Parent);  Navigate(EditTicketFormScreen,ScreenTransition.None)   /# 执行了两个动作: 先执行上一级的Gallery 的OnSelect 动作Set(SelectedTicket,ThisItem)。然后跳转到EditTicketFormScreen窗口。 #/

3. 左下角的删除按钮，主要设置了OnSelect 属性。

• OnSelect = Select(Parent); Set(TicketToDelete,ThisItem); Navigate(ConfirmationDeleteScreen,None) 

/# 执行了三个动作: 1. 执行上一级的Gallery 的OnSelect 动作Set(SelectedTicket,ThisItem)；2. 将ThisItem设置为变量TicketToDelete（这个TicketToDelete变量会在确认删除的页面里用到）；3. 跳转到ConfirmationDeleteScreen窗口。#/

扩展一下: 第二步定义了变量TicketToDelete 后，它就可以以全局变量的形式在整个App的任何页面被调用。如下图，可以看到通过 . 运算符可以调用到ThisItem的属性，也就是SPO List里所创建的各个字段（当然也可以调用默认创建的的字段）

#/

4. 覆盖整个卡片的矩形框，主要设置了OnSelect属性。

• OnSelect  = Select(Parent);  Navigate(ViewTicketScreen,None)  /# 执行了两个动作: 先执行上一级的Gallery 的OnSelect 动作Set(SelectedTicket,ThisItem)。然后跳转到ViewTicketFormScreen窗口。 #/

5. 标签控件（动态），用来显示工单被指派到的人员。主要设置了Text 属性。

• Text = ThisItem.AssignTo.DisplayName  /#从List 获取对应条目的AssignTo字段的DisplayName数据进行显示#/

6. 标签控件（动态），用来显示工单优先级。主要设置了Text 属性。

• Text = ThisItem.Priority.Value /#从List 获取对应条目的Priority字段的Value数据进行显示#/

7. 标签控件（静态），用来显示相应条目的名称。Text = “ASSIGNED TO”, 对应第5个控件。

8. 标签控件（静态），用来显示相应条目的名称。Text = “PRIORITY”, 对应第6个控件。

9. 标签控件（静态），用来显示相应条目的名称。Text = “ID:”, 对应第10个控件。

10. 标签控件（动态），用来显示工单ID编号。主要设置了Text 属性。

• Text = ThisItem.ID /#从List 获取对应条目的ID字段值进行显示#/

11. 标签控件（动态），用来显示工单状态。主要设置了Text 属性。

• Text = ThisItem.ID /#从List 获取对应条目的TaskStatus字段的Value值进行显示#/

12. 标签控件（动态），用来显示工单的主题。主要设置了Text 属性。

• Text = ThisItem.ID /#从List 获取对应条目的Title字段值进行显示#/

13. 矩形分割线，用来控制页面视觉效果。

14. 控件14有点类似控件 4， 但比 4 的覆盖范围小一些（仔细对比下面的两个截屏的底部就坑看出来。）。

其作用和控件13分割线一样，纯粹是为了控件页面的视觉效果，在控件 4 Mask 所控制的范围内， 添加控件 14 并通过填充白底色来形成卡片的样式。

要注意的是: 控件的排列顺序会影响OnSelect。当前控件 4 排在控件 14的上面，因此点击控件 4 和控件14重复覆盖的范围是，实际生效的OnSelect 是控件 4 的，也就是位于上部的控件。

控件 4 – Mask	控件 14 – WhiteBackground

另外: 上面第5到14这些控件还都设置了OnSelect属性，都为 Select(Parent) – Set(SelectedTicket,ThisItem)。因为只是一个Set变量的动作，实际点击时，看不到具体的动作。

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

未完，待续。。。