拆解PowerApps - 请假申请 - 5

上一节我们拆解完成了HomeScreen 里结构最大的一个控件,GalleryRequests。 本节我们继续HomeScreen的拆解,争取能在本节完成。

正式开始。
紧跟着 GalleryRequests 的还是一个Gallery 控件 --- GalleryFilter,如下图。

1. GalleryFilters 的功能
从名字上就能看出,它是用来过滤数据的。对的,它就是对上面GalleryRequest 里的数据进行过滤,然后按照一定的条件来将过滤出的结果显示到上一节的GalleryRequests控件区域里。这里所谓的条件其实也就是图上对应的四个按钮: All、Pending、Approved 和 Declined。

2. GalleryFilters 的结构
从上面的截图能看到,这个GalleryFilters 只包含一个按钮控件。实现方法是在空白的水平排列的Gallery 里添加按钮控件,具体可以参考“Gallery里水平排布多个按钮”一文。

3. 功能实现逻辑
GalleryFilter控件只是通过 Items = Table({Filter: "All"}, {Filter: "Pending"}, {Filter: "Approved"}, {Filter: "Declined"}) 来为各个按钮添加了显示名, 再就没有其它操控相关的设置了。
设置好这个 Items 属性,实际上也就相当于设置了 GalleryFilter 控件的 Fields 属性。

子控件 FilterButton 上,设置了: 
- Text = ThisItem.Filter  //运行效果时后续将会根据 Table 里的值选取相应的词来做按钮名。
- OnSelect = Set(_requestTypeFilter, ThisItem.Filter)    //把当前点选的按钮的名称赋值给 _requestTypeFilter 参数。这个参数将用做于下面一些If语句的条件。

回头再看上一节 GalleryRequests 的 Items 设置,

Sort(
    If_requestTypeFilter="All",
      Filter(Leave, If(_managerView, Approver = _myProfile.UserPrincipalName, Requester = _myProfile.UserPrincipalName)),   //如果是主管视图,就把审批人是主管的假期申请从 Leave 表里筛选出来,否则就筛选出申请人是主管自己的假期申请。不知道是不是有点绕口,不过应该还是好理解的 :)
      Filter(Leave, Status=_requestTypeFilter && If(_managerView, Approver = _myProfile.UserPrincipalName, Requester = _myProfile.UserPrincipalName)) ),    //这里是 IF 条件为 False,也就是没有选 "All"的时候,要执行的语句。这时就会通过 _requestTypeFilter 变量里的值结合后续的 IF 语句来从 Leave 表里筛选数据。从这两个Filter 语句也能看出,为什么上面截图说“一定程度上受GelleryFilters控件的控制”, 就是因为这里会有两种可能。
StartDate, Descending)

--------- GalleryFilters控件介绍到此,可以感受一下通过一个变量在两个空间之间传递数据的这种实现方式----------

最后,HomeScreen里还剩六个控件,我们一起简单过一下。这六个控件及其在界面上的对应关系如下图所示(都挤在一块,看线头两端然后结合下面的说明应该还是能分清哪个是哪个 :-) )

1. LabelMyLeaveRequests  -  一个起提示作用的文字标签
设置了 Text = If(!_managerView, "My Leave", _requestTypeFilter) & " Requests"      //根据当前的视图类型,结合变量 "_requestTypeFilter" 的值来显示不同的提示。注意: IF 的条件是 “如果当前视图不是主管视图”。运行后的几种效果见下面截图:

2. Rectangle1 -  和布局有关的一根分割线,没有操作逻辑。

3. IconCreateNew  - 右上角的一个“ + ” 图标, 有两个主要设置。
A. 设置了 OnSelect =    // 利用Concurrent 做了一些变量设置,最后利用 Navigate 进行页面跳转。如下:
Concurrent(   
    Set(_submittingRequest, false),
    Reset(AboutLeaveTitleInput),
    Reset(AboutLeaveDetailInput),
    Reset(LeaveStartDatePicker),
    Reset(LeaveEndDatePicker),
    Set(_selectedLeaveType,Blank()),    // 设置或重置了一些变量

    Set(_defaultApprover, Office365Users.Manager(_myProfile.Id));
    If(Office365Users.UserPhotoMetadata(_defaultApprover.Id).HasPhoto, Set(_defaultApproverPhoto, Office365Users.UserPhoto(_defaultApprover.UserPrincipalName))) );   // 设置用户头像,同时Concurent 到此结束

Navigate(NewRequestScreen, None)   // 跳转到 NewRequestScreen 界面

B. 设置了 Visible = !_managerView, 也就是如果当前视图不是主管视图, 这个图标就会显示出来。 这个在上面的那个截图里也有体现。

4. CircleCreateNew   - 衬托在 " + " 图标下层的蓝色圆圈,主要起美观作用。不过因为这个圆是辅助“+”图标的,所以也设置了 Visible = !_managerView。
小贴士:要注意的是,在组合使用图标和一些几何形状时,控件相互之间的层次关系要放对,放反了就挡住了。
比如,这里是“+”图标在蓝圆上面,如果放到蓝圆下层就看不到“+”图标了(不考虑透明度的设置)。

5. LabelHomeScreenHeader - 一个文本标签,用来给 HomeScreen 做标题。和上面那个文本标签 LabelMyLeaveRequests 一样, 也设置了 Text 属性。
Text = If(_managerView, "Leave ", "My ") & "Requests"     // 基础 IF 语句,运行效果是:如果当前页面是 主管视图,就显示文本 “Leave Requests”; 如果不是主管视图,就显示 “My Request”。上面的三个对比截图里也有体现,可以看到效果。

6. IconHamburgerHome - 左上角的一个菜单按钮 。用来跳转到下面这样一个菜单页面

这个按钮有两个设置,其实也是按钮控件最基础的两个设置: 
-  Icon = Icon.Hamburger    //按钮的图标形状
- OnSelect = Navigate(NavScreen, None)      // 按钮的跳转 - 点击后,会跳转到 NavScreen界面,也就是上面这个菜单页面。

附:本节用到的函数和运算符
Table, Set, Filter, IF, Reset, Navigate, . ,  &&Sort
----------------------HomeScreen的解析就到这里,下一节我们开始解析新的页面NewRequestScreen------------------------

猜你喜欢

转载自blog.csdn.net/aladinggao/article/details/113526031