在画布应用中创建详细信息库

按照分步说明在画布应用中创建详细信息库,来管理罗斯文商贸数据库中的虚构数据。 本主题是一个文章系列的一部分,该系列说明如何基于 Microsoft Dataverse 中的关系数据构建业务应用。 为了获得最佳结果,请按以下顺序探索这些主题:

  1. 创建订单库
  2. 创建摘要窗体
  3. 创建详细信息库(此主题)。

屏幕区域的定义。

先决条件

开始本主题之前,必须按照本主题前面所述安装数据库。 然后,必须创建订单库和摘要窗体,或打开 Northwind Orders (Canvas) - Begin Part 3 应用,该应用已经包含这个库和窗体。

创建另一个标题栏

  1. 在屏幕顶部,选择用作标题栏的 标签 控件,按 Ctrl-C 复制它,然后按 Ctrl-V 粘贴:

    复制和粘贴标题栏。

  2. 调整大小并移动副本,使其显示在摘要窗体下方。

  3. 可以通过以下两种方式之一从副本中删除文本:

    • 双击文本将其选中,然后按 Delete。
    • 将标签的 Text 属性设置为空字符串 ("")。

    从标题栏副本中删除文本。

  1. 插入具有垂直空白布局的 控件:

    添加垂直空白库。

    新库(将显示订单详细信息)显示在左上角。

  2. 关闭弹出数据源对话框,然后调整大小并将详细信息库移动到新标题栏下方的右下角:

    订单详细信息库的最终位置。

  3. 将详细信息库的 Items 属性设置为以下公式:

    Gallery1.Selected.'Order Details'
    

    设置详细信息库的 Items 属性。

    如果出现错误,请确认订单库的名称为 Gallery1(在左侧边缘附近的树视图窗格中)。 如果库的名称不同,则将其重命名为 Gallery1

    您刚刚链接了这两个库。 当用户在订单库中选择一个订单时,该选择会标识订单表中的一个记录。 如果该订单包含一个或多个行项目,订单表中的记录将链接到订单详细信息表中的一个或多个记录,这些记录中的数据会显示在详细信息库中。 此行为反映在订单订单详细信息表之间为您创建的一对多关系。 您指定的公式通过使用点符号来“遍历”该关系:

    订单表和订单详细信息表之间的一对多关系。

显示产品名称

  1. 在详细信息库中,选择从“插入”选项卡添加项来选择库模板:

    选择详细信息库的模板。

    确保选择的是库模板,而不是库本身。 边界框应会在库边界稍微靠内的位置,可能会比库的高度短。 当您将控件插入此模板时,库中的每个项都会重复插入这些控件。

  2. 插入选项卡上,将标签插入到详细信息库中。

    标签应该出现在库中;如果未出现,请重试,但在插入标签之前,请确保选择了库的模板。

    将标签添加到详细信息库中。

  3. 将新标签的 Text 属性设置为以下公式:

    ThisItem.Product.'Product Name'
    

    如果未显示任何文本,请选择订单库底部附近的订单 0901 的箭头。

  4. 调整标签大小,以显示完整文本:

    在订单详细信息中显示产品名称。

    此表达式从订单详细信息表中的记录出发。 记录通过多对一关系保留在 ThisItem 中,再到订单产品表中:

    订单详细信息表和订单产品表之间的多对一关系。

    产品名称列(以及您将要使用的其他列)被提取:

    订单产品表中的列。

显示产品图像

  1. 插入选项卡上,将 图像 控件插入到详细信息库中:

    在画布上插入图像控件。

  2. 调整图像和标签的大小,并移动为并排位置。

    提示

    若要对控件的大小和位置进行精细控制,请先不按 Alt 键开始调整大小或移动它,然后按住 Alt 键继续调整控件的大小或移动它:

    移动 image 控件。

  3. 将图像的 图像 属性设置为以下公式:

    ThisItem.Product.Picture
    

    同样,此表达式引用与此订单详细信息关联的产品,提取要显示的图片字段。

    显示产品图像。

  4. 减小库模板的高度,以便一次显示多个订单详细信息记录:

    缩短库的模板。

