Show a list of items in canvas apps

Show a list of items from any data source by adding a Gallery control to your canvas app. 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. On the Insert tab, select Gallery, and then select Vertical.

    Add vertical gallery.

  2. On the Properties tab of the right-hand pane, open the Items list, and then select Flooring Estimates.

    Flooring estimates.

  3. (optional) In the Layout list, select a different option.

  1. On the Home tab, select New screen > List screen.

    A screen that contains a Gallery control and other controls, such as a search bar, appears.

  2. Set the gallery's Items property to FlooringEstimates.

    The Gallery control shows the sample data.

    Show data.

Before you do any other customization, ensure that the layout for your Gallery control most closely matches what you want. From there, you can further modify the Gallery 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 selecting the pencil icon in its upper-left corner.

    Edit gallery template.

  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.

    Add label.

  3. Select the gallery, and then select Edit next to Fields on the Properties tab of 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.

    Open drop-down list.

  5. In that list, click or tap Price.

    The Gallery control shows the new values.

    Final Gallery.

The Items property of a Gallery control determines which items it shows. In this procedure, you configure that property so that it also determines which records appear based on filter criteria and in what order.

Search box and sort icon.

  1. 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
        )
    )
    

    For more information about the functions in this formula, see the formula reference.

  2. Double-click the search box, and then type part or all of a product name in it.

    Only those items that meet the filter criterion appear.

  3. While pressing the Alt key, select the sort icon one or more times to switch the sort order.

    The records toggle between ascending and descending alphabetical order based on the product name.

Highlight the selected item

Set the Gallery control's TemplateFill property to a formula that's similar to this example, but you can specify different colors if you want:

If(ThisItem.IsSelected, LightCyan, White)

Change the default selection

Set the Gallery control's Default property to the record that you want to select by default. For example, you can specify the fifth item in the FlooringEstimates data source:

Last(FirstN(FlooringEstimates, 5))

In this example, you specify the first item in the Hardwood category of the FlooringEstimates data source:

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

Next steps

Learn how to work with forms and formulas.