上一节主要是拆析了App对象里的OnStart 属性设置。
本节介绍App 运行后的第一个页面,LoginScreen,内容相对简单些。一起来看:
1、 先来看这个LoginScreen各个控件在页面上的对应关系:
2. 来看各个控件的设置
- LblManagerLogin:
- OnSelect = Select(BtnManagerLogin) //重定向到BtnManagerLogin的OnSelect,意思就是点选这个Label就相当于点选了BtnManagerLogin这个按钮(绿框框住的区域)
- Text = Upper("To approve or decline leave requests") //设置了Label所显示的文字,并用Upper方法将所有字符改成了大写。
- BtnManagerLogin: (主管登录按钮,点击后进入主管特属的App页面)
- OnSelect = Set(_managerView,true); Set(_requestTypeFilter,"Pending"); Navigate(HomeScreen,None) //设置并赋值两个变量 _managerView 和 _requestTypeFilter,然后跳转到HomeScreen屏幕。
// 注意: 这里的“_managerView” 变量在下一节就会用到。用来判断登录人是一名员工还是一名主管。
// 注意: 这里的“_requestTypeFilter” 变量用来获取请假审批的状态,然后好通过Label进行显示。比如这里默认为主管视图的 “_requestTypeFilter” 变量赋值了 “Pending”。当主管登录后,就会看到下面的界面。
- - Text = "Login as a manager" //设置按钮所显示的文字
- PaddingTop = 35 //将文字的位置向下一些放置
- LblEmployeeLogin
- OnSelect = Select(BtnEmployeeLogin) //重定向到BtnEmployeeLogin的OnSelect,意思就是点选这个Label就相当于点选了BtnEmployeeLogin这个按钮(粉框框住的区域)
- Text = Upper("To submit a leave request") //设置了Label所显示的文字,并用Upper方法将所有字符改成了大写。
- BtnEmployeeLogin: (员工登录按钮,点击后进入员工特属的App页面)
- OnSelect = Set(_managerView,false); Set(_requestTypeFilter,"All"); Navigate(HomeScreen,None) //设置并赋值了两个变量_managerView 和 _requestTypeFilter,然后跳转到HomeScreen屏幕。
- Text = "Login as an employee" //设置按钮所显示的文字
- PaddingTop = 35 //将文字的位置向下一些放置。
这里为员工视图的_requestTypeFilter 变量赋值了"All", 所以员工登录后就会看到 Filter 的四个按钮选中了 "All":
员工身份登录按钮的一些UI属性设置:
- WelcomePageHeaderGroup: //屏幕上部的UI (蓝色框住区域), 包含下面四个子元素。
RequestLabel:
- Text = “REQUEST”
ArrwIcon
- Icon = ArrowRight //一个箭头图标
LeaveLabel
- Text = “LEAVE”
HeaderBackgrundImage
- Image = 'off12-justice-01' //设置了一个背景图片
------------------------ 本节内容比较简单,最后加个彩蛋补充一下营养 :-) --------------------------
本节最后涉及到在App里添加多媒体元素(其实在第一节里也有涉及到多媒体文件。细心的朋友应该记得,在第一节里有一个LeaveTypeCollection,这个集合在App 的 OnStart里对假期类型做了定义,其中涉及到每个假期类型对应的图标,这些图标就是多媒体的图片类型文件)。
下面以添加图片元素为例(语音和视频的操作步骤也一样),简单做个步骤说明:
1. 在左侧菜单栏上点Media,然后点击 Upload , 然后选择所需的多媒体文件进行上传。
多媒体文件上传完后,系统会自动识别文件类型并分组。
2. 在界面上部的菜单里依次点选 Insert >>> Media >>> Image, 在App 里添加一个 Image 控件。
添加好的图片控件长这个样子。
3. 将第一步上传的图片关联给第二步新建的图片控件就行。
选择图片控件,设置其 Image 属性,比如 Image = 'image.jpg'。 注意: 图片的文件名需要用单引号引起来,不加单引号或者使用双引号都是Powerapps所不支持的。
输入文件名时,Powerapps会自动检索多媒体文件名,并给出提示。如下图所示。
文件名指定好之后,就可以在App里看到图片了。
本节用到的函数: Select, Upper, Set
-------------------------------------- 本节结束,下一节我们继续拆解 ------------------------------------------