在 PowerApps 库中显示数据,并对数据进行排序和筛选Show, sort, and filter data in a PowerApps gallery

创建一个库来显示有关多种产品的图像和文本,并对该信息进行排序和筛选。Create a gallery to show images and text about several products, and sort and filter that information.

在 PowerApps 中,可使用库来显示多个相关的项,正如你在目录中看到的一样。In PowerApps, you can use a gallery to show several related items, just as you see in a catalog. 库非常适合用于显示有关产品的信息,例如名称和价格。Galleries are great for showing information about products, such as names and prices. 在本主题中,我们将创建一个库并使用类似于 Excel 的函数对该信息进行排序和筛选。In this topic, we create a gallery and sort and filter the information using Excel-like functions. 此外,选中某项目时,该项目周围将出现边框。Also, when an item is selected, a border is placed around the item.

备注

本主题使用平板电脑应用。This topic uses a tablet app. 可以使用手机应用,但需要调整某些控件的大小。You can use a phone app but you will need to resize some of the controls.

先决条件Prerequisites

  • 注册 PowerApps,并安装 PowerApps。Sign up for PowerApps and install PowerApps. 打开 PowerApps 时,使用注册所用的凭据登录。When you open PowerApps, sign-in using the same credentials that you used to sign up.
  • 通过模板数据从头开始创建平板电脑应用。Create a tablet app from a template, from data, or from scratch.
  • 了解如何配置控件Learn how to configure a control.
  • 这些步骤使用 CreateFirstApp 作为示例输入数据,其中包括 .jpg 图像。These steps use the CreateFirstApp as sample input data, which includes .jpg images. 该 zip 文件包含可以转换为 Excel 的 XML 文件。The zip file includes an XML file that can be converted to Excel. 在其他情况下,PowerApps 会自动读取 .zip 文件中的文件,并成功导入这些文件。Otherwise, PowerApps automatically reads the files in the .zip files and imports it successfully. 可以下载和使用此示例数据,或导入自己的数据。You can download and use this sample data, or import your own.
  1. 使用示例数据创建一个名为 Inventory 的集合。Create a collection named Inventory using the sample data. 步骤包括:Steps include:

    1. 在“插入”选项卡上,依次选择“控件”和“导入”:On the Insert tab, select Controls, and then select Import:

    2. 将导入控件的“OnSelect”属性设置为以下公式:Set the OnSelect property of the import control to the following formula:
      Collect(Inventory, Import1!Data)Collect(Inventory, Import1!Data)

    3. 选择“导入数据”按钮,打开 Windows 资源管理器。Select the Import Data button to open Windows Explorer. 选择 CreateFirstApp.zip,然后选择“打开”。Select CreateFirstApp.zip, and select Open.
    4. 在“文件”菜单中,选择“集合”。In the File menu, select Collections. Inventory 集合列出了所导入的数据:The Inventory collection is listed with the data you imported:

      刚刚创建了 Inventory 集合,其中包含五个产品的相关信息,包括设计图像、产品名称以及库存数量。You've just created the Inventory collection, which contains information about five products, including a design image, the name of the product, and the number of units in stock.

      备注

      导入控件用于导入类似于 Excel 的数据并创建集合。The import control is used to import Excel-like data and create the collection. 导入控件在创建应用和预览应用时导入数据。The import control imports data when you are creating your app, and previewing your app. 目前,导入控件不在发布应用时导入数据。Currently, the import control does not import data when you publish your app.

  2. 选择后退箭头,返回设计器。Select the back arrow to return to the designer.
  3. 在“插入”选项卡上,依次单击或点击“库”和“水平”库。On the Insert tab, click or tap Gallery, and then click or tap the Horizontal gallery.

  4. 在右侧窗格中,单击或点击标题和副标题可覆盖图形的选项:In the right-hand pane, click or tap the option in which the title and the subtitle overlay the graphic:

  5. 将库的 Items 属性设置为 InventorySet the Items property of the gallery to Inventory:

  6. 将库重命名为 ProductGallery 并移动库,使它不会挡住其他控件。Rename the gallery to ProductGallery, and move the gallery so it doesn't block the other controls. 调整库的大小,让它显示三个产品:Resize the gallery so it shows three products:

  7. 在库的第一个项目中,选择底部标签:In the first item of the gallery, select the bottom label:

    备注

    更改任何库中的第一个项目时,将自动更改该库中所有其他项目。When you change the first item in any gallery, you automatically change all other items in the gallery.

  8. 将标签的 Text 属性设置为以下表达式:Set the Text property of the label to the following expression:
    ThisItem!UnitsInStockThisItem!UnitsInStock

    执行此操作时,标签将显示每个产品的库存数量:When you do this, the label shows the units in stock for each product:

