Gallery Control in Power Apps [How to use with examples]

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.

gallery in powerapps

Power Apps Gallery Control Properties

The table below represents all the key properties of the Power Apps Gallery Control.

See also  How to Group Items in a Power Apps Gallery?
PropertyDescription
ItemsSpecifies the source of data that appears in a control like a list, a gallery, or a chart.
DefaultWhen the app starts, it specifies the record from the data source to be selected in the gallery.
SelectedDefines the selected item.
AllItemsDefines all items in a gallery, including the additional control values that are a part of the gallery’s template.
AllItemsCountCount 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.
BorderColorProvides the color of a control’s border.
DelayItemLoadingSpecifies the delay loading of items (rows) until after the screen loads.
DisplayModeDefines whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
FillSpecifies the background color of a control.
ItemAccessibleLabelDefines 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.
LoadingSpinnerColorSpecifies the fill color of the loading spinner. The default is set to BorderColor.
NavigationStepIf you set the value as true, the gallery scrolls so far, and the user selects a navigation arrow at either end of that gallery.
SelectableIt 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.
ShowNavigationDefines 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.
ShowScrollbarSpecifies whether a scrollbar appears when the user hovers over a gallery.
TemplateFillProvides the background color of a gallery.
TemplateSizeDefines the template height for a gallery in vertical/portrait orientation. Or the template’s width for a gallery in horizontal/landscape orientation.
TransitionRepresents the visual effect (Pop, Push, or None) when the user hovers over an item in a gallery.
VisibleDefines whether the control displays or is hidden.
WrapCountRepresents the number of items shown per row or column based on horizontal or vertical layout.

These are the Power Apps Gallery control properties.

See also  How to get Collection Column Names in Power Apps [From 3 Different Datasources]

Power Apps Gallery Types

There are six different types of gallery control in Power Apps. Such as:

TypeImage
Vertical galleryPowerApps Gallery Control
Horizontal galleryGallery Control in Power Apps
Flexible height galleryPower Apps Flexible Height Gallery
Blank vertical galleryPower Apps Blank Vertical Gallery
Blank horizontal galleryPower Apps Blank Horizontal Gallery
Blank flexible height galleryPower Apps 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.

gallery control in powerapps

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:

ColumnDatatype
Employee IDNumber
Employee NameTitle field with Single line of text
DepartmentChoice [IT, HR, FINANCE, MARKETING]
PictureImage
LocationChoice [Australia, America, France, Canada, Cuba, London]

Also, this list has some records below.

How to Use Power Apps Gallery Control

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.

Gallery in PowerApps

5. Connect the specific SharePoint site and choose the SharePoint list [Employee Onboarding].

gallery powerapps

6. Then, the SharePoint list has been connected to the app.

Power Apps Gallery Control

7. insert a Power Apps Vertical Gallery control [+ Insert -> Vertical gallery] into the screen.

powerapps gallery items

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.

gallery control in powerapps

9. Also, you can customize the Power Apps gallery by using various properties like Layout, Color, Border, Wrap count, Text font, etc.

powerapps gallery selected item

10. Finally, save, publish, and preview the app.

Power Apps Gallery

This is how to display SharePoint list items in a Power Apps Gallery Control.

See also  How to Submit Form to SharePoint List in Power Apps?

Power Apps Gallery Limitations

Refer to the table below to learn about the Power Apps gallery limitations.

Limitation CategoryDescription
Item DisplayGallery 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 SourceWhile 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 LimitThere’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).
DelegationCertain functions and formulas might not be delegable depending on the data source. This impacts how much data is pulled and processed locally.
Not Supported ControlsWithin 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 addedOnly one gallery can be added inside of another gallery.
TemplateSizeTemplateSize 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 GalleryBefore 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:

  • >