在画布应用库中显示、排序和筛选数据

创建一个库来显示有关多种产品的图像和文本,并对该信息进行排序和筛选。

在 Power Apps 中,可使用库来显示多个相关的项,正如您在目录中看到的一样。 库非常适合用于显示有关产品的信息,例如名称和价格。 在本主题中,我们将创建一个库并使用类似于 Excel 的函数对该信息进行排序和筛选。 此外,选中某项目时,该项目周围将出现边框。

备注

本主题使用平板电脑应用。 可以使用手机应用,但需要调整某些控件的大小。

先决条件

  • 注册 Power Apps,然后使用用于注册的相同凭据登录
  • 通过模板数据从头开始创建平板电脑应用。
  • 了解如何配置控件
  • 这些步骤使用 CreateFirstApp 作为示例输入数据,其中包括 .jpg 图像。 此 zip 文件中包含可以转换成 Excel 的 XML 文件。 在其他情况下,Power Apps 会自动读取 .zip 文件中的文件,并成功导入这些文件。 可以下载和使用此示例数据,也可以导入您自己的数据。
  1. 使用示例数据创建一个名为 Inventory 的集合。 步骤包括:

    1. 插入选项卡上,选择控件,然后选择导入

      插入控件

    2. 将导入控件的 OnSelect 属性设置为以下公式:
      Collect(Inventory, Import1.Data)

      OnSelect 属性

    3. 选择导入数据按钮,打开 Windows 资源管理器。 选择 CreateFirstApp.zip,然后选择打开

    4. 文件菜单中,选择集合。 Inventory 集合列出了所导入的数据:

      文件 - 集合

      刚刚创建了 Inventory 集合,其中包含五个产品的相关信息,包括设计图像、产品名称以及库存数量。

      备注

      导入控件用于导入类似于 Excel 的数据并创建集合。 导入控件在创建应用和预览应用时导入数据。 目前,导入控件不在发布应用时导入数据。

  2. 选择后退箭头,返回设计器。

  3. 插入选项卡上,依次单击或点击水平库。

    库 - 水平

  4. 在右侧窗格中,单击或点击标题和副标题可覆盖图形的选项:

    布局​

  5. 将库的 Items 属性设置为 Inventory

    库布局

  6. 将库重命名为 ProductGallery 并移动库,使它不会挡住其他控件。 调整库的大小,让它显示三个产品:

    重命名库

  7. 在库的第一个项目中,选择底部标签:

    带有库的应用

    备注

    更改任何库中的第一个项目时,将自动更改该库中所有其他项目。

  8. 将标签的 Text 属性设置为以下表达式:
    ThisItem.UnitsInStock

    执行此操作时,标签将显示每个产品的库存数量:

每个产品的库存

备注

默认情况下,顶部标签的 Text 属性设置为 ThisItem.ProductName。 可将其更改为集合中任何其他项。 例如,如果集合具有 ProductDescriptionPrice 字段,可将该标签设置为 ThisItem.ProductDescriptionThisItem.Price

使用这些步骤,将包括 .jpg 图像的数据导入一个集合。 然后添加一个显示该数据的库,并配置一个标签以显示每个产品的库存数量。

  1. 选择库中第一项以外的任何项。 将显示编辑图标(左上角)。 选择编辑图标:
    编辑​​

  2. 插入选项卡上,选择形状,然后选择矩形。 每个库项中将显示一个蓝色实线矩形。

  3. 主页选项卡上,选择填充,然后选择无填充

  4. 依次选择边框边框样式,然后选择实线。

  5. 再次选择边框,并将宽度设置为 3。 调整矩形的大小,使它环绕库项。 现在,库中的各项具有蓝色边框,应与下图类似:
    选择边框

  6. 形状选项卡上,选择可见,然后在公式栏中输入以下公式:

    If(ThisItem.IsSelected, true)

    蓝色矩形环绕库中的当前所选项。 选择一些库项,确认矩形出现在所选的每个项的周围。 请记住,也可以打开预览 预览按钮 来查看并测试所创建的内容。

提示

选择矩形,在主页选项卡上选择重新排序,然后选择置于底层。 通过此功能,可在边框不挡住任何内容的情况下选择库项。

使用这些步骤,在库中的当前所选项周围添加边框。

在这些步骤中,我们将以升序和降序对库项进行排序。 此外,我们将添加一个滑块控件,按所选择的库存数量“筛选”库项。

按升序或降序排序

  1. 选择库中第一项以外的任何项。

  2. Items 属性当前设置为 Inventory(集合的名称)。 将其更改为以下内容:

    Sort(Inventory, ProductName)

    执行此操作时,库中的各项按产品名称升序排序:已排序的库

    请尝试按降序排序。 将库的 Items 属性设置为以下公式:

    Sort(Inventory, ProductName, Descending)

  1. 添加滑块控件(插入选项卡 > 控件),将其命名为 StockFilter 并移动到库下。

  2. 配置滑块,使用户可将其设置为库存数量范围以外的值:

    1. 内容选项卡上,选择最小,然后输入以下表达式:
      Min(Inventory, UnitsInStock)
    2. 内容选项卡上,选择最大,然后输入以下表达式:
      Max(Inventory, UnitsInStock)
  3. 选择库中第一项以外的任何项。 将库的 Items 属性设置为以下表达式:
    Filter(Inventory, UnitsInStock<=StockFilter.Value)

  4. 预览中,将滑块调整到库中介于最大和最小数量之间的值。 调整滑块时,库只会显示小于所选值的产品:
    预览带有滑块值的库

现在,可添加至筛选器:

  1. 返回设计器。
  2. 插入选项卡上,选择文本,选择输入文本,并将新控件重命名为 NameFilter。 将文本控件移动到滑块下方。
  3. 将库的 Items 属性设置为以下表达式:
    Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
  4. 预览中,将滑块滑到 30,然后在文本输入控件中键入字母 g。 库只会显示库存数量少于 30 名称包含字母“g”的产品:
    预览显示 30 的滑块

提示和技巧

  • 可随时选择预览按钮(预览按钮图像)查看您创建的内容并对其进行测试。
  • 设计应用时,可以重设控件大小,然后单击并拖动它们来进行移动。
  • Esc 或选择 X 关闭预览窗口。
  • 使用库时,选择库中的第一项可更改库中的所有项。 例如,选择第一项可向库中的所有项添加边框。
  • 若要更新库的属性,可选择库中第一项以外的任何项。 例如,选择第二项,更新适用于库(而非库中的项目)的 ItemsShowScrollbar 和其他属性。

已了解的内容

在本主题中,您已执行以下操作:

  • 创建集合、将包括 .jpg 图像的数据导入该集合,并在库中显示该数据。
  • 在库中的每个图像下,配置列出该项的库存数量的标签。
  • 在选择的项周围添加边框。
  • 按产品名称对项目进行升序和降序排序。
  • 添加滑块和输入文本控件,按库存数量和产品名称筛选产品。

备注

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

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