练习实验室 6 – 表单

在此实验室中，你将使用表单在数据源中创建和编辑记录。

要学习的知识

• 如何添加屏幕
• 如何在屏幕之间导航
• 如何使用表单在数据源中创建记录
• 如何使用表单在数据源中编辑记录
• 如何从数据源中删除记录
• 如何将表单链接到库

概要实验室步骤

• 创建新屏幕
• 在库中选择记录时导航到屏幕
• 在屏幕之间导航
• 使用表单显示记录
• 删除记录
• 使用表单编辑记录
• 使用表单创建新记录

先决条件

• 必须已完成“实验室 5：外部数据”

详细步骤

练习 1 - 添加屏幕和导航

任务 1.1 - 编辑应用

1. 导航到 Power Apps 制作者门户 (https://make.powerapps.com)

2. 确保你位于 Dev One 环境中。

3. 从左侧导航菜单中选择“应用”选项卡。**

4. 选择 “预订请求”应用，选择“命令”（“…”），然后选择 “编辑”>“在新选项卡中编辑”。

任务 1.2 - 添加屏幕

1. 在应用创作菜单中，选择“树状视图”。

2. 在 Power Apps Studio 的操作栏中，选择“新建屏幕”。

   

3. 选择空白。

4. 将屏幕重命名为 EditScreen。

5. 在 Power Apps Studio 的操作栏中，选择“新建屏幕”。

6. 选择“页眉和页脚”。

7. 将屏幕重命名为 DetailScreen。

任务 1.3 - 添加导航

1. 在“树状视图”中**，展开“MainScreen”** 中的“BookingRequestList”**。

2. 在“BookingRequestList”中选择“NextArrow”****。

3. 将公式栏中“NextArrow”的“OnSelect”** 属性设置为：

    Collect(colRequests, ThisItem);Navigate(DetailScreen, ScreenTransition.Cover);
   

4. 选择 EditScreen。

5. 在应用创作菜单中，选择“插入 (+)”。

6. 展开“图标”。

7. 选择“后退箭头”。

8. 将图标的 OnSelect 属性设置为：

    Back()
   

9. 在“树视图”中，选择图标并选择“命令”（…），然后选择“复制”。

10. 展开 DetailScreen。

11. 展开 ScreenContainer。

12. 选择 HeaderContainer，然后选择“命令”（…），然后选择“粘贴”。

练习 2 - 详细信息屏幕

任务 2.1 - 添加显示格式

1. 在应用创作菜单中，选择“树状视图”。

2. 展开 DetailScreen。

3. 展开 ScreenContainer1。

4. 选择 MainContainer1。

5. 在应用创作菜单中，选择“插入 (+)”。

6. 展开“输入”。

7. 选择“显示格式”。

   

8. 在 FormViewer 的属性中，选择“数据源”的“预订请求”。

9. 选择“字段”旁边的“已选择 8 个”。

   

10. 通过选择字段旁边的省略号 (“…”)，然后选择“删除”来删除“状态”和“备注”。

11. 选择“+ 添加字段”并选择以下字段：

    1. 决策

    

12. 选择 添加 。

13. 将字段拖动为以下顺序：

    1. 宠物名称
    2. 所有者名称
    3. 所有者电子邮件
    4. 开始日期
    5. 结束日期
    6. 决策
    7. 成本

    

14. 关闭“字段”窗格。

15. 将公式栏中窗体查看器控件的“Item”** 属性设置为：

     BookingRequestList.Selected
    

任务 2.2 - 添加标签

1. 在应用创作菜单中，选择“树状视图”。

2. 展开 DetailScreen。

3. 展开 ScreenContainer1。

4. 选择 FooterContainer1。

5. 在页脚容器中选择 +。

   

6. 选择“文本标签”

7. 将标签的“文本”属性设置为：

    BookingRequestList.Selected.'Pet Name'
   

任务 2.3 - 添加删除按钮

1. 在应用创作菜单中，选择“树状视图”。

2. 展开 DetailScreen。

3. 展开 ScreenContainer1。

4. 选择 FooterContainer1。

5. 在应用创作菜单中，选择“插入 (+)”。

6. 选择按钮。

7. 在应用创作菜单中，选择“树状视图”。

8. 将按钮重命名为“Deletebtn”。

9. 将按钮的“文本”属性设置为：

    "Delete"
   

10. 将按钮的 OnSelect 属性设置为：

     Remove('Booking Requests', BookingRequestList.Selected); Back();
    

练习 3 - 编辑屏幕

任务 3.1 - 添加编辑表单

1. 在应用创作菜单中，选择“树状视图”。

2. 选择 EditScreen。

3. 在应用创作菜单中，选择“插入 (+)”。

4. 选择“编辑表单”。

5. 在 FormViewer 的属性中，选择“数据源”的“预订请求”。

6. 选择“字段”旁边的“已选择 8 个”。

7. 通过选择字段旁边的省略号 (“…”)，然后选择“删除”来删除“决策”和“备注”。

8. 将字段拖动为以下顺序：

   1. 宠物名称
   2. 所有者名称
   3. 所有者电子邮件
   4. 开始日期
   5. 结束日期
   6. 成本

9. 关闭“字段”窗格。

10. 将表单控件的“项”属性设置为：

     BookingRequestList.Selected
    

11. 在应用创作菜单中，选择“树状视图”。

12. 将表单重命名为“BookingRequestForm”。

13. 按如下所示设置表单的属性：

    1. X=0
    2. Y=125
    3. Height=500
    4. Width=Parent.Width
    5. Columns=1
    6. Layout=Horizontal

    

任务 3.2 - 添加“提交”按钮

1. 在应用创作菜单中，选择“树状视图”。

2. 选择 EditScreen。

3. 在应用创作菜单中，选择“插入 (+)”。

4. 选择按钮。

5. 将按钮拖到表单下方。

6. 在应用创作菜单中，选择“树状视图”。

7. 将按钮重命名为“Submitbtn”。

8. 将按钮的“文本”属性设置为：

    "Submit"
   

9. 将按钮的 OnSelect 属性设置为：

    SubmitForm(BookingRequestForm)
   

10. 选择 BookingRequestForm。

11. 将窗体的 OnSuccess 属性设置为：

     Navigate(MainScreen, ScreenTransition.UnCover)
    

任务 3.3 - 将导航添加到编辑屏幕

1. 在应用创作菜单中，选择“树状视图”。

2. 展开 DetailScreen。

3. 展开 ScreenContainer。

4. 选择 HeaderContainer。

5. 在应用创作菜单中，选择“插入 (+)”。

6. 展开“图标”。

7. 选择“编辑” 。

8. 在应用创作菜单中，选择“树状视图”。

9. 将图标重命名为“EditIcon”。

10. 将图标的 OnSelect 属性设置为：

     Navigate(EditScreen, ScreenTransition.Cover)
    

任务 3.4 - 新建记录

1. 在应用创作菜单中，选择“树状视图”。

2. 选择 MainScreen。

3. 在应用创作菜单中，选择“插入 (+)”。

4. 展开“图标”。

5. 选择 添加 。

6. 在应用创作菜单中，选择“树状视图”。

7. 将图标重命名为“NewIcon”。

8. 按如下所示设置图标的属性：

   1. X=0
   2. Y=0
   3. Height=80
   4. Width=80
   5. Color=Color.White

9. 将图标的 OnSelect 属性设置为：

    NewForm(BookingRequestForm);Navigate(EditScreen, ScreenTransition.Cover)
   

10. 选择 Power Apps Studio 右上角的“保存”。

11. 选择命令栏左上角的“<- 返回”按钮，然后选择“退出”以退出应用。