显示产品数量和成本

  1. 插入选项卡上,将另一个标签插入到详细信息库中,然后调整大小并将新标签移动到产品信息的右侧。

  2. 将新标签的 Text 属性设置为以下表达式:

    ThisItem.Quantity
    

    此公式直接从订单详细信息表中拉取信息(不需要任何关系)。

    显示产品数量。

  3. 主页选项卡上,将此控件的对齐方式更改为

    将对齐更改为右侧对齐。

  4. 插入选项卡上,将另一个标签插入到详细信息库中,然后调整大小并将标签移动到数量标签的右侧。

  5. 将新标签的 Text 属性设置为以下公式:

    Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
    

    如果您未包括语言标签 ([$-en-US]),将会根据您的语言和区域为您添加此标签。 如果您使用其他语言标记,您需要删除紧右方括号 (]) 之后的 $,然后在该位置添加您自己的货币符号。

    显示单价。

  6. 主页选项卡上,将此控件的对齐方式更改为

    将对齐更改为右侧对齐。

  7. 插入选项卡上,将另一个标签控件插入到详细信息库中,然后调整大小并将新标签移动到单价的右侧。

  8. 将新标签的 Text 属性设置为以下公式:

    Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
    

    同样,如果您未包括语言标签 ([$-en-US]),将会根据您的语言和区域为您添加此标签。 如果标记不同,您需要使用自己的货币符号,而不是紧跟在右方括号 (]) 之后的 $

    显示延伸价格。

  9. 主页选项卡上,将此控件的对齐方式更改为

    更改右侧对齐方式。

    现在,您已经完成将控件添加到详细信息库的工作。

  10. 树视图窗格中,选择 Screen1 以确保不再选择详细信息库。

向新标题栏添加文本

  1. 插入选项卡上,在屏幕上插入另一个标签:

    插入标签的屏幕截图。

  2. 调整大小并将新标签移动到第二个标题栏中产品图片的上方,然后在主页选项卡上将文本的颜色更改为白色。

  3. 双击标签文本,然后键入产品

    将标签文本更改为“产品”。

  4. 复制并粘贴产品标签,然后调整副本大小并将其移动到数量列上方。

  5. 双击新标签文本,然后键入数量

    将标签文本更改为“数量”。

  6. 复制并粘贴数量标签,然后调整副本大小并将其移动到单价列上方。

  7. 双击新标签文本,然后键入单价

    将标签文本更改为“单价”。

  8. 复制并粘贴单价标签,然后调整副本大小并将其移动到延伸价格列上方。

  9. 双击新标签的文本,然后键入延伸

    将标签文本更改为“延伸”。

显示订单总计

  1. 减小详细信息库的高度,以便在屏幕底部为订单总计腾出空间:

    缩短订单详细信息库。

  2. 复制标题栏并将其粘贴到屏幕中间,然后将副本移动到屏幕底部:

    复制标题栏,并将副本移到底部边缘。

  3. 从中间标题栏复制并粘贴产品标签,然后将副本移动到底部标题栏,即数量列的左侧。

  4. 双击新标签文本,然后键入此文本:
    订单总计:

    为订单总计添加标签。

  5. 复制并粘贴订单总计标签,然后调整大小并将副本移到订单总计标签的右侧。

  6. 将新标签的 Text 属性设置为以下公式:

    Sum( Gallery1.Selected.'Order Details', Quantity )
    

    此公式显示委派警告,不过您可以忽略它,因为单个订单中不会包含 500 个以上的产品。

  7. 主页选项卡上,将新标签的文本对齐方式设置为

    更改对齐方式。

  8. 复制并粘贴此标签控件,然后调整副本大小并将其移动到延伸列下方。

  9. 将副本的 Text 属性设置为以下公式:

    Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
    

    此公式显示委派警告,不过您可以忽略它,因为单个订单中不会包含 500 个以上的产品。

    显示订单总成本。

为新详细信息添加空间

在任何库中,您都可以显示数据,但不能更新数据或添加记录。 在详细信息库下,您将添加一个区域,用户可以在该区域中配置订单详细信息表中的记录并将该记录插入到订单中。

  1. 减小详细信息库的高度,以为该库下的单项编辑空间腾出空间。

    在此空间中,您将添加控件,以便用户可以添加订单详细信息:

    缩短详细信息库。

  2. 插入选项卡上,插入标签,然后调整大小并将其移动到详细信息库下。

    插入标签。

  3. 双击新标签的文本,然后按 Delete。

  4. 主页选项卡上,将新标签的填充颜色设置为 LightBlue

    将标签的填充更改为浅蓝色。

