显示 PowerApps 中项的列表Show a list of items in PowerApps

通过向应用添加控件,显示任意数据源中项的列表。Show a list of items from any data source by adding a Gallery control to your app. 本主题使用 Excel 作为数据源。This topic uses Excel as the data source. 筛选该列表,方法是:将库控件配置为仅显示那些与文本输入控件中的筛选器条件匹配的项。Filter the list by configuring the Gallery control to show only those items that match the filter criterion in a Text input control.

先决条件Prerequisites

  1. 打开 PowerApps,然后单击或点击左边缘附近的“新建”。Open PowerApps, and then click or tap New near the left edge.

  2. 在“空白应用”磁贴上,单击或点击“手机布局”。On the Blank app tile, click or tap Phone layout.

  3. 在“欢迎使用 PowerApps Studio”对话框中,单击或点击“跳过”。In the Welcome to PowerApps Studio dialog box, click or tap Skip.

  4. 与 Excel 文件中的“FlooringEstimates”表建立连接Add a connection to the FlooringEstimates table in the Excel file.

  5. (可选)依次单击或点击“插入”选项卡、“库”和空(空白)库控件或包含一组默认控件的库,将库控件添加到默认屏幕中。(optional) Add a Gallery control to the default screen by clicking or tapping the Insert tab, clicking or tapping Gallery, and then clicking or tapping a Gallery control that's empty (blank) or that contains a default set of controls.

    可以选择水平或垂直滚动的库控件。These options include Gallery controls that scroll horizontally or vertically. 还可以添加自动根据各项的内容量重设大小的库控件。You can also add a Gallery control that automatically bases its size on the amount of content in each item.

    添加库

  6. 在“开始”选项卡上,单击或点击“新屏幕”。On the Home tab, click or tap New screen.

    可以添加空屏幕、滚动的屏幕、包含库控件或窗体的屏幕。You can add a screen that's empty, that scrolls, that contains a Gallery control, or that contains a form.

  7. 单击或点击“列表屏幕”,添加包含库控件和其他控件(如搜索栏)的屏幕。Click or tap List screen to add a screen that contains a Gallery control and other controls such as a search bar.

    备注

    无论是将“库”控件添加到新屏幕,还是添加到现有屏幕,都可以单击或点击“库”控件底部附近位置以选择它,再依次单击或点击右侧窗格中的“FlooringEstimates”和“数据”窗格中的其他布局。Whether you add a Gallery control to a new screen or an existing one, you can click or tap near the bottom of the Gallery control to select it, click or tap Flooring Estimates in the right-hand pane, and then click or tap a different layout in the Data pane. 对于本教程,保留默认布局。For this tutorial, leave the default layout.

    选择库布局

  8. 在屏幕中单击或点击刚添加的库控件。Click or tap the Gallery control in the screen that you just added.

  9. 在右侧窗格的“属性”选项卡上,单击或点击“CustomGallerySample”。On the Properties tab of the right-hand pane, click or tap CustomGallerySample.

  10. 在“数据”窗格中,依次单击或点击“CustomGallerySample”和“FlooringEstimates”。In the Data pane, click or tap CustomGallerySample, and then click or tap FlooringEstimates.

    选择数据源

    此时,库控件显示示例数据。The Gallery control shows the sample data.

    显示数据

    本主题稍后将介绍如何配置排序和搜索。You'll configure sort and search later in this topic.

请先确定库控件布局,然后再自定义库控件。Before you do any customization, decide on a Gallery control layout. 库控件中的第一组控件为模板,用于确定库控件中所有数据的显示方式。The first set of controls in a Gallery control is the template, which determines how all data in the Gallery control appears.

  1. 依次单击或点击库控件底部附近位置和左上角的铅笔图标,从而选择模板。Select the template by clicking or tapping near the bottom of the Gallery control and then clicking or tapping the pencil icon in the upper-left corner.

    编辑库模板

  2. 在模板仍然处于选中状态的情况下,添加标签控件,然后移动此控件并重设其大小,使之与模板中的其他控件不重叠。With the template still selected, add a Label control, and then move and resize it so that it doesn't overlap with other controls in the template.

    添加标签

  3. 通过选择模板然后单击或点击右侧窗格中的“Flooring Estimates”打开“数据”窗格。Open the Data pane by selecting the template and then clicking or tapping Flooring Estimates in the right-hand pane.

  4. 选择在此过程前面部分添加的标签,然后打开“数据”窗格中突出显示的列表。Select the label that you added earlier in this procedure, and then open the highlighted list in the Data pane.

    打开下拉列表

  5. 在此列表中,单击或点击“价格”。In that list, click or tap Price.

    更改标签绑定

    此时,库控件显示示例新值。The Gallery control shows the new values.

    最终库

