Power Apps 一个实际案例 -2 - 实现申请功能

aladinggao

已于 2023-11-04 11:13:24 修改

阅读量1w

点赞数 5

于 2020-09-24 14:28:39 首次发布

本文链接：https://blog.csdn.net/aladinggao/article/details/108730241

版权

Microsoft 同时被 2 个专栏收录

53 篇文章 14 订阅

订阅专栏

Power Apps

44 篇文章 55 订阅

订阅专栏

今天我们一起来具体实现纸质表单的电子化。

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)

选中主页，运行。输入数据然后依次测试几个按钮的功能。