选择产品

  1. 插入选项卡上,选择控件 > 组合框

    插入组合框。

    组合框 控件将出现在左上角。

  2. 在弹出对话中,选择订单产品数据源。

  3. 在组合框的属性选项卡中,选择编辑字段旁边)打开数据窗格。 确保将主要文本SearchField 设置为 nwind_productname

    您指定逻辑名称是因为数据窗格在这种情况下尚不支持显示名称:

    设置组合框的“主要文本”。

  4. 关闭数据窗格。

  5. 在右边缘附近的属性选项卡中,向下滚动,关闭 Allow multiple selection,并确保 Allow searching 已打开:

    禁用多项选择并启用搜索。

  6. 调整组合框的大小并将其移动到详细信息库中产品名称列下方的浅蓝色区域:

    移动组合框。

    在此组合框中,用户将在产品表中为应用将创建的订单详细信息记录指定记录。

  7. 按住 Alt 键,选择组合框的向下箭头。

    提示

    按住 Alt 键,您可以在 Power Apps Studio 中与控件交互,无需打开“预览”模式。

  8. 在出现的产品列表中,选择一个产品:

    在组合框中选择产品。

添加产品图像

  1. 插入选项卡上,选择媒体 > 图像

    插入 image 控件。

    图像 控件将出现在左上角:

    image 控件的默认位置。

  2. 调整大小并将图像移动到其他产品图像下方组合框旁边的浅蓝色区域。

  3. 将图像的 Image 属性设置为:

    ComboBox1.Selected.Picture
    

    设置图像的 Image 属性。

    您使用的是与在摘要窗体中显示员工图片相同的技巧。 组合框的 Selected 属性返回用户选择的任何一个产品的完整记录,包括图片字段。

添加数量框

  1. 插入选项卡上,选择文本 > 文本输入

    添加文本输入框。

    文本输入 控件将出现在左上角:

    文本输入框的默认位置。

  2. 调整文本输入框的大小并将其移动到组合框的右侧,详细信息库中数量列的下方:

    调整和移动文本输入框。

    使用此文本输入框,用户将指定订单详细信息记录的数量字段。

  3. 将此控件的 Default 属性设置为 ""

    设置文本输入框的 Default 属性。

  4. 主页选项卡上,将此控件的文本对齐方式设置为

    将控件的对齐方式更改为右侧。

显示单价和延伸价格

  1. 插入选项卡上,插入 标签 控件。

    标签将显示在屏幕的左上角:

    插入标签。

  2. 调整标签大小并将其移至文本输入控件的右侧,然后将标签的 Text 属性设置为以下公式:

    Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
    

    设置标签的 Text 属性。

    此控件显示订单产品表中的价目表。 此值将确定订单详细信息记录中的单价字段。

    备注

    对于此场景,此值是只读的,但其他场景可能会需要应用用户对其进行修改。 如果是后一种情况,请使用 文本输入 控件,并将其 Default 属性设置为 List Price

  3. 主页选项卡上,将定价标签的文本对齐方式设置为

    将控件的对齐方式更改为右侧。

  4. 复制并粘贴定价标签,然后调整大小并将副本移到定价标签的右侧。

  5. 将新标签的 Text 属性设置为以下公式:

    Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
    

    设置新标签的 Text 属性。

    此控件基于应用用户指定的数量和应用用户选择的产品的定价显示延伸价格。 它是纯粹的应用用户信息。

  6. 双击数量的文本输入控件,然后键入一个数字。

    延伸价格标签将重新计算并显示新值:

    指定数量并显示延伸价格。

添加“添加”图标

  1. 插入选项卡上,选择图标 > 添加

    插入“添加”图标。

    图标将显示在屏幕的左上角。

    “添加”图标的默认位置。

  2. 调整此图标的大小并将其移动到浅蓝色区域的右边缘,然后将图标的 OnSelect 属性设置为此公式:

    Patch( 'Order Details',
        Defaults('Order Details'),
        {
            Order: Gallery1.Selected,
            Product: ComboBox1.Selected,
            Quantity: Value(TextInput1.Text),
            'Unit Price': ComboBox1.Selected.'List Price'
        }
    );
    Refresh( Orders );
    Reset( ComboBox1 );
    Reset( TextInput1 )
    

    设置图标 OnSelect 属性。

    通常,Patch 函数会更新并创建记录,此公式中的特定参数确定函数将进行的确切更改。

    • 第一个参数指定函数将在其中更新或创建记录的数据源(在本例中为订单详细信息表)。

    • 第二个参数指定函数将使用订单详细信息表的默认值创建记录(除非在第三个参数中另有指定)。

    • 第三个参数指定新记录中的四个列将包含来自用户的值。

      • 订单列将包含用户在订单库中选择的订单的编号。
      • 产品列将包含用户在显示产品的组合框中选择的产品的名称。
      • 数量列将包含用户在文本输入框中指定的值。
      • 单价列将包含用户为此订单详细信息选择的产品的定价。

    备注

    您可以为应用用户在显示产品的组合框中选择的任何产品构建使用任何列的数据的公式(在订单产品表中)。 当用户在订单产品表中选择记录时,不仅产品名称会出现在该组合框中,产品的单价也会出现在标签中。 画布应用中的每个查找值都引用整个记录,而不仅仅是主键。

    Refresh 函数确保订单表反映您刚刚添加到订单详细信息表的记录。 Reset 函数可清除产品、数量和单价数据,以便用户可以更轻松地为同一订单创建另一个订单详细信息。

  3. 按 F5,然后选择添加图标。

    订单反映您指定的信息:

    添加订单详细信息的动画。

  4. (可选)将另一项添加到订单中。

  5. 按 Esc 关闭“预览”模式。

删除订单详细信息

  1. 在屏幕的中心,选择详细信息库的模板:

    选择库模板。

  2. 插入选项卡上,选择图标 > 垃圾桶

    插入“垃圾桶”图标。

    “垃圾桶”图标将显示在库模板的左上角。

    图标的默认位置。

  3. 调整“垃圾桶”图标的大小并将其移动到详细信息库模板的右侧,然后将图标的 OnSelect 属性设置为此公式:

    Remove( 'Order Details', ThisItem ); Refresh( Orders )
    

    设置图标的 OnSelect 属性。

    在撰写本文时,您还无法直接从关系中删除记录,Remove 函数会直接从相关表中删除记录。 ThisItem 指定要删除的记录,该记录来自显示“垃圾桶”图标的详细信息库中的同一条记录。

    同样,此操作使用缓存数据,因此 Refresh 函数通知订单表应用已更改其相关表之一。

  4. 按 F5 打开“预览”模式,然后选择要从订单中删除的每个订单详细信息记录旁边的“垃圾桶”图标。

  5. 尝试从订单中添加和删除各种订单详细信息:

    添加和删除订单详细信息的动画。

结论

回顾一下,您添加了另一个库以显示订单详细信息以及在应用中添加和删除订单详细信息的控件。 您使用了以下元素:

  • 另一个库控件,通过一对多关系链接到订单库:Gallery2.Items = Gallery1.Selected.'Order Details'
  • 订单详细信息表到订单产品表的多对一关系:ThisItem.Product.'Product Name'ThisItem.Product.Picture
  • 用于获取产品列表的 Choices 函数:Choices( 'Order Details'.Product' )
  • 作为完整的多对一相关记录的组合框的 Selected 属性:ComboBox1.Selected.PictureComboBox1.Selected.'List Price'
  • 创建订单详细信息记录的 Patch 函数:Patch( 'Order Details', Defaults( 'Order Details' ), ... )
  • 删除订单详细信息记录的 Remove 函数:Remove( 'Order Details', ThisItem )

此系列主题是在画布应用中使用 Dataverse 关系和选择项的快速演练,用于教育目的。 在将应用发布到生产环境之前,您应该考虑现场验证、错误处理以及很多其他因素。

备注

您能告诉我们您的文档语言首选项吗? 进行简短调查。(请注意,此调查是英文版调查)

此调查大约需要七分钟。 不会收集个人数据(隐私声明)。