Are you interested in learning about Power Apps Gallery Control and its functionalities?
Well, this Power Apps tutorial explains everything related to Gallery Control in Power Apps, its types, and key properties of Power Apps Gallery Control.
I’ll also use a simple scenario to demonstrate how to add a Power Apps Gallery control and display SharePoint List items in the Power Apps Gallery.
Moreover, we will see the limitations of Gallery Control in Power Apps.
Gallery Control in Power Apps
Power Apps Gallery is a type of control that can display a set of records from a data source. In the gallery, each record holds multiple types of data. Also, it can contain other input controls.
Suppose you use a gallery control to display multiple sales, with each item showing the Product Name, Product Price, and Product Quantity.
Within the Gallery control, every data field appears in a separate control. You can configure the Power Apps controls in its template. Inside the gallery, the template appears as the first item.
- On the left edge of a Gallery control in horizontal/landscape orientation.
- And at the top of a Gallery control in vertical/portrait orientation.
Any changes you make to the template will be reflected throughout the gallery.
Power Apps Gallery Control Properties
The table below represents all the key properties of the Power Apps Gallery Control.
| Property | Description |
|---|---|
| Items | Specifies the source of data that appears in a control like a list, a gallery, or a chart. |
| Default | When the app starts, it specifies the record from the data source to be selected in the gallery. |
| Selected | Defines the selected item. |
| AllItems | Defines all items in a gallery, including the additional control values that are a part of the gallery’s template. |
| AllItemsCount | Count of items that are loaded in the gallery. This may be less than the actual number of Items from the data source. More items may be loaded when the gallery is scrolled. |
| BorderColor | Provides the color of a control’s border. |
| DelayItemLoading | Specifies the delay loading of items (rows) until after the screen loads. |
| DisplayMode | Defines whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled). |
| Fill | Specifies the background color of a control. |
| ItemAccessibleLabel | Defines the label of each gallery item for screen readers. It should describe what each item is. |
| LoadingSpinner (None, Controls or Data) | When it is None, then the spinner will not be shown. When it is Controls or Data, the spinner will be shown when a render pass occurs, resulting in visible empty rows. |
| LoadingSpinnerColor | Specifies the fill color of the loading spinner. The default is set to BorderColor. |
| NavigationStep | If you set the value as true, the gallery scrolls so far, and the user selects a navigation arrow at either end of that gallery. |
| Selectable | It defines whether the gallery items can be selected. When the user is set to true, screen readers identify the gallery as a selectable list. You select an item by selecting it. When a user sets it to false, screen readers identify the gallery as a regular list, and selecting an item doesn’t select it. |
| ShowNavigation | Defines whether an arrow appears at each end of a gallery so that a user can scroll through the items in the gallery by selecting an arrow. |
| ShowScrollbar | Specifies whether a scrollbar appears when the user hovers over a gallery. |
| TemplateFill | Provides the background color of a gallery. |
| TemplateSize | Defines the template height for a gallery in vertical/portrait orientation. Or the template’s width for a gallery in horizontal/landscape orientation. |
| Transition | Represents the visual effect (Pop, Push, or None) when the user hovers over an item in a gallery. |
| Visible | Defines whether the control displays or is hidden. |
| WrapCount | Represents the number of items shown per row or column based on horizontal or vertical layout. |
These are the Power Apps Gallery control properties.
Power Apps Gallery Types
There are six different types of gallery control in Power Apps. Such as:
| Type | Image |
|---|---|
| Vertical gallery |  |
| Horizontal gallery |  |
| Flexible height gallery |  |
| Blank vertical gallery |  |
| Blank horizontal gallery |  |
| Blank flexible height gallery |  |
To insert any gallery in PowerApps, go to + Insert tab -> Search Gallery in the search box -> then you can choose your desired gallery from the gallery section as shown below.
These are all about Power Apps Gallery Types.
How to Display SharePoint List Items in Power Apps Gallery
Here, we will see how to display SharePoint list items in a Power Apps gallery control.
Example:
1. I have a SharePoint List named Employee Onboarding. This list has these many fields below:
| Column | Datatype |
|---|---|
| Employee ID | Number |
| Employee Name | Title field with Single line of text |
| Department | Choice [IT, HR, FINANCE, MARKETING] |
| Picture | Image |
| Location | Choice [Australia, America, France, Canada, Cuba, London] |
Also, this list has some records below.
I want to display all these SharePoint records in the Power Apps gallery control. To work with it, follow the instructions below:
2. Sign in to Power Apps with your valid Microsoft 365 Credentials and then create a Power Apps blank canvas app [with tablet layout].
3. Next, connect the SharePoint List data source to the app. To do so, go to the Data tab -> Add data -> Search SharePoint in the search bar -> Select SharePoint.
4. Add a new or existing SharePoint connection.
5. Connect the specific SharePoint site and choose the SharePoint list [Employee Onboarding].
6. Then, the SharePoint list has been connected to the app.
7. insert a Power Apps Vertical Gallery control [+ Insert -> Vertical gallery] into the screen.
8. To display all the SharePoint records in the Power Apps gallery, we can use the gallery’s Items property or the Data source property from the right Properties pane.
Items = 'Employee Onboarding'Refer to the image below.
9. Also, you can customize the Power Apps gallery by using various properties like Layout, Color, Border, Wrap count, Text font, etc.
10. Finally, save, publish, and preview the app.
This is how to display SharePoint list items in a Power Apps Gallery Control.
Power Apps Gallery Limitations
Refer to the table below to learn about the Power Apps gallery limitations.
| Limitation Category | Description |
|---|---|
| Item Display | Gallery control displays items in a single column (for vertical galleries) or a single row (for horizontal galleries), so layouts with multiple columns/rows need workarounds. |
| Data Source | While the gallery can connect to many data sources, performance may vary, especially with large data sets. Fetching and rendering thousands of items can be slow. |
| Item Limit | There’s a limit to the number of items a gallery can display, driven by the “Data row limit” for non-delegable queries (500, by default, can be increased to 2,000). |
| Delegation | Certain functions and formulas might not be delegable depending on the data source. This impacts how much data is pulled and processed locally. |
| Not Supported Controls | Within a gallery, the following controls are not supported: – Display form – Edit form – PDF viewer – Power BI tile – Rich text editor – Scrollable screen (Fluid grid) |
| One Gallery can be added | Only one gallery can be added inside of another gallery. |
| TemplateSize | TemplateSize must be at least one. If you don’t consider the template size, controls in the Gallery may deviate from their intended X or Y values. |
| Flexible Height Gallery | Before all items load, if a user scrolls the Flexible height gallery control, the currently visible item may be pushed down and out of view. Use the standard Gallery control instead of the Flexible height option to get around this problem. |
The above table represents all the restrictions or limitations of the Power Apps gallery control.
Conclusion
I hope you got an overview of the gallery in Power Apps. This Power Apps article covers what gallery control is in Power Apps, its important properties, and its all types.
Also, we saw how to insert a Power Apps Gallery control and display SharePoint list items in the gallery. Furthermore, we discussed all the limitations of Gallery control in Power Apps.
Additionally, you may like some more Power Apps tutorials:
- Add New Row in Power Apps Gallery Control
- Select Multiple Items in Power Apps Gallery Control
- Power Apps Gallery Conditional Formatting
- Power Apps Gallery Pagination
- Power Apps Filter Gallery By Year
- Power Apps Filter Gallery By Last Month
- How to Sort Power Apps Gallery By ID
- Sort Gallery by Person Column in Power Apps
- How to Sort Power Apps Gallery By Month
- Customize a Power Apps Gallery Layout
- How to Display SharePoint List Items in PowerApps Gallery?
- How to Sort Power Apps Gallery by Choice Column?
- Power Apps Sort Gallery By Calculated Field
- Count Rows in Power Apps Gallery Control
- How to Add Hyperlink in Power Apps Gallery?
- How to Use Power Apps Gallery OnSelect?
I am Bijay a Microsoft MVP (10 times – My MVP Profile) in SharePoint and have more than 17 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com
Want this is
Hello Bijay,
Thank you for this nice tutorial!
I have created a product selector with in columns the store locations.
Now i want to create a drop down or other selection were i can Show or hide the store location colums depending on my selection. I am able to hide columns but the spaces renmain. Is there a way i can do this so that you could make a selection and only those colums will show in the results. I really am looking to create an Excel kind of view.