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. In the Options tab of the right-hand pane, click or tap the Layout tab to open it.

  2. Click or tap the option that contains a thumbnail image, a header, and a description.

    Add gallery

  3. Select the gallery by clicking or tapping any item in it except the first one.

    Select gallery

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

    Select datasource

    The gallery shows the data from the source that you specified.

    Show data

Add a control to the gallery

  1. To edit the gallery template, select the gallery, and click or tap the pencil icon in its upper-left corner.

    Edit gallery template

  2. Add a Text box 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 text box

  3. With the Text box 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 Text Box 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)))
    
  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 of items that it shows. 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