顯示 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.

    注意

    無論您將資源庫控制項新增至新畫面還是現有畫面,您都可以按一下或點選資源庫控制項底部來選取該控制項,並在右側窗格中按一下或點選 [地板估價],然後在 [資料] 窗格中按一下或點選不同的版面配置。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. 開啟 [資料] 窗格,方法是選取範本,然後在右側窗格中按一下或點選 [地板估價]。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.