拆解PowerApps - 请假申请 -10

续接上一节，下面我们继续拆解请假申请的后续页面。

本节要拆解的是ReviewScreen，先来看页面总体结构。

1. 页面结构
   如下图，这个页面的作用是用来汇总之前几个页面输入的所有信息，好让申请人做提交前的检查确认。若检查无误就点按钮提交申请。页面主体由一个Gallery控件构成，罗列了前几个页面的信息输入。
   

2. 控件解析
   拆解具体每个控件前，还是先看看整个Screen层面，设置了:
   OnVisible = Set(_editingRequest, false); Set(_reviewRequest, true) //设置了两个变量的布尔值，根据之前几节的分析，应该能知道这个页面肯定也会有不同的状态，然后会根据这两个变量来控制页面是否可见。

   2.1 BtnBackReviewScreen - 返回按钮
   还是两个基础属性的设置：
   -Icon = Icon.ChevronLeft
   -OnSelect = Back()

   2.2 LblReviewScreenHeader - 页面标题， 设置固定的文字标签， Text = “Review”

   2.3 Rectangle9_13 - 分区线条

   2.4 BtnSubmitRequest - 页面底部的提交按钮
   -Text = “Submit Request”
   -OnSelect = //设置了两个动作，先把变量 _submittingRequest设为 True, 然后跳转到确认页面。
   Set(_submittingRequest, true); //下一个确认页面就会用到这个设定
   Navigate(ConfirmationScreen, None);

   2.5 Gallery1_2
   -Items = //这里是Gallery数据源的设置，和之前第六节的GalleryLeaveType一样，这里使用了 Table 来提供数据。
//表格包括六行，每行四个字段： Header，Value，Image 和 Row。前三个字段用来接收用户提交请假申请时的输入，最后一个Row字段马上会提到。
   Table(
   {Header: “Title”, Value: AboutLeaveTitleInput.Text, Image: Basel_ListWatchlistRemind, Row: 1},
   {Header: “Details”, Value: AboutLeaveDetailInput.Text, Image: Basel_detail_list, Row: 2},
   {Header: “Total time requested”, Value: _requestedDays & " day(s)", Image: Basel_Clock, Row: -1},
   {Header: “Dates”, Value: Text(LeaveStartDatePicker.SelectedDate, ShortDate) & " - " & ext(LeaveEndDatePicker.SelectedDate, ShortDate), Image: Basel_CalendarBlank,Row: 3},
   {Header: “Leave type”, Value: _selectedLeaveType.type,Image: _selectedLeaveType.icon, Row: 4},
   {Header: “Request sent to”, Value: _defaultApprover.UserPrincipalName, Image: _defaultApproverPhoto,Row: 5})

   2.6 icon2_2 - " > " 图标
   本节最开始提到，这个页面的作用是让申请人检查输入的信息是否有错误，这个按钮就是当申请人发现输入错误后，好点击跳转到相应条目的编辑界面，进而完成对输入信息的修正。按钮设置了：
   -OnSelect = If(ThisItem.Row = 1 || ThisItem.Row = 2, Navigate(LeaveDetailsScreen,ScreenTransition.None),
   ThisItem.Row = 3, Navigate(SelectDatesScreen,ScreenTransition.None),
   ThisItem.Row = 4, Navigate(EditLeaveTypeScreen,ScreenTransition.None),
   ThisItem.Row = 5, Navigate(SelectApproverScreen,ScreenTransition.None)
   )
//这里就能看到 Row 这个字段的作用了，可以把它理解成是一个标识符，让App 可以通过它识别出用户点击的是哪个条码，进而跳转到相对应的编辑页面进行信息修正。

   另外，细心的朋友应该也会注意到，上面 Table里的第三行设置了 Row = -1； 同时，注意到在这个页面的结构图里，第三行是没有显示出这个 " > " 图标的。看一下图标的Visible 属性设置，就能看到原因。
   -OnVisible = ThisItem.Row >=0 //所以，Row=-1其实还是可以认为是被当成一个标识符，用来执行一些逻辑判断操作

   2.7 Image3_2 - 假期类型图标
   -Image = ThisItem.Image
   -OnSelect = Select(Parent)

   2.8 Label8_2 -
   -Image = ThisItem.Image
   -OnSelect = Select(Parent)

   2.9 Label6_2 -
   -Image = ThisItem.Image
   -OnSelect = Select(Parent)

   2.10 Rectangle9_15 - 页面区域分区线

最后这2.7到2.9三个控件有些似曾相识吧，没印象的朋友可以参考一下第6节里第2.6个控件的C、D两个子控件以及最下面的小贴士。

本节就到这里，下一节我们将完成新建申请的流程解析，然后做一个小结，待续。。。

---