Power Apps Gallery Control [How to Use]

Have you ever worked with a Power Apps Gallery Control? If Not, Then follow this complete tutorial to learn everything in detail.

In this Microsoft Power Apps tutorial, I will explain how to use the Power Apps gallery control with various properties.

Moreover, I will explain different types of Power Apps gallery control and how to display gallery items manually in Power Apps.

Ultimately, we will see how to display the SharePoint list items in the Power Apps gallery and the Power Apps gallery control limitations.

Power Apps Gallery Control

Power Apps Gallery control helps to display a set of records from a data source, and each record contains multiple sets of data with corresponding values.

For example, Suppose we use a gallery control to display the employee details, where each item shows the Employee Name, Employee DOB, Employee department, and many more…

Gallery Control in Power Apps

While using a gallery control, there are predefined layouts for displaying images and text in a gallery and many more.

Power Apps Gallery Control Properties

In this section, I will explain the properties of the Power Apps gallery control.

Property NameDescription
AccessibleLabelThis property is assigned to a screen reader label.
Border ColorA user can specify the color for a border.
Border StyleThis property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”].
DefaultWhen the user opens the app, we can specify the single record to be selected.
DelayItemLoadingAllows for the delayed loading of items (rows) until after the screen fully loads.
DisplayModeDetermines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
FillThis property displays the background color of the control.
ItemAccessibleLabelThe label is assigned to each gallery item. It should describe what each item is.
ItemsTo represent the items in a gallery, we can specify the data source.
LoadingSpinnerIf the value is set to None, the spinner will not appear. However, if it’s set to Controls or Data, the spinner will display during the rendering process, which may result in visible empty rows.
NavigationStepIf the value is set to true, the gallery will scroll until the user selects a navigation arrow located at either end of the gallery.
OnSelectWhen the user clicks on a control, it specifies what action to perform.
SelectableWhether gallery items are selectable by the user, setting it to true can identify the gallery as a selectable list, whereby the user can select by choosing an item. And setting it to false, the gallery as a regular list, with selecting an item without effect.
ShowNavigationDetermine if arrows are present on items in the gallery. To enable users to navigate through the gallery items by selecting an arrow.
TemplateFillProvide the background color of a gallery items.
TemplatePaddingThe distance between the gallery items.
VisibleHere, we can specify whether the gallery control can be visible.
WrapCountWe can specify the data source to represent the items in a gallery.

These are the Power Apps Gallery control properties.

Power Apps Gallery Control Types

Power Apps provides six different types of gallery controls, they are:

  • Vertical Gallery = The vertical gallery will display data items vertically.
Power Apps Gallery control types
  • Horizontal Gallery = This gallery will display the data items horizontally.
Gallery control types in Power Apps
  • Flexible height gallery = The data items are displayed vertically down the page, and the height of each item increases with the content it contains.
How to add gallery control in Power Apps
  • Blank vertical Gallery = This is a blank vertical gallery, which allows us to have complete control over the display of the data vertically.
How to use gallery control in Power Apps
  • Blank horizontal Gallery = Blank horizontal gallery, which allows us to have complete control over the display of the data horizontally.
Power Apps gallery control properties
  • Blank flexible height gallery = This gallery helps to display a wide variety of images, videos, and other media
Power Apps gallery control limitation

These are the different types of Power Apps gallery control.

Display Gallery Items Manually in Power Apps

This section will show you how to display the Power Apps gallery items manually.

For Example, I have created a blank canvas app and then added a Gallery control. Later, I displayed the gallery items manually in Power Apps, as shown below:

Power Apps display gallery items manually

If you are new to Power Apps, let me show you how to insert a Gallery control on the Power Apps screen. Follow the below steps:

  • Sign in to your Power Apps with your valid Microsoft 365 credentials.
  • Create a Blank canvas app -> On the Power Apps screen, insert a Gallery control [Click on +Insert -> Expand Layout -> Select Gallery Control]
How to use Power Apps gallery control
  • The gallery control will appear like the screenshot below:
Add Power Apps Gallery control
  • Select the Gallery control -> Set its Items property to:
["Proximity Sensor","PhotoElectric Sensor", "Passive infrared sensor", "Level sensor"]
Display gallery items manually in Power Apps
  • Once the app is ready, SavePublish, and Preview the app. The Power Apps gallery control items will be added manually.
How to display gallery items manually in Power Apps

This is how we can manually display the Power Apps gallery items.

How to display SharePoint list items in Power Apps Gallery

Let me show you how to display the gallery items using the SharePoint list here.

For Example, I have a SharePoint list [Employee Details] that has various columns like:

Column NameData Type
Employee IDTitle
Employee NameSingle line of text
Employee DepartmentChoice [“HR,” “Finance,” “Marketing”, “IT”]
Employee Joining DateDate and time
Is still workingYes/no
Employee ID ProofImage
Power Apps Gallery Control

I have created a Blank Canvas app from a SharePoint list, then added a Gallery control and connected it to the above SharePoint list as shown below:

How to display SharePoint list items in the Power Apps gallery

Follow the below steps to achieve this:

  • Create a Blank canvas app -> Connect the Data source to a SharePoint list as shown below:
Display SharePoint list items in the Power Apps gallery
  • On the Power Apps screen, insert a Gallery control -> Set its Items property to:
'Employee Details'

Where,

  1. Employee Details = SharePoint list name
Power Apps gallery control using SharePoint list
  • Also, we can customize the Power Apps gallery by using various properties, like Layout, Color, Border, Wrap count, Text font, etc.
  • Once the app is ready, SavePublish, and Preview the app. The Power Apps gallery control will now be connected to the SharePoint list.

I achieved this by displaying the SharePoint list items in the Power Apps gallery.

Power Apps Gallery Control Limitation

Here, I will explain the limitations of the Power Apps gallery control.

  • The Power Apps gallery can connect to many data sources, but its performance may differ, particularly when handling large data sets. The retrieval and rendering of thousands of items can be slow.
  • Gallery control displays items in either a single row (in horizontal galleries) or a single column (in vertical galleries), so layouts with multiple columns/rows need workarounds.
  • There is a limit to displaying the number of items in a gallery. The default record retrieval value is 500, and the max is 2,000. To keep the items displayed in the gallery below those limits, it’s necessary to filter the data source.
  • Delegating particular functions and formulas may be restricted based on the data source. This, in turn, affects the amount of data that can be locally processed and extracted.
  • Several controls are not supported within a gallery, including Display form, Edit form, PDF viewer, Power BI tile, Rich text editor, and Scrollable screen (Fluid grid).

These are the Power Apps’ limitations of a Gallery control.

Conclusion

Power Apps Gallery control displays the items using any data source. In this Power Apps tutorial, I have explained how to use a Power Apps Gallery control with various examples. Moreover, I covered:

  • Power Apps Control Types
  • Power Apps Gallery Control Properties
  • Display gallery items manually in Power Apps.
  • How to display SharePoint list items in the Power Apps gallery
  • Power Apps Gallery Control Limitation

Furthermore, you may like some more Power Apps tutorials: