Gallery Control in Power Apps - How to Use - Enjoy SharePoint (2024)

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:

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

Power Apps Gallery Types

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

Gallery Type	Gallery image
Vertical gallery
Horizontal gallery
Flexible height gallery
Blank vertical gallery
Blank horizontal gallery
Blank flexible height gallery

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].

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"]

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

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.

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

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.

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

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.

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.

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.

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.

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].

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

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

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

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.

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.

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

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

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.

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.

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.

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.

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

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.

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.

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

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

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

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.

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

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.

Follow the below steps to achieve this:

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

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.

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.

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.

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.

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

Moreover, you may like some more Power Apps articles:

• Power Apps WeekNum and ISOWeekNum Function
• PDF Viewer Control in Power Apps
• PowerApps Play Video From SharePoint
• Filter a Power Apps Gallery With Multiple Dropdowns
• Alternate Row Color in Power Apps Gallery

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.