After you generate an app automatically in PowerApps, customize the browse screen, which appears by default. Specify which layout to use, which columns to show, and which columns to use when sorting and filtering records.

Prerequisites

You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.

  1. Create a connection from PowerApps to SharePoint.
  2. Create a SharePoint list, named AppGen, that contains these columns.

    Sample columns from SharePoint

  3. Add these items to the list that you just created.

    Sample data

  4. Generate an app automatically based on the list that you just created.

Customize the gallery

  1. In the left navigation bar, click or tap the top thumbnail to ensure that BrowseScreen1 is selected.

    Thumbnail for BrowseScreen1

    BrowseScreen1 shows the AccountID and Title of each item in the SharePoint list.

    Browse screen shows titles and account IDs

    Next, you'll specify that the OrderDate for each item will appear instead of the AccountID.

  2. Click or tap the AccountID for the first item on the screen.

    When you click or tap a UI element (called a control), you select it, and a selection border with resize handles appears around that control.

    Select body of first item

  3. In the right-hand pane, open the Title1 list, and then click or tap OrderDate.

    Show title

    BrowseScreen1 reflects your change.

    Layout with dates

For more information about galleries, see Show a list of items in PowerApps.

Set the sort and search columns

  1. Select the Gallery control by clicking or tapping any record except the first one.

    Select gallery

  2. Near the upper-left corner, ensure that the property list shows Items.

    Items property

    The value of this property, which appears in the formula bar, determines not only the source of data that appears on the screen but also the filter and sort columns.

    For example, the formula bar might contain this formula by default.

    Default Items property

    Based on this formula, users can show only those records that start with one or more letters in the AccountID column.

    Default search columns

    If a user typed, for example, the letter "A" into the search bar, the screen would show the record for Europa. The title of that record doesn't match the search criterion, but the account ID does. Later in this procedure, you'll change the formula to filter records based on the Title column.

    In any generated app, users can sort records alphabetically in ascending or descending order by clicking or tapping the sort button near the upper-right corner. This formula specifies that the records will be sorted based on the AccountID column.

    Default sort column

    Later in this procedure, you'll change the formula to sort the records based on the Title column instead.

  3. In the formula bar, replace both instances of AccountID with Title (including the double quotation marks around the second instance).

    The formula bar should now contain a formula that resembles this example:
    SortByColumns(Filter(AppGen, StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending))

    Note: The number that appears after TextSearchBox might be higher, depending on what actions you took previously. However, the formula should still work as expected.

Test sorting and searching

  1. Open Preview mode by pressing F5 (or by clicking or tapping the play button near the upper-right corner).

    Open Preview mode

  2. Near the upper-right corner of BrowseScreen1, click or tap the sort button one or more times to change the alphabetical sort order between ascending and descending.

    Test the sort button

  3. In the search box, type one more letters to show only those records of which the title starts with the letter or letters that you type.

    Test the search bar

  4. Remove all text from the search bar, and then close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar for PowerApps).

    Close Preview mode

Change the title of the screen

  1. Click or tap the title of the screen to select it.

    Select screen title

  2. Ensure that the property list shows Text, and then type the name that you want, surrounded by double quotation marks, in the formula bar.

    Update screen title

    BrowseScreen1 reflects your change.

    New screen title

Next steps

  • Press Ctrl-S to save your changes.
  • Customize the forms in the app by showing, hiding, and reordering the fields that the forms show.