练习 - 创建 Dive Center 画布应用

已完成

在本练习中,您将通过创建 Dive Center 画布应用来应用所学知识。

应用场景

您在一家潜水中心工作,负责维修和销售潜水装备。 您管理组织的 Dataverse 环境。

服务部门的员工需要一个 Power Apps 应用,以便为带潜水装备来维修的客户办理签入和签出。

为了支持这些流程,员工需要以下功能:

  • 维修服务客户名单

  • 签入存储功能

  • 潜水装备清单,以确定要注册的设备类型

用户提出了其他请求,您可能还希望包括以下功能:

  • 继续对已完成的服务请求进行签出的功能。

  • 使用指定的图片、颜色和装备类型创建新的潜水装备。

  • 在办理签入时捕获照片和服务类型。

  • 捕获签名以完成签出。

  • 创建新客户。

练习

先决条件:本练习中涉及的解决方案和数据源在上一单元练习 - 为创建 Dive Center 画布应用做准备中进行了说明。 从名为 Dive Center 应用的环境开始,其中您的应用 Dataverse 表已存在。

  1. 从环境屏幕的命令栏中,选择新建 > 应用 > 画布应用以创建名为 Service Request 的新画布应用。

    Dataverse 解决方案的屏幕截图。突出显示了“新建画布应用”菜单选项。

    选择手机作为画布应用的格式。 然后,选择创建

    新的“从空白创建画布应用”窗体的屏幕截图。突出显示了应用名称、手机格式和“创建”按钮。

  2. 在 Power Apps 画布工作室中,插入一张图像用作主徽标。

  3. 根据可用的屏幕空间和其他要包含在应用中的组件来确定图像位置并调整图像大小。 还可以使用 Fill 属性将屏幕背景调整为徽标颜色。

    画布应用工作室的屏幕截图。突出显示了“图像”控件和该控件的属性。

  4. 要为后续屏幕提供导航,请添加三个按钮:签入签出退出。 根据预期的用户体验定义颜色、位置和大小。

    画布应用工作室的屏幕截图。突出显示了“按钮”控件和该控件的属性。

  5. 使用表示其使用情况的名称重命名默认控件和屏幕。 这是使其更容易识别的最佳做法。 您可以双击树视图中的每个控件以进行重命名,也可以使用控件旁边的省略号并选择重命名

    画布应用工作室的屏幕截图。突出显示了屏幕组件的“重命名”选项。

  6. 通过从主屏幕中选择复制屏幕来创建签入屏幕,然后将新屏幕重命名为“CHECKIN”。

    画布应用工作室的屏幕截图。突出显示了“复制屏幕”选项。

  7. 从新屏幕中删除按钮,然后重设主图像的大小,以向为签入流程添加的窗体提供空间。

  8. 插入编辑窗体,将数据源连接到 Dataverse Service Requests 表,将窗体的默认模式属性设置为新建,然后将其重命名为 frmCheckIn

    画布应用工作室的屏幕截图。突出显示了“编辑窗体”控件和该控件的数据源属性。

  9. 在窗体上,移动它并重设其大小以使用屏幕空间,然后从“属性”面板中选择编辑字段选项,以便您可以修改窗体的字段。

  10. Copilot 会自动建议应包含哪些字段并相应地对其进行排序,但让我们按如下方式在签入流程中排列它们,方法是将它们按从上到下的顺序拖放到字段面板中,如下所示(可参考下图):名称、客户、装备、详细信息和预计完成。 (您可以在这些字段下方放置任何可选字段。)

    如果您在窗体中没有看到这些字段,请选择 + 添加字段按钮以查找/添加它们。

    画布应用工作室的屏幕截图。突出显示了窗体控件的“添加字段”选项。

    您需要将数据添加到“Dive Gear”表,也许还需要向“Contacts”表添加数据,以在窗体的装备客户部分的组合框中查看结果。

  11. 检查窗体上“客户”卡片和“装备”卡片的组合框控件字段。 它们可能无法显示正确的数据,因此您可能需要解锁这些卡片并进行一些调整。 对于“客户”组合框,请确保更新 DisplayFields 属性以显示 [fullname],对于“装备”组合框,将 DisplayFields 属性设置为 ["msft_name"]

  12. 若要为用户提供更新和导航功能,请在画布屏幕底部添加两个按钮。 将它们的文本更新为“保存”和“返回”,并将它们分别重命名为 btnSaveCheckInbtnBackCheckIn

    画布应用工作室的屏幕截图。突出显示了“按钮”控件和这些控件的属性。

  13. 要在选中 btnSaveCheckIn 按钮时更新窗体并允许处理新的签入,请在按钮的 OnSelect 属性中输入以下 PowerFx 脚本:

    SubmitForm(frmCheckIn); NewForm(frmCheckIn);

  14. 要在选中 btnBackCheckIn 按钮时导航回 HOME SCREEN,请在按钮的 OnSelect 属性中输入以下 PowerFx 脚本:

    Navigate('HOME SCREEN',ScreenTransition.Fade);

  15. 若要在选中 HOME SCREENbtnCheckIn 按钮的情况下从 HOME SCREEN 导航到 CHECKIN 屏幕,请在按钮的 OnSelect 属性中输入以下 PowerFx 脚本:

    Navigate(CHECKIN,ScreenTransition.Fade);

  16. 若要在用户选中 HOME SCREENbtnExit 按钮的情况下允许用户关闭应用,请在按钮的 OnSelect 属性中输入以下 PowerFx 脚本:

    Exit();

  17. 此时,您可以保存并播放应用以测试屏幕之间的导航以及能否新建签入条目。

可选功能

以下部分提供了继续添加应用的可选功能所需的步骤。 其中一些功能需要用到在本模块前面的单元练习 - 为创建 Dive Center 画布应用做准备中定义的表和列。

签出功能

要为应用的用户提供签出功能,请执行以下步骤:

  1. 创建 CHECKIN 屏幕的副本并将其重命名为 CHECKOUT。 重命名屏幕组件,然后执行以下操作:

    1. 将“保存”按钮更改为“签出”。

    2. 编辑 frmCheckOut 字段以删除名称字段。

    3. 将可选的附件字段添加/移动到“预计完成”字段的正下方。

    4. 默认模式设置为视图,以便窗体显示为“只读”。

    画布应用工作室的屏幕截图。突出显示了窗体控件的属性和屏幕的重命名组件。

  2. 若要提供可供签出的服务请求列表,请向屏幕顶部添加 Drop down 输入,然后执行以下操作:

    1. 将下拉菜单重命名为 ddServiceRequestForCheckOut

    2. 将下拉菜单放置在 frmCheckOut 窗体上方(相应地重设窗体大小)。

    3. Items 属性设置为 Service Requests 表。

    4. Value 属性设置为 Name 列。

    画布应用工作室的屏幕截图。突出显示了“下拉列表”控件和该控件的属性。

  3. 要显示“下拉列表”控件中选定的服务请求,请在 frmCheckOut 窗体的 Item 属性中输入以下 PowerFx 脚本:

    ddServiceRequestForCheckOut.Selected

  4. 要仅显示可供签出的服务请求列表,请在下拉输入的 Items 属性中输入以下 PowerFx 脚本:

    Filter('Service Requests',IsBlank('Actual Completion'))

  5. 要使服务请求在选择 btnSaveCheckOut 按钮时显示为已签出,请在按钮的 OnSelect 属性中输入以下 PowerFx 脚本:

    Patch('Service Requests',ddServiceRequestForCheckOut.Selected,{'Actual Completion':Now()});

  6. 要在选中 HOME SCREENbtnCheckOut 按钮的情况下从 HOME SCREEN 导航到 CHECKOUT 屏幕,请在按钮的 OnSelect 属性中输入以下 PowerFx 脚本:

    Navigate(CHECKOUT,ScreenTransition.Fade);

  7. 此时,您可以保存并播放应用以测试屏幕之间的导航以及签出流程。

创建潜水装备功能

要让用户创建包含颜色、装备类型和图片的新潜水装备,请按照以下步骤操作:

  1. 创建 CHECKIN 屏幕的副本并将其重命名为 DIVEGEAR。 重命名屏幕组件,然后执行以下操作:

    1. 编辑 frmGear 属性以使用 Dive Gear 表作为数据源

    2. 选择您要向用户提供的不同字段,包括图片字段。

    画布应用工作室的屏幕截图。突出显示了窗体控件的属性和屏幕的重命名组件。

  2. 若要在选中 btnSaveGear 按钮时创建潜水装备并允许新建潜水装备,请在按钮的 OnSelect 属性中输入以下 PowerFx 脚本:

    SubmitForm(frmGear); NewForm(frmGear); Refresh ('Dive Gear');

  3. 若要在选中 btnBackGear 按钮时导航回 CHECKIN 屏幕,请在按钮的 OnSelect 属性中输入以下 PowerFx 脚本:

    Navigate(CHECKIN,ScreenTransition.Fade);

  4. 若要从 CHECKIN 导航到您创建的新潜水装备,请解锁 CHECKIN 屏幕上 frmCheckIn 窗体的装备字段的数据卡片属性。 重设数据卡片组合框的大小以提供空间来在其旁边插入添加图标。

    画布应用工作室的屏幕截图。突出显示了“图标”控件和该控件的属性。

  5. 若要导航至 DIVEGEAR 屏幕,请在添加图标的 OnSelect 属性中输入以下 PowerFx 脚本:

    Navigate(DIVEGEAR,ScreenTransition.Fade);

  6. 为了确保在创建新装备时更新装备列表,请将组合框的“Data source”属性更改为 Dive Gear 表。

    画布应用工作室的屏幕截图。突出显示了组合框的 Data source 属性。

  7. 此时,您可以保存并播放应用以测试屏幕之间的导航以及能否新建潜水装备。

捕获图片和服务类型功能

若要让用户在签入时捕获图片和服务类型,请按照以下步骤操作:

  1. 确保您已添加服务类型附件接受时间作为 frmCheckin 窗体的字段。

    画布应用工作室的屏幕截图。突出显示了一个窗体的字段。

  2. 要将接受时间值设置为创建服务请求的日期和时间,请解锁接受时间数据卡,然后使用以下 PowerFx 脚本设置 Update 属性:

    Now()

  3. 此时,您可以保存并播放应用以测试能否将图片作为附件添加到服务请求中。

捕获签名功能

若要让用户捕获签名以完成签出,请按照以下步骤操作:

  1. 将容器添加到 CHECKOUT 屏幕并拉伸该容器以适合整个屏幕。 将容器的 Fill 属性设置为:RGBA(149,149,149,0.4)

  2. 将以下标签添加到容器控件

    名称 文本 位置/大小 其他信息
    lbl_SignatureCapture <空> X:0
    Y:338
    宽度:640
    高度:384
    填充:RGBA(255, 255, 255, 1)
    lbl_SignatureLine <空> X:0
    Y:587
    宽度:640
    高度:13
    填充:RGBA(0,0,0,1)
    lbl_CustomerSignature 客户签名 X:21
    Y:600
    宽度:560
    高度:70
    字号:21
    lbl_OK 确定 X:388
    Y:599
    宽度:60
    高度:70
    字号:21
    lbl_Cancel 取消 X:492
    Y:599
    宽度:122
    高度:70
    字号:21

    结果应如以下屏幕截图所示。

    画布应用工作室的屏幕截图。突出显示了“文本标签”控件和屏幕的多个标签控件。

  3. 将以下图标控件添加到 CHECKOUT 屏幕中的容器。 它们将显示在“取消”和“确定”标签的左侧,可供选择。

    名称 图标 位置/大小 颜色
    ico_Cancel 取消 X:448
    Y:615
    宽度:35
    高度:39
    RGBA(255,0,0,1)
    ico_OK 对号 X:346
    Y:615
    宽度:35
    高度:39
    RGBA(51,176,75,1)
  4. 若要捕获客户签名,请将触笔输入控件添加到容器中。 将其重命名为 PenCustomerSignature 并将显示控件的属性设置为。 设置位置和大小,使其位于 lbl_SignatureLine 控件上方。

    画布应用工作室的屏幕截图。突出显示了“触笔输入”控件和该控件的属性。

  5. 我们将添加变量以根据流程的阶段显示和隐藏包含与签名相关的控件的容器。 使用以下 PowerFx 脚本替换 btnSaveCheckOut 按钮的当前 OnSelect 属性:

    Set(flgSignature, true);

  6. 若要根据 flgSignature 变量的状态显示和隐藏包含与签名相关的控件的容器,请将容器的 Visible 属性设置为:

    flgSignature

  7. 若要提供取消签名捕获并返回 CHECKOUT 屏幕的选项,请使用以下 PowerFx 脚本设置 ico_CancelOnSelect 属性:

    Reset(PenCustomerSignature);Set(flgSignature, false);

  8. 若要使用捕获的签名更新服务请求并完成签出流程,请使用以下 PowerFx 脚本设置 ico_OKOnSelect 属性:

    Patch('Service Requests',ddServiceRequestForCheckOut.Selected,{'Actual Completion':Now(),'Customer Signature':PenCustomerSignature.Image}); Reset(PenCustomerSignature); Set(flgSignature, false);
    
  9. 此时,您可以保存并播放该应用以测试在签出服务请求时能否捕获签名。

创建新客户功能

要让用户从 CHECKIN 屏幕创建新客户,请按照以下步骤操作:

  1. 创建 CHECKIN 屏幕的副本并将其重命名为 CUSTOMER。 重命名屏幕组件并按照以下步骤操作:

    1. 编辑 frmCustomer 属性以将 Data source 设置为 Contacts

    2. 选择您要向用户提供的不同字段,例如名、姓、电子邮件和移动电话。

    画布应用工作室的屏幕截图。突出显示了窗体控件的属性和屏幕的重命名组件。

  2. 要在选中 btnSaveCustomer 按钮时创建客户并允许创建新客户,请在按钮的 OnSelect 属性中输入以下 PowerFx 脚本:

    SubmitForm(frmCustomer); NewForm(frmCustomer); Refresh(Contacts);

  3. 要在选择 btnBackCustomer 按钮时导航回 CHECKIN 屏幕,请在按钮的 OnSelect 属性中输入以下 PowerFx 脚本:

    Navigate(CHECKIN,ScreenTransition.Fade);

  4. 要从 CHECKIN 导航回此屏幕,请解锁 frmCheckIn 窗体的客户字段的数据卡属性。 重设数据卡片组合框的大小以提供空间来在其旁边插入添加图标。

    画布应用工作室的屏幕截图。突出显示了“图标”控件和该控件的属性。

  5. 要导航至 CUSTOMER 屏幕,请在图标的 OnSelect 属性中输入以下 PowerFx 脚本:

    Navigate(CUSTOMER,ScreenTransition.Fade);

  6. 为确保在创建新客户时更新客户列表,请将组合框的 Data source 属性更改为 Contacts 表。

    画布应用工作室的屏幕截图。突出显示了组合框的 Data source 属性。

  7. 此时,您可以保存并播放应用以测试屏幕之间的导航以及能否新建潜水装备。

后续步骤

现在,您已了解了如何使用 Dataverse 作为数据源创建 Dive Center 画布应用。 接下来,您将了解如何创建模型驱动应用。