Customize Your PowerApps Browse Screen with Multiple Galleries

I like to make each PowerApps app look like an app. A colleague of mine noticed this about apps I develop and told me that’s what I did. It had not really dawned on me. It is not enough for me to simply make the app function, I must design the app. I must think about how the user will interact with it and how they will want to interact with it. What will the user want to see and how will they want to see it?

I believe an app should be visually appealing. Personally, I wouldn’t want to use an ugly app and I imagine I am not alone in that feeling. So, my philosophy is that a functional and attractive app is more likely to get used. An app that is well used may appear to be more useful, in turn. So, it is worth it to me to spend an adequate amount of time considering function and design. The successful adoption of my app depends on it.

One design choice in my bag of tricks is displaying a BrowseScreen with multiple galleries.

The example above shows what I started with and how the final BrowseScreen looks. Out of all the changes I made to the BrowseScreen, displaying multiple galleries was the easiest change and it had the biggest impact.

Here’s how I did it:

Make Some Room

1. Reduce the size of the existing Gallery on the BrowseScreen and move almost everything (Search box and gallery) down.
   

Add a New Label

1. Add a label just above the Search box to label the section. For extra credit, add a rectangle and move the sort, refresh and any other buttons down to the rectangle, too.
   

Add a New Gallery to the Screen

1. With the Browse Screen selected in the Tree view, click the Insert menu, and select Gallery. For this example, I selected a Vertical text gallery.
2. Resize the new gallery so that it fits the available space.
3. Select the desired layout from the Gallery properties panel. For this example, I used the Title and Subtitle layout.
   

Connect the New Gallery to Your Data

1. In the Tree view, select your new gallery and rename it to something meaningful.
2. With the gallery still selected, click the datasource drop-down in the Gallery properties panel and select your datasource.
3. In the Gallery properties panel, click the Edit link to the right of the Fields property. Select the fields to display from your datasource.
   

Make the New Gallery Meaningful

Now it looks like you have a tiny version of the original gallery. This is useless at this point but with a simple filter this becomes more useful.

With the new gallery selected, click the Items property. Make a note of the text shown there (it should be the datasource name)

1. Replace the text in the Items property with the following:
   
   SortByColumns(Filter([@MyDataSource], User().Email in Registered && 'StartTime'>Now()),"EventDate",Ascending)
   
   The code above displays the classes the current user has registered for, only. Feel free to replace my datasource and datasource column names (Registered, ‘StartTime’, and EventDate) with your own.
2. Now’s a good idea to change the top lblAppName text to reflect the data shown in the gallery below it, too.
   

Give the Original Gallery a New Look

1. With the original gallery selected, select the Layout drop-down in the Gallery properties panel.
2. Select a different layout. I picked the Title and Subtitle on Overlay layout. Feel free to update the colors on the Browse Screen, at this point.
   
3. Now add some pictures to the media catalog and use a filter to display those pictures in the original gallery. Use my previous post, “Display an Image in a PowerApps Gallery, Conditionally” to accomplish this.

That’s it. You’ve successfully customized your Browse Screen to display two galleries!