Show a list of items from any data source by adding a Gallery control to your app. This topic uses Excel as the data source. Filter the list by configuring the gallery to show only those items that match the filter criterion in a Text input control.

Prerequisites

Add a gallery

  1. Open PowerApps, and then click or tap New near the left edge.

  2. On the Blank app tile, click or tap Phone layout.

  3. Add a connection to the FlooringEstimates table in the Excel file.

  4. (optional) Add a gallery to the default screen by clicking or tapping the Insert tab, clicking or tapping Gallery, and then clicking or tapping a gallery that's empty (blank) or that contains a default set of controls.

    These options include galleries that scroll horizontally or vertically. You can also add a gallery that automatically bases its size on the amount of content in each item.

    Add gallery

  5. On the Home tab, click or tap New screen.

    You can add a screen that's empty, that scrolls, that contains a gallery, or that contains a form.

  6. Click or tap List screen to add a screen that contains a gallery and other controls such as a search bar.

    Note: Whether you add a gallery to a new screen or an existing one, you can click or tap near the bottom of the gallery to select it and then choose a different layout in the right-hand pane. For this tutorial, leave the default layout.

    Choose gallery layout

  7. In the right-hand pane, click or tap the data source, and then click or tap FlooringEstimates.

    Select datasource

    The gallery shows the sample data.

    Show data

    You'll configure sort and search later in this topic.

Add a control to the gallery

Before you do any customization, decide on a gallery layout. The first set of controls in a gallery is the template, which determines how all data in the gallery appears.

  1. Select the template by clicking or tapping near the bottom of the gallery and then clicking or tapping the pencil icon in the upper-left corner of the gallery.

    Edit gallery template

  2. Add a Label control to the gallery template, and then move and resize the new control so that it doesn't overlap with other controls in the template.

    Add label

  3. With the Label control still selected, open the highlighted list in the right-hand pane.

    Open drop-down list

  4. In the list of fields that you just opened, click or tap Price.

    Change label binding

    The gallery shows the new values

    Final Gallery

Filter the gallery

The Items property of a gallery determines which items it shows. In this procedure, you configure that property so that the gallery shows only those items for which the product name contains the text in TextSearchBox1.

Text search box

  1. Set the Items property of the gallery to this formula:

    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.

  2. Type part or all of a product name in the search box.

    The gallery shows only those items that meet the filter criterion.

Sort the gallery

The Items property of a gallery determines the order in which it shows items. In this procedure, you configure that property so that the gallery shows the order of items as set by ImageSortUpDown1.

Image for sorting

  1. Set the Items property of the gallery to this formula:

    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 by the names of the products.

To sort and filter your gallery, replace both instances of DataSource in this formula with name of your data source, and 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))

Next steps