备注

默认情况下,顶部标签的 Text 属性设置为 ThisItem!ProductNameBy default, the Text property of the top label is set to ThisItem!ProductName. 可将其更改为集合中任何其他项。You can change it to any other item in your collection. 例如,如果集合具有 ProductDescriptionPrice 字段,可将该标签设置为 ThisItem!ProductDescriptionThisItem!PriceFor example, if your collection has ProductDescription or Price fields, you can set the label to ThisItem!ProductDescription or ThisItem!Price.

使用这些步骤,将包括 .jpg 图像的数据导入一个集合。Using these steps, you imported data that includes .jpg images into a collection. 然后添加一个显示该数据的库,并配置一个标签以显示每个产品的库存数量。You then added a gallery that displays the data and configured a label to show the units in stock for each product.

  1. 选择库中第一项以外的任何项。Select any item in the gallery except the first one. 将显示编辑图标(左上角)。The edit icon displays (upper left corner). 选择编辑图标:Select the edit icon:
  2. 在“插入”选项卡上,选择“形状”,然后选择矩形。On the Insert tab, select Shapes, and then select the rectangle. 每个库项中将显示一个蓝色实线矩形。A blue solid rectangle appears in each gallery item.
  3. 在“开始”选项卡上,选择“填充”,然后选择“无填充”。On the Home tab, select Fill, and then select No Fill.
  4. 依次选择“边框”、“边框样式”,然后选择实线。Select Border, select Border Style, and then select the solid line.
  5. 再次选择“边框”,并将宽度设置为 3。Select Border again, and set the thickness to 3. 调整矩形的大小,使它环绕库项。Resize the rectangle so that it surrounds the gallery item. 现在,库中的各项具有蓝色边框,应与下图类似:The items in your gallery now have a blue border and should look similar to the following:
  6. 在“形状”选项卡上,选择“可见”,然后在编辑栏中输入以下公式:On the Shape tab, select Visible, and then enter the following formula in the Formula Bar:

    If(ThisItem!IsSelected, true)If(ThisItem!IsSelected, true)

    蓝色矩形环绕库中的当前所选项。A blue rectangle surrounds the current selection in a gallery. 选择一些库项,确认矩形出现在所选的每个项的周围。Select a few gallery items to confirm that the rectangle appears around each item that you select. 请记住,也可以打开预览,查看并测试所创建的内容。Remember, you can also open Preview to see and test what you're creating.

提示

选择矩形,在“开始”选项卡上选择“重新排序”,然后选择“置于底层”。Select the rectangle, select Reorder on the Home tab, and then select Send to Back. 通过此功能,可在边框不挡住任何内容的情况下选择库项。Using this feature, you can select a gallery item without the border blocking anything.

使用这些步骤,在库中的当前所选项周围添加边框。Using these steps, you added a border around the current selection in the gallery.

在这些步骤中,我们将以升序和降序对库项进行排序。In these steps, we are going to sort the gallery items in ascending and descending order. 此外,我们将添加一个滑块控件,按所选择的库存数量“筛选”库项。Also, we'll add a slider control to 'filter' gallery items by the units in stock that you choose.

