拆解一个PowerApps模板应用2总体构成及第一个屏幕解析

接上一节&＃xff0c;本节我们来具体拆解这个App&＃xff0c;看看它的具体构成和运行逻辑。

登录 https://make.powerapps.com, 点击左侧的菜单栏里的“应用”&＃xff0c; 然后在上节创建的 "Help Desk Tickets"应用的上下文菜单里选择“编辑”。

系统会打开一个用来编辑App的新的网页。从左侧的树状视图里&＃xff0c;我们可以看到这个App的总体结构。

Power Apps 的每个App都是由一个App控件件加上N多个屏幕&＃xff08;Screen&＃xff09;控件构成。

App控件用来定义这个App总体的一些参数&＃xff0c;比如长度、宽度等&＃xff0c;最常用的是通过OnStart属性来定义这个App启动时要初始化的一些变量。比如这个App的OnStart就有下面的设置&＃xff1a;

OnStart &＃61; 
Collect(AllTickets,HelpDesk);   /#设置一个名为AllTickets的集合&＃xff0c;存储从HelpDesk列表里读取的数据#/
Collect(TaskCategories,"LAPTOP / PC equipment issue","LAPTOP / PC software issue");
Collect(TaskStatus,"NOT STARTED","IN PROGRESS","COMPLETED","DEFERRED","WAITING ON CSR");
Collect(TaskPriority,"HIGH","MEDIUM","LOW");     /#设置一个名为TaskPriority的集合&＃xff0c;存储了三个级别的优先级值#/
ClearCollect(AdminList,"jen&＃64;m.com");  /#ClearCollect相当于Clear和Collect命令的集合&＃xff0c;也就是先清理集合的数据再拿指定的数据来添加到集合里。此处就是先把名为AdminList的集合里的数据先清空&＃xff0c;然后把值 jen&＃64;m.com 添加到集合里。这个AdminList用来存储管理员用户信息#/
Set(MyProfile,Office365Users.MyProfile());    /#设置一个变量MyProfile, 值为用户的Profile信息#/
Set(RunFlow,false)   /#设置一个名为RunFlow的布尔类型变量&＃xff0c;值为 false#/

这里所定义的各个参数将被当成全局变量作用到整个App的运行生命周期里。

顺便提一句&＃xff0c;当选中一个控件后&＃xff0c;在右侧的控件的高级属性里&＃xff0c;会分操作、数据、和设计三类属性。

此次App的解析着重在于解析和App运行逻辑相关的操作属性。对于和用户界面相关的“设计”属性&＃xff08;用来设定控件的颜色、字体、形状&＃xff0c;间距等等&＃xff09;以及“数据”属性&＃xff0c;将不会逐个介绍&＃xff0c;除非某个设计属性或者数据属性和运行逻辑相关&＃xff08;比如Visible属性&＃xff0c;虽然归类在设计属性里&＃xff0c;但控件是否可见会影响到App的操作&＃xff0c;所以如果某个控件设置了Visible属性&＃xff0c;我们也需要着重分析一下其背后的逻辑&＃xff09;。

接下来具体来看每个屏幕及其下面所包含的各个控件。

一. LoginScreen

首先&＃xff0c;在屏幕(LoginScreen)层面&＃xff0c;主要设置了 OnVisible &＃61; Set(ShowAccessError, false) /#下面马上会提到这个变量的作用#/

其次&＃xff0c;来看LoginScreen下面的七个控件。

• 编号 1 和编号 3 的两个控件只是简单的文本标签&＃xff0c;设置号 Text 属性就行。
• 编号 2 的控件&＃xff0c; 普通用户登录按钮&＃xff0c;设置了OnSelect &＃61; Set(isAdmin,false); Navigate(MyTicketsScreen,None)   /#不管用户是否属于管理员组成员&＃xff0c; 都将 isAdmin变量设为 false , 然后跳转到 MyTicketsScreen页面#/
• 编号 4 的控件&＃xff0c;管理员登录按钮&＃xff0c;设置了OnSelect &＃61; If(MyProfile.Mail in AdminList.Value, Set(isAdmin,true), Set(isAdmin,false)); If(isAdmin, Navigate(MyTicketsScreen,None), Set(ShowAccessError,true))    /#这里先对登录用户进行了是否管理员的判断&＃xff0c;并把结果存储到 isAdmin变量里&＃xff0c;并直接提供给后续的 If 语句使用&＃xff0c;如果是管理员就跳转到MyTicketScreen屏幕&＃xff0c;不是管理员就把 ShowAccessError设置为 true。#/

另外&＃xff0c;编号 4 的控件实现了一个判断用户是否属于某个组的成员的功能: If(MyProfile.Mail in AdminList.Value, Set(isAdmin,true), Set(isAdmin,false))。 通过 if 语句对用户的电子邮件地址和 AdminList 集合里的电子邮件地址列表进行匹配&＃xff0c;如果有&＃xff0c;就是管理员&＃xff0c;App运行逻辑就会把 isAdmin 变量的值设为 true&＃xff0c;否则就设置为 false /# 这里也能领会到为什么普通用户登录按钮的OnSelect 一上来就先将 isAdmin变量值设置为 false。对于管理员来说&＃xff0c;有时候也需要作为普通用户来提交工单。 #/

这里涉及到三个变量&＃xff0c;MyProfile, AdminList 和 isAdmin&＃xff0c;前两个变量都在App层面的 OnStart里进行了设定&＃xff0c;isAdmin这个变量在界面中的两个用户登录按钮里都有用到。

• 编号 5 的控件&＃xff0c;设置了 OnVisible &＃61; ShowAccessError, 结合上面的描述&＃xff0c;可以看出来这个控件默认是隐藏的&＃xff08;ShowAccessError的值为 false&＃xff09;&＃xff0c;当非管理员用户点击编号 4 的按钮时&＃xff0c;ShowAccessError会被设置为 true。从而显示出这个控件&＃xff0c;也就是显示出控件Text属性所对应的值&＃xff0c;告诉用户“你不是管理员&＃xff0c;不允许你登录”。
• BackgroundDim是一个占据整个屏幕的方框&＃xff0c;填充了黑色&＃xff0c;颜色设置为RGBA(0,0,0,0.8)。 在上图里&＃xff0c;我把这个黑框向下拉小了一点&＃xff0c;用来更清楚的展示下面的背景图片。
• BackGround 就是背景图片。

先到这里&＃xff0c;下一节我们来解析第二个屏幕 MyTicketScreen