通过

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

  • 项目

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

在 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。 可将其更改为集合中任何其他项。 例如，如果集合具有 ProductDescription 或 Price 字段，可将该标签设置为 ThisItem.ProductDescription 或 ThisItem.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 关闭预览窗口。
  • 使用库时，选择库中的第一项可更改库中的所有项。 例如，选择第一项可向库中的所有项添加边框。
  • 若要更新库的属性，可选择库中除第一项以外的任何项。 例如，选择第二项，更新适用于库（而非库中的项目）的 Items、ShowScrollbar 和其他属性。

已了解的内容

在本主题中，您已执行以下操作：

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

备注

您能告诉我们您的文档语言首选项吗？ 进行简短调查。（请注意，此调查是英文版调查）

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