In this article, we are going to understand the PowerApps Gallery control in detail. You can utilize multiple controls within a gallery control and each control can have different type of data.
Notes:
- You can use predefined templates in Gallery control.
- You can use only one gallery control inside a gallery control.
- When you Reset Gallery control, it does not reset all the controls within the gallery control.
- Right now (Jan 2023), the following controls are not supported within a gallery control.
- Display form
- Edit form
- PDF viewer
- Power BI tile
- Rich text editor
- Scrollable screen (Fluid grid)
- Web barcode scanner
How to add Gallery Control in PowerApps?
- Open your app in Edit mode.
- Click on insert.
- Search gallery control.
- There are various gallery control templates available. Choose the template that you need.
- Vertical gallery:
- Horizontal gallery:
- Flexible height gallery:
- Blank vertical gallery:
- Blank horizontal gallery:
- Blank flexible height gallery:
- You can select the type that suits your requirements.
- Now you need a database so that you can bind the gallery with that database. For that we will create a sample collection, but you can bind your gallery to any database that is supported by PowerApps.
- Example Collection:
ClearCollect( CityPopulations,
{ City: "London", Country: "United Kingdom", Population: 8615000},
{ City: "Berlin", Country: "Germany", Population: 3562000},
{ City: "Madrid", Country: "Spain", Population: 3165000},
{ City: "Rome", Country: "Italy", Population: 2874000},
{ City: "Paris", Country: "France", Population: 2273000},
{ City: "Hamburg", Country: "Germany", Population: 1760000},
{ City: "Barcelona", Country: "Spain", Population: 1602000},
{ City: "Munich", Country: "Germany", Population: 1494000},
{ City: "Milan", Country: "Italy", Population: 1344000}
)
- I have added Vertical Gallery and bound the above collection/data source to it.
- Items property of the Gallery control, holds the data source.
- As you can see, within one gallery control there are other controls like, label, image, icons, line, etc.
- Now, suppose I don’t need image control then I can remove that control and re-adjust the gallery.
- You can manage the layout directly. Click on the gallery and you can explore several templates as shown in the screenshot.
How to Sort the Gallery Items?
- Click on Gallery control.
- In the Items property, write formula as mentioned in the syntax. You can write multiple columns for sorting. The formula will prioritize the order from left to right.
SortByColumns(<DataSource>,<ColumnName1>,<ColumnName2>,….,<ColumnNameN>)
How to Search Items in Gallery Control?
- Place a textbox or consider an input for search term. Here, I have added one textbox.
- Now, Gallery Items property, write the formula according to this syntax.
SortByColumns(<DataSource>,<SearchText>,<ColumnName1>,<ColumnName2>,….,<ColumnNameN>)
- You can see, whatever text we have entered, it will display only matching results.
Mostly it depends on the configuration, but sometimes the Gallery control may take more time to load than usual. There are some steps to improve the performance here.
- If possible, you can reduce the number of controls within the Gallery control.
- You can try to avoid too many references to LookUp function
- Galleries with complex templates can benefit from having DelayItemLoading set to true. DelayItemLoading will also defer the rendering of templates which will allow the rest of the screen to render faster as both screen and gallery are not competing for resources.
- You can also set LoadingSpinner to LoadingSpinner.Controls. This change will improve the perceived experience when render time is longer.
