Customize a gallery layout in PowerApps
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.
- For information about how to generate an app automatically, see Generate an app to manage data in a SharePoint list.
- If you're unfamiliar with PowerApps, see Introduction to PowerApps.
You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.
- Create a connection from PowerApps to SharePoint.
Create a SharePoint list, named AppGen, that contains these columns.
Add these items to the list that you just created.
Generate an app automatically based on the list that you just created.
In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.
In the left navigation bar, click or tap the top thumbnail to ensure that BrowseScreen1 is selected.
BrowseScreen1 shows the AccountID and Title of each item in the SharePoint list.
Next, you'll specify that the OrderDate for each item will appear instead of the AccountID.
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.
In the right-hand pane, open the Title1 list, and then click or tap OrderDate.
BrowseScreen1 reflects your change.
For more information about galleries, see Show a list of items in PowerApps.
Select the Gallery control by clicking or tapping any record except the first one.
Near the upper-left corner, ensure that the property list shows Items.
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.
Based on this formula, users can show only those records that start with one or more letters in the AccountID column.
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.
Later in this procedure, you'll change the formula to sort the records based on the Title column instead.
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.
Open Preview mode by pressing F5 (or by clicking or tapping the play button near the upper-right corner).
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.
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.
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).
Click or tap the title of the screen to select it.
Ensure that the property list shows Text, and then type the name that you want, surrounded by double quotation marks, in the formula bar.
BrowseScreen1 reflects your change.
- Press Ctrl-S to save your changes.
- Customize the forms in the app by showing, hiding, and reordering the fields that the forms show.