库控件的“Items” 属性决定了其所显示的项。The Items property of a Gallery control determines which items it shows. 在此过程中,需对该属性进行配置,使得库控件仅显示产品名称包含 TextSearchBox1 中文本的那些项。In this procedure, you configure that property so that the Gallery control shows only those items for which the product name contains the text in TextSearchBox1.

文本搜索框

  1. 单击或点击库控件底部附近,以选择该库控件。Select the Gallery control by clicking or tapping near the bottom of that control.

  2. 在“高级”选项卡上,将库控件的“Items” 属性设置为以下公式:On the Advanced tab, set the Items property of the Gallery control to this formula:

    If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name)))If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name)))

    若要详细了解此公式中的函数,请参阅公式参考For more information about the functions in this formula, see the formula reference.

  3. 在搜索框中键入产品的全称或部分名称。Type part or all of a product name in the search box.

    库控件仅显示符合筛选器条件的那些项。The Gallery control shows only those items that meet the filter criterion.

库控件的“Items”属性决定了项的显示顺序。The Items property of a Gallery control determines the order in which it shows items. 在此过程中,需对该属性进行配置,使得库控件按 ImageSortUpDown1 所设置的顺序来显示项的顺序。In this procedure, you configure that property so that the Gallery control shows the order of items as set by ImageSortUpDown1.

排序图像

  1. 将库控件的“Items”属性设置为以下公式:Set the Items property of the Gallery control to this formula:

    Sort(If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name))), Name, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))Sort(If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name))), Name, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

  2. 选择排序图标,更改库控件的排序顺序(按产品名称)。Select the sort icon to change the sorting order of the Gallery control by the names of the products.

若要对库控件进行排序和筛选,请执行以下操作:To sort and filter your Gallery control:

  • 将以下公式中的两个 DataSource 实例替换为数据源名称。Replace both instances of DataSource in this formula with the name of your data source.

  • 将两个 ColumnName 实例替换为要用作排序和筛选依据的列名称。Replace both instances of ColumnName with the name of the column by which you want to sort and filter.

Sort(If(IsBlank(TextSearchBox1.Text), DataSource, Filter( DataSource, TextSearchBox1.Text in Text( ColumnName ))), ColumnName, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))Sort(If(IsBlank(TextSearchBox1.Text), DataSource, Filter( DataSource, TextSearchBox1.Text in Text( ColumnName ))), ColumnName, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

突出显示选定项Highlight the selected item

将库控件的“TemplateFill”属性设置为类似于以下示例的公式:Set the Gallery control's TemplateFill property to a formula that's similar to this example:

If(ThisItem.IsSelected, LightCyan, White)If(ThisItem.IsSelected, LightCyan, White)

更改默认选择Change the default selection

将库控件的“Default”属性设置为要默认选择的记录。Set the Gallery control's Default property to the record that you want to select by default. 例如,指定“FlooringEstimates”数据源中的第五项:For example, specify the fifth item in the FlooringEstimates data source:

Last(FirstN(FlooringEstimates, 5))Last(FirstN(FlooringEstimates, 5))

在以下示例中,指定“FlooringEstimates”数据源中“Hardwood”类别的第一项:In this example, you specify the first item in the Hardwood category of the FlooringEstimates data source:

First(Filter(FlooringEstimates, Category = "Hardwood"))First(Filter(FlooringEstimates, Category = "Hardwood"))

后续步骤Next steps

了解如何使用窗体公式Learn how to work with forms and formulas.