拆解PowerApps - 请假申请 -10

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

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

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

  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两个子控件以及最下面的小贴士。

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


上一篇:Set up powerapps to use SharePoint Online


下一篇:PowerApps Replace Function with examples