zoukankan html css js c++ java

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属性值的设置
卡片类型	属性值设置
文本输入	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所传递过来的。

测试一下，在列表清单页面上点击第一个条目上的查看"出借按钮"，可以看到可以成功的读取到之前管理出借时输入的数据：