Power Apps Canvas - Practice
今天我们一起来具体实现纸质表单的电子化。
1. 准备数据源
如上一节分析的, 我们将采用Excel 表来存储表单里的数据,同时利用OneDrive来存储签名图片。因此,我们先按照纸质表单里的内容,在OneDrive 里创建一个Excel文件,并添加各个数据列。结果如下图:
关于这个Excel 表,有几点要说明和注意的:
- 文件名一定要小写(之前做App时,文件名有大写字母,结果无法自动生成用来存储签字图片的文件夹)
- 用来存储签字图片的列名要加 [image]后缀,如上图的H 列。
- 定义好各列后,需要在Excel的菜单里选择格式化表格来对表格进行格式化。
2. 创建空白App, 制作主页面。
登录Power Apps, 然后选择从空白画布创建App.
为App 起个名字,选择App的布局样式(这里选择了平板模式), 然后点击创建按钮。
双击自动生成的屏幕名称 Screen1, 把名字改成HomeScreen(便于后续页面之间跳转时进行识别)。然后从"插入"菜单里选择"按钮",在页面上插入三个按钮,双击每个按钮,修改按钮的显示名。效果如下图:
3. 制作申请页面
3.1 从"插入"菜单里选择“New Screen” 来生成一个新的页面屏幕,同样将其重命名,比如ApplicationScreen。
3.2 从“插入”菜单里选择"窗体(Form)" > "编辑",来插入一个可编辑的窗体。
3.3 选中新建的窗体,在右侧的属性栏的数据源里找到并点击 OneDrive for Business, 然后根据提示找到之前保存在OneDrive里的Excel, 并最终连接到 Excel的数据表。
3.4 为窗体选择要显示的字段,调整窗体各元素的布局。
保持窗体选中,然后点击右侧属性栏里的“编辑字段”,在弹出的新菜单栏里点“添加字段”。
参照纸质表单里的条目,选择相应的字段进行添加。完成后会是下面这个样子。
调整这个默认的布局,增删相关控件,最终做成下面的样子。
4. 实现页面的操作逻辑。
总体来看,页面上有四类元素:
- 窗体: 作为一个整体,在后续提交数据时会用到。
- 窗体里文本输入类型的控件: 接收用户的数据输入
- 窗体里选择日期类型的控件: 接收用户所选的时间
- 返回( < )、重填和提交三个按钮: 返回用来返回上一页;重填用来清空已经填写的数据,让用户可以重新填写;提交用来将用户输入的数据提交到OneDrive里的Excel文件进行存储。
接下来逐个来看是如何实现的。
4.1 文本输入框: 以申请人控件为例, 设置Update属性指向控件里的文本框(上面添加了这个申请人字段后,默认的其实就已经指向了它自己的文本框)。Update = DataCardValue1.Text, 这里的DataCardValue1 就是文本框控件。如下图:
4.2 日期选取控件: 两个日期选取控件是后面新加的,因此需要手工设置控件的Update属性。以借用日期为例: Update = DataPicker2.SelectedDate。 这里的DataPicker2 就是日期选取控件。
4.3 返回按钮: 设置其 OnSelect = Back() 即可。
4.4 重填按钮: 设置OnSelect = ResetForm(Form1); NewForm(Form1)
4.5 提交按钮: 利用Patch函数将用户填写的数据提交给Excel, OnSelect = Patch(Table1, Defaults(Table1), {reqId:Last(Table1).reqId + 1, requester:DataCardValue1.Text, reqDept:DataCardValue2.Text, tel:DataCardValue3.Text,email:DataCardValue4.Text, from:DatePicker2.SelectedDate, to:DatePicker3.SelectedDate, deviceName:DataCardValue7.Text, justification:DataCardValue8.Text})
5. 测试一下效果。
测试前,设置主页的申请借用按钮的 OnSelect = ResetForm(Form1);NewForm(Form1);Navigate(ApplicationScreen)
选中主页,运行。输入数据然后依次测试几个按钮的功能。
最后提交后, 查看Excel 文件,可以看到数据已经写入文件。
6. 优化一下提交按钮。
6.1 添加提交前的日期判断,如果借用日期比归还日期晚,就跳转到一个提示页面,要求用户返回修改。
If(DatePicker3.SelectedDate < DatePicker2.SelectedDate,Navigate(NtfDateScreen), Patch(。。。));
6.2 提交成功后,重置表单并跳转到一个提示页面,提示用户提交成功。
If(DatePicker3.SelectedDate < DatePicker2.SelectedDate,Navigate(NtfDateScreen), Patch(。。。); ResetForm(Form1);Navigate(SubmitSuccess))
本节实现了设备申请表单,下一节将继续实现出借管理。
接上一节,本节将介绍出借管理的实现。直接进入主题:
出借管理表单的各个字段已经在上一节统一添加到了Excel 文件中,本节的基本思路是通过一个列表页面来显示所有设备借用申请,点击某个申请则进入这个申请的具体管理页面。
1. 添加用来管理借用申请列表的页面,关联好数据源,设置好布局。
1.1 插入菜单的新下直接选择列表类型屏幕。
1.2 修改一下新屏幕的名字以及其下的TemplateGalleryList1,便于以后的识别。
1.3 和上一节相似的操作,把BorrowGalleryList 的数据源关联到Excel表,然后为列表添加几个关键字段。
这里添加了借用人、设备名和借用日期几个字段,效果如下:
2. 添加相关的按钮控件, 设置操作逻辑(主要是考虑用户的操作方便性)。
2.1 在列表页面顶部添加返回和退出按钮
返回(<): OnSelect = Back(); 退出(X): OnSelect = Exit()
2.2 设置点中表单中每个条目后的跳转
选中 BorrowGalleryList1 控件,设置 OnSelect = Navigate(BorrowMgmt)。 这里的BorrowMgmt页面是接下来要创建的。
3. 添加一个新的屏幕页面 BorrowMgmt, 用来记录出借管理信息。
3.1 新建一个空白页面,插入一个编辑模式的窗体(Form),然后把窗体的数据源关联到Excel。
3.2 根据纸质表单的样式,选择所需的字段并进行布局。添加"提交"和"返回"两个按钮,结果如下:
同时可以看到,每个字段都对应到窗体里的一个卡片,以下面选中的申请人为例,卡片名称叫"requester_DataCard2"。 所有的卡片都位于窗体EditForm2的下一级。
4. 实现记录管理页面的操作逻辑
对于编辑类型的窗体,要将编辑完成的数据提交到数据源,最关键的是需要设置表单里每个卡片的Update属性值。从上面的截屏里可以看到,出借记录管理页面的窗体里主要有四类卡片, 其类型及相应的Update属性值设置方法如下:
卡片类型 | 属性值设置 |
文本输入 | Update = <文本输入框控件名>.Text |
日期 | Update = <日期拾取控件名>.SelecteDate |
复选框 | Update = <复选框控件名称>.Value |
签字用的钢笔输入 | Update = <钢笔输入控件名称>.Image |
逐个卡片设置完Update属性后,还需设置两个按钮的OnSelect属性。
- 提交按钮: OnSelect = If(IsBlank(DataCardValue18.Text),Navigate(FaNotification), SubmitForm(EditForm2);ResetForm(EditForm2);NewForm(EditForm2));Navigate(SubmitSuccess)
这里的DataCardValue18对应的是资产编号卡片,由于资产编号是必填项,这里首先通过IsBlank() 函数来判断这个资产编号输入框里是否填写了数据,如果没有填,则跳转到FaNotification页面(如下图)提示用户返回填写; 否则,也就是已经填写了资产编号数据, 则执行SubmitForm()命令,将EditForm2里的数据进行提交。
成功提交后,跳转到提交成功的提示页面。
运行App, 输入相应的数据并提交,检查Excel文件,可以看到相应的数据已经写入。
注意,两个签名的图片是以一个地址链接的形式存储在Excel文件里的。
同时,可以看到在OneDrive 里自动生成了一个book_images文件夹,里面存储的就是签名图片。
至此,就实现了出借的管理功能,也就是把出借信息存储到了后台的OneDrive。
---------------------------------------------分节线--------------------------------------------------
接下来我们一起来看如何查看已出借的设备,也就是如何从OneDrive读取出对应的信息。
具体步骤和上面的第三步和第四步非常相似:新建一个页面,添加相关控件,然后设置控件属性,最后添加按钮实现操作逻辑。
区别在于,相比第三步在新建空白页面里添加的是一个可编辑的窗体,此处需要添加一个“显示”窗体,因为我们只需要在页面上显示数据。
具体的:
1. 新建一个空白页面,改名叫BorrowDetail,然后在页面上插入一个显示窗体。
2. 选中窗体,关联数据源,添加字段,然后调整各个字段在页面上的布局。最后做出的效果如下(添加的底色是为了更清楚的显示每个控件在页面上占据的位置):
这里有一点需要特别处理的就是两个签名控件,需要在相应的卡片里添加一个图片类型的控件。用来显示存储在OneDrive里的图片。
3. 返回到设备借用申请列表界面, 处理一个页面跳转的问题。
在这个列表页面上,我们在最开始设置了点击列表条目后跳转到出借管理界面。现在我们还需要通过点击条目跳转到显示这个条目的出借信息界面。为此,我们通过添加不同的按钮来实现。考虑到后续还有归还的管理和查看,在这里就把按钮一并添加好。效果如下:
然后我们需要设置每个按钮的属性来实现按钮点击具体功能:
- 查看出借按钮: OnS elect = Navigate(BorrowDetail, ScreenTransition.None, {displayItem:ThisItem}), 其效果为,在跳转到BorrowDetail 页面的同时,将ThisItem对象以displayItem变量的形式传递了进去。
- 出借管理按钮: 对之前在条目上点击直接进入出借管理界面的操作逻辑做了优化,具体的OnSelect = If(IsBlank(ThisItem.faSN),EditForm(EditForm2);Navigate(BorrowMgmt, ScreenTransition.None, {editItem:ThisItem}),Navigate(BorrowedScreen)), 也就是先判断资产编号是否存在,如果不存在资产编号就跳转到出借管理界面进行出借管理。否则就跳转到新建的一个设备已出借的提示页面(BorrowedScreen)。
4. 返回设备出借查看页面,设置各个控件的属性,用来从数据源获取数据。
很简单,只要检查并设置每个卡片的Default 属性为 displayItem.<当前卡片对应到Excel里的列名>就行。
注意: 这里使用的displayItem也就是上一步在列表页面所点击的某个具体条目。它是通过上一步所设置的按钮的OnSelect所传递过来的。
测试一下,在列表清单页面上点击第一个条目上的查看"出借按钮",可以看到可以成功的读取到之前管理出借时输入的数据:
接上一节的出借管理,本节我们一起来实现归还管理。
可以看到归还表单和出借表单很相似,因此我们直接通过复制出借屏幕来制作归还屏幕。鼠标右键点击BorrowMgmt, 然后点击 "复制屏幕" 命令。
把复制出的屏幕重命名为ReturnScreen, 同时可以看到,系统会自动将新屏幕里的各个控件通过添加数字后缀的方式来命名,以避免和之前屏幕里的控件重复。
对ReturnMgmt屏幕下的各个控件进行布局调整以及必要的修改,比如,由于归还屏幕是从借出屏幕复制过来的,之前文字里的出借需要改为归还、字段里的 in 和 out 和当前正好相反,需要做相应的修改。要注意的是: PowerApps大小写敏感,这里的字段名拼写一定要和Excel里的大小写保持一致。
和借出管理屏幕一样,由于是"编辑"类型的窗体,需要检查确认各个控件的Update属性设置是否正确。
重填按钮可以删除。提交、返回这两个按钮不需要调整,直接使用复制过来的属性值就行。
最后,回到设备借用申请列表页面,为 “归还管理” 按钮设置OnSelect = EditForm(EditForm2_2);Navigate(ReturnMgmt, ScreenTransition.None, {editReturnItem:ThisItem})
测试一下:
在设备借用申请页面点击"归还管理"按钮,进入“设备归还记录管理”页面。
输入相应信息提交后,检查OneDrive,可以看到Excel 和目录里的数据都有了更新。
和查看出借一样,可以做一个查看归还的页面。制作方法也和查看出借一样,不再赘述。
至此,我们利用Office 365 的Power Apps产品模块完成了 IT设备借用纸质表单的电子化。
在此基础之上,还可以再优化一下整个App,比如添加相应的提示页面、完善每个页面的返回或者退出功能等,以提高用户使用App是的便捷性,也能提高App 整体的运行逻辑。
posted on 2020-10-29 23:25 lingdanglfw 阅读(909) 评论(0) 编辑 收藏 举报