按升序或降序排序Sort in ascending or descending order

  1. 选择库中第一项以外的任何项。Select any item in the gallery except the first one.
  2. Items 属性当前设置为 Inventory(集合的名称)。The Items property is currently set to Inventory (the name of your collection). 将其更改为以下内容:Change it to the following:

    Sort(Inventory, ProductName)Sort(Inventory, ProductName)

    执行此操作时,库中的各项按产品名称升序排序:When you do this, the items in the gallery are sorted by the product name in ascending order:

    请尝试按降序排序。Try descending order. 将库的“Items”属性设置为以下公式:Set the Items property of the gallery to the following formula:

    Sort(Inventory, ProductName, Descending)Sort(Inventory, ProductName, Descending)

  1. 添加滑块控件(“插入”选项卡>“控件”),将其命名为 StockFilter 并移动到库下。Add a Slider control (Insert tab > Controls), rename it to StockFilter, and move it under the gallery.
  2. 配置滑块,使用户可将其设置为库存数量范围以外的值:Configure the slider so that users can't set it to a value outside the range of units in stock:

    1. 在“内容”选项卡上,选择“最小”,然后输入以下表达式:On the Content tab, select Min, and then enter the following expression:
      Min(Inventory, UnitsInStock)
    2. 在“内容”选项卡上,选择“最大”,然后输入以下表达式:On the Content tab, select Max, and then enter the following expression:
      Max(Inventory, UnitsInStock)
  3. 选择库中第一项以外的任何项。Select any item in the gallery except the first one. 将库的 Items 属性设置为以下表达式:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value)
  4. 预览中,将滑块调整到库中介于最大和最小数量之间的值。In Preview, adjust the slider to a value that's between the highest and the lowest quantity in the gallery. 调整滑块时,库只会显示小于所选值的产品:As you adjust the slider, the gallery shows only those products that are less than the value you choose:

现在,可添加至筛选器:Now, let's add to our filter:

  1. 返回设计器。Go back to the designer.
  2. 在“插入”选项卡上,选择“文本”,选择“输入文本”,并将新控件重命名为 NameFilterOn the Insert tab, select Text, select Input Text, and rename the new control to NameFilter. 将文本控件移动到滑块下方。Move the text control below the slider.
  3. 将库的 Items 属性设置为以下表达式:Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value && NameFilter!Text in ProductName)
  4. 在“预览”中,将滑块滑到“30”,然后在文本输入控件中键入字母“g”。In Preview, set the slider to 30, and type the letter g in the text-input control. 库只会显示库存数量少于 30 且名称包含字母“g”的产品:The gallery shows the only product with less than 30 units in stock and has a name with the letter "g":

提示和技巧Tips and Tricks

  • 可随时选择预览按钮 () 以查看创建的内容并进行测试。At anytime, you can select the preview button () to see what you created and test it.
  • 在设计应用时,可以重新调整控件大小,并使用单击-拖动移动它们。When designing your app, you can re-size the controls and move them around using click-and-drag.
  • Esc 或选择 X 关闭预览窗口。Press ESC or select the X to close the preview window.
  • 使用库时,选择库中的第一项可更改库中的所有项。When using a gallery, select the first item in the gallery to change all items in the gallery. 例如,选择第一项可向库中的所有项添加边框。For example, select the first item to add a border to all items in the gallery.
  • 若要更新库的属性,可选择库中第一项以外的任何项。To update the properties of the gallery, select any item in the gallery except the first one. 例如,选择第二项,更新适用于库(而非库中的项目)的 ItemsShowScrollbar 和其他属性。For example, select the second item to update the Items, ShowScrollbar, and other properties that apply to the gallery (not the items in the gallery).

已了解的内容What you learned

在本主题中,已执行以下操作:In this topic, you:

  • 创建集合、将包括 .jpg 图像的数据导入该集合,并在库中显示该数据。Created a collection, imported data that includes .jpg images into that collection, and showed the data in a gallery.
  • 在库中的每个图像下,配置列出该项的库存数量的标签。Under each image in the gallery, configured a label that lists the units in stock for that item.
  • 在选择的项周围添加边框。Added a border around the item that you select.
  • 按产品名称对项目进行升序和降序排序。Sorted the items by product name in ascending and descending order.
  • 添加滑块和输入文本控件,按库存数量和产品名称筛选产品。Added a slider and an input text control to filter the products by units in stock and product name.