Gallery Control in Power Apps – How to Use

Recently, I worked on a Power Apps mobile application. In that app, I needed to show a list of meetings, and users could scroll through the list, view meetings, and select meetings they were interested in attending.

Microsoft Power Apps provides a very useful control called Power Apps gallery control to achieve this. In this article, I will explain what is a gallery in Power Apps, different types of Power Apps galleries, and how to use it.

Moreover, we will discuss some topics below:

  • Power Apps gallery manual items
  • Power Apps gallery border between items
  • How to refresh gallery Power Apps
  • What is Power Apps browse gallery
  • Power Apps gallery limit items

Gallery Control in Power Apps

Power Apps Gallery Control displays multiple records from a datasource like SharePoint, Excel, Dataverse, etc. It allows users to view, edit, and interact with data.

PowerApps Gallery is helpful for making interfaces that show and let you work with many items from the data source. Look at the image below:

powerapps horizontal gallery

Let’s see some of the important key properties of Power Apps gallery control.

PropertyDescription
ItemsThis specifies the data source that the gallery should display, allowing you to control what data is displayed.
Show NavigationIt takes boolean values, which are used to display the navigation in the gallery.
Navigation stepBased on the given value, it displays the items.

Power Apps Gallery Types

There are six various types of gallery controls in Power Apps. Such as:

Gallery Type Gallery image
Vertical gallery power apps verical gallery
Horizontal gallerypowerapps horizontal gallery
Flexible height galleryPowerApps flexible height gallery
Blank vertical gallerypower apps gallery control
Blank horizontal gallerypowerapps gallery
Blank flexible height galleryhow to create a gallery in powerapps

Add Items Manually in the Power Apps Gallery

In the Power Apps gallery, instead of connecting to a data source, we can also add items manually.

1. Create a blank app; on the Power Apps screen, click on +Insert -> select the gallery [Vertical gallery].

what is powerapps gallery

2. In the Items property of the gallery, put the manual values within the [] and use double quotes ” ” for each item, as in the example below.

["Budget Review Meeting","Audit and Compliance Review","Financial Reporting and Analysis Meeting","Investment Strategy Meeting","Expense Management Discussion"]
powerapps gallery items

3. The items were added to the gallery as shown below:

powerapps browse gallery

Power Apps Browse Gallery

In Power Apps, the term “browse gallery” is often used to refer to a gallery control that is used for browsing and displaying a list of items from a datasource.

It allows you to customize the layout and appearance; you can connect the gallery control to a datasource, such as a SharePoint list, Dataverse, etc.

Look at the example of the Power Apps gallery.

powerapps design examples

I have a SharePoint list named Issue Tracker with various columns.

powerapps gallery design examples

Now, we will see how to create a Power Apps Browse gallery step by step.

1. In the Power Apps screen, click the +Insert tab -> search gallery -> under Layout -> select Vertical gallery.

2. Select a data source [Issue Tracker] for the gallery.

Note: To add a new data source, search the data source name in the Select a data source screen and connect with credentials.
gallery in power apps

3. Now, the Power Apps gallery will look like the one below.

power apps browser view

4. We can change the layout of the gallery. In the Properties pane of the gallery -> Click the dropdown next to Layout -> Select any one layout.

In the example below, you can see the different types of layouts available for the gallery.

powerapps gallery layout

5. To add the image to the Power Apps gallery, put the below formula in the Image property of the image control.

ThisItem.'Assigned to'.Picture

In the formula, change ‘Assigned to’ is a SharePoint Person column.

powerapps gallery image from sharepoint list

While providing the formula, you’ll also get the images. Look at the example above; images are displayed.

6. To add more fields to the gallery, click the gallery. It will display the Edit gallery icon; click on it.

powerapps gallery editable grid

7. Now, from the +Insert tab, select Text label. It will add a text label for each record in the gallery.

Note: According to your requirements, you can also insert other controls like Button, Icons, Date picker, etc.
powerapps gallery add more fields

8. To get the new field value, set the Text property to the formula below.

ThisItem.Status.Value

Here, I’m fetching the choice field value. So, we need to provide the “.Value ” next to ThisItem.[ColumnName].

powerapps add field to gallery

9. To change the appearance of value. Go to the Properties pane of the label. There, we have options like

  • Font
  • Font size
  • Font weight
  • Font style
  • Text alignment, etc.

Provide the details according to your requirements. Refer to the article to know more: Power Apps Gallery Conditional Formatting

powerapps add another field to gallery

10. For the text labels, we can provide the back ground colors and borders also.

powerapps add item to gallery

11. Look at the gallery below after making some changes to the items.

powerapps examples step by step

I hope you understand how to browse the Power Apps gallery. As I showed above, you can add the remaining fields to your SharePoint list and format them by applying borders, colors, fonts, etc.

Display SharePoint List Items in Power Apps Gallery

Here, I will explain how to display SharePoint list items in a Power Apps gallery.

Example: I have a “Project Details” SharePoint list, which has the following columns: project name, description, approver, etc, like in the example below.

display sharepoint list items in powerapps gallery

Now, follow the steps below to display these list items in the Power Apps gallery.

1. Click the +Insert tab in Power Apps -> select one gallery control.

what is powerapps gallery

2. In the Select a data source screen, connect with the SharePoint list by clicking on it.

how to create gallery in powerapps

3. Now, the list items are displayed in the Power Apps gallery; refer to the image below.

power apps vertical gallery

4. Now, customize the Power Apps gallery using various properties, such as Layout, Color, Border, Text font, Show navigation, etc.,

Once the app is ready, save and preview the app. Look at the customized Power Apps gallery image below.

powerapps gallery examples

Like this, you can display the SharePoint list items in The Power Apps gallery.

Power Apps show selected gallery item in form

In Power Apps, you can create a dynamic user experience by displaying details of a selected item from a gallery in a form.

powerapps show selected gallery item in form

Follow the below steps to achieve the above example.

Note: Here, I’m taking the same SharePoint list[Project Details] as taken in the above example.

1. In Power Apps, click the +Insert tab, select Vertical gallery, and set the Items property of the gallery to the SharePoint list name.

powerapps gallery items table

2. Now, in the TemplateFill property of the gallery, put the formula below.

If(ThisItem.IsSelected,Color.Coral,Color.White)

If we want to set the background color of the selected item. Use the above formula.

3. Now, on the same screen, add the Edit form from the +Insert tab.

display powerapps gallery item

4. Adjust the form next to the gallery items as in the image below.

powerapps display selected gallery item in form

5. Then, set the Item property of the form to the formula below.

Gallery1.Selected

This formula will help to display the selected items of the gallery in the form.

power apps gallery design

Add one heading to the app and customize the app with colors, font size, etc. Then, save the change and preview the app.

Now, check the app. When you click items in the gallery, they will display in the form.

Power Apps gallery border between items

Adding borders between items in a Power Apps gallery can help the users distinguish between individual items.

Here, I have a Power Apps gallery[Issue Tracker], which doesn’t have any borders between the gallery items.

powerapps gallery border between items

Look at the gallery below after providing the borders between gallery items.

powerapps gallery border color

Let’s see how to provide a border between the Power Apps gallery items.

1. In PowerApps TreeView->From the Gallery-> select the Separator.

power apps gallery selected items border

2. From the separator Properties-> Select border style from the Border dropdown -> Provide the Border thickness value next to the dropdown, and change the color of the border.

powerapps gallery item border

3. Now, save the app and preview it once. You’ll see the border between the Power Apps gallery items.

powerapps gallery border color

Refresh Gallery Power Apps

To refresh a gallery in Power Apps, you can use the Refresh function. The refresh function updates the gallery data that we’ve made changes to the data source.

Power Apps Refresh Function Syntax:

Refresh(datasource)

Here’s an example of refreshing the Power Apps gallery.

refresh powerapps gallery

Follow the below steps to achieve this:

1. In Power Apps gallery -> Click on +Insert tab -> From Icons ->Select Refresh icon.

gallery refresh powerapps

2. In the OnSelect property of the icon, provide the formula below.

Refresh('Issue Tracker')

From the formula change the ‘Issue Tracker’ to your data source name.

powerapps refresh gallery on button click

3. Now, save the changes and preview the app. You’ll see the gallery refreshes when you click the refresh icon.

Like this, you can refresh the Power Apps gallery by using the Refresh function.

Power Apps Gallery Limit Items

In Power Apps, retrieving items from the data source is unlimited. However, there is a Data row limit, which has a default value of 500.

We can increase this limit from 1 to 2000. The main purpose of this “Data row limit” is to specify the maximum number of items to retrieve from datasource in a single request.

Look at the Power Apps gallery below. It displays more than 2000 items. So, technically, they are not limited, and they do not participate in the app’s data row limit setting.

power apps gallery limit of items

Based on the data source, the Power Apps gallery will first return 100 results, and then, as you scroll down, it will load more and more.

Usage of data row limit setting in Power Apps:

  • When we use the Collect() or Clearcollect() functions, the data row limit setting limits the maximum number of returned rows.
  • While increasing the data row limit, we can avoid some of the delegation warnings caused by large data.

Let’s see how to change the default item limit to 2000 in the Power Apps gallery.

1. In Power Apps top navigation -> Select ellipses()-> Click Settings.

powerapps gallery item limit

2. From Settings -> Select General -> Scroll down to Data row limit-> Set limit only between 1 to 2000.

It displays the error when we provide a limit of more than 2000.

powerapps 500 item limit

Like this, you can increase the data row limit up to 2000 in Power Apps.

Moreover, you may like some more Power Apps articles:

I hope this article was useful to you. I have explained all the related topics of Power Apps gallery control. You can customize the gallery items in many different ways. Utilize the gallery control properties to enhance the appearance.

  • I have a list on SharePoint where it has an empty column I named “PIC”. How can I add photos to that list (Adding pictures in PIC) via Powerapps?
    Actually, I want to update the rows by adding picture(s).
    In order to find a row I have a column that is exclusive and non-repetitive.

  • >

    Build a High-Performance Project Management Site in SharePoint Online

    User registration Power Apps canvas app

    DOWNLOAD USER REGISTRATION POWER APPS CANVAS APP

    Download a fully functional Power Apps Canvas App (with Power Automate): User Registration App

    Power Platform Tutorial FREE PDF Download

    FREE Power Platform Tutorial PDF

    Download 135 Pages FREE PDF on Microsoft Power Platform Tutorial. Learn Now…