Power Apps Gallery Control [Complete Tutorial]

In this Power Apps Tutorial, we will discuss what is Power Apps gallery control and also, will cover the below topics with different scenarios. Such as:

  • What is the Power Apps gallery?
  • Power Apps gallery types
  • Add a gallery control on Power Apps
  • Power Apps Gallery properties
  • What is the Power Apps gallery limit
  • What is the Power Apps gallery item limit
  • Power Apps gallery from SharePoint
  • Power Apps gallery update SharePoint list
  • Power apps gallery from a collection
  • Power Apps gallery design ideas
  • Power Apps gallery background color
  • Power Apps gallery border
  • Working with Power Apps gallery border between items
  • Power Apps gallery hide row
  • Add a header row in the Power Apps gallery
  • Power Apps gallery layout
  • Power Apps gallery filter
  • Power Apps gallery wrap count
  • Power Apps Gallery Dynamic Wrap Count
  • Power Apps gallery refresh with a button
  • Power Apps gallery refresh on a page visible
  • Power Apps gallery refresh using timer
  • Power Apps gallery deletes an item
  • power apps gallery remove item from collection
  • Power Apps gallery user photo
  • Power Apps gallery default or default selected item
  • Power Apps gallery default select first item
  • Power Apps gallery items count or row count
  • Power Apps gallery Countif
  • Power Apps gallery Hyperlinks
  • How to work with a vertical gallery with a horizontal scroll bar on the Power Apps?
  • How to set the dynamic height in the Power Apps gallery?
  • How do powerapps gallery items number items?
  • How to generate row numbers in the Power Apps gallery?
  • How to create a grid view in Power Apps using a gallery control?
  • How to reset a galley in Power Apps?
  • How to work with the Power Apps gallery’s item height?
  • How to work with the power apps gallery to navigate to the detail screen?
  • How to work with the power apps gallery with an edit form?
  • How to do a power apps gallery with the OnSelect property?
  • How to customize the template size within the Power Apps Gallery?
  • What is the transition effect and how do we work with it in the Power Apps gallery?
  • How to add a loading spinner within the Power Apps gallery?
  • How to remove duplicates from a collection via the Power Apps gallery?
  • What is thisitem in the Power Apps gallery?
  • How to show or hide the empty values within the Power Apps gallery?
  • How to work with distinct or unique values within the Power Apps gallery?
  • How to work with the Yes/No column within the Power Apps gallery?
  • How to work with the person field within the Power Apps gallery?
  • How to do power apps gallery on hover?
  • How do order by power apps gallery?
  • How do order by date in the power apps gallery?
  • How to upload the attachments from the Power Apps Gallery?
  • How to work with multiple selecting items within the Power Apps Gallery?

Before learning about the ‘Power Apps Gallery control’, we should sign in to the Power Apps with the Microsoft 365 User ID or office tenant ID.

Table of Contents

Power Apps Gallery

Power Apps Gallery is a type of control that can display a collection of records from a data source.

In a Power Apps gallery, if we change anything in the template, it will be reflected throughout the gallery.

For example, we are using a gallery control to display each item’s order details, such as Product Name, Product Price, Order Quantity, Order Date, Delivery Time, Shipping Address, and so on. Where each data field has seemed in its control within the Gallery control.

Those PowerApps controls can be configured in the template. The template appears as the first item in the gallery.

  • In horizontal/landscape orientation, on the left edge of a Gallery control.
  • Also, at the top of a vertical/portrait Gallery control.

There are predefined templates for displaying images and text in a gallery, as well as a gallery for variable-height items.

Also, read: Power Apps Gallery Filter [With Real Examples]

Power Apps gallery types

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

  • Vertical
  • Horizontal
  • Flexible height
  • Blank vertical
  • Blank horizontal
  • Blank flexible height

Read: Microsoft Power Apps tutorial for beginners – Build an app in Power Apps

Add a gallery control on Power Apps

Let’s see how to add a gallery control to the Power Apps screen.

We can find the gallery control in Power Apps by following the steps below. But first, we need to create a power apps screen so that we can insert a gallery within it.

  • On Power Apps, click on +Create > Blank app.
  • Blank canvas app > Create.
  • On the Canvas app from blank, give a name to the app and choose the format i.e Tablet or Phone.
  • Click on the Create. It will open a Power Apps screen where we can insert the gallery.

To insert the gallery, go to the ‘Insert‘ tab > Gallery > Select a gallery as per your requirement. It will create a blank gallery on the screen where we need to integrate with the data source.

Power Apps gallery control
Power Apps gallery control

This is how to add a gallery control in the Power Apps.

Also, read: Power Apps Data Table [Complete Guide]

Power Apps gallery properties

Now, we will see what properties come under the Power Apps gallery control.

PropertiesDefinitions
DefaultThe item or record from the data source will be displayed in the gallery when the app launches.
ItemsThe data source that appears in a control such as a gallery, list, or chart.
SelectedIt displays the selected item
AllItemsAll gallery items, including additional control values from the gallery’s template.
BorderColorThe border color of a control.
BorderStyleIt shows whether the border of a control is Solid, Dashed, Dotted, or None.
BorderThicknessThe border thickness of a control.
DisplayModeWhether the control accepts user input (Edit), displays data only (View), or is disabled (Disabled).
FillA control’s background color.
LoadingSpinner(None,Controls or Data)When None is specified, the spinner is not displayed. When we select Controls/Data, a spinner will appear when a render pass results in visible empty rows.
LoadingSpinnerColorThe loading spinner’s fill color. The default value is BorderColor.
NavigationStepIt shows how far a gallery scrolls if its ShowNavigation property is set to true and a navigation arrow at either end of the gallery is selected.
SelectableWhether or not gallery items can be chosen. When this property is set to true, screen readers recognize the gallery as a selectable list. And you choose an item by clicking on it. When this property is set to false, screen readers recognize the gallery as a regular list, and selecting an item does not select it.
TransitionWhen a user hovers over an item in a gallery, the visual effect (Pop, Push, or None) is applied.
TamplateFillThe color of a gallery’s background.
WrapCountThe number of items displayed per row or column depends on whether the layout is horizontal or vertical.
DelayItemLoadingDelay the loading of items (rows) until the screen has fully loaded.
HeightThe distance between the top and bottom edges of control.
ItemAccessibleLabelEach gallery item’s label for screen readers. Each item should be described.
TemplatePaddingThe distance between gallery items.

Also Read: Power Apps Gallery Patch [With Various Examples]

Power Apps gallery limit

There is some limitation to using Power Apps gallery control. Here we are going to discuss that limitation below.

  • If a user scrolls the Flexible height gallery control before all items are loaded, the currently visible item may be pushed down and out of view when the data loading is complete. To avoid this problem, use a regular Gallery control rather than the Flexible height variant.
  • Some controls are not supported within the gallery. Such as:
    • Display form
    • Power BI tile
    • Edit form
    • PDF viewer
    • Rich text editor
    • Scrollable screen
    • Web barcode scanner
  • We can only put one gallery inside another.

Check out: Power Apps Radio Button

power apps gallery item limit

When we are working with the Power Apps Gallery control, we might wonder, “What is the limit of the item that the gallery can hold?”.

Let’s discuss the item limit of Power Apps gallery control.

  • The Power Apps gallery doesn’t have a limit, but there is one on how many items you can retrieve at once.
  • The default value is 500, and the maximum value is 2,000. That means we can only retrieve 500 to 2,000 records at a time.
  • To keep the items displayed in the gallery below those limits, we usually need to filter the data source in some way.

Read: Power Apps Gallery Group By [With Real Examples]

Power Apps gallery from SharePoint

Here, we will see how to connect the Power Apps gallery to a SharePoint list. For example, we have prepared a SharePoint list named ‘Product‘ having some columns such as Title(default), OrderDate(Date and time), Price(Currency), ParentCompany(Choice), and Image(Thumbnail).

PowerApps gallery SharePoint
PowerApps gallery SharePoint

Now, we will connect the above SharePoint list to the Power Apps gallery. To do this, the following steps are:

  • On the Power Apps screen, add a gallery from the gallery control. For example, we will show all the SharePoint items in a vertical gallery.
  • Go to ‘Insert’ tab > Gallery > Vertical.
  • At first, it will create a blank gallery. Then it will ask to select a data source i.e. SharePoint (in our case).
  • Search ‘SharePoint’ on the search bar.
  • Select the site address or you can insert the site URL > Connect.
  • Choose a list (i.e. Product).
  • Connect.

We can see the SharePoint field’s items will be reflected in the gallery.

PowerApps gallery SharePoint list
PowerApps gallery SharePoint list

In ‘Fields‘(on the right properties panel), we can add and remove the fields from the gallery. Similarly, we can choose the layout from the Layout section. The above gallery, it is showing the image, title, and subtitle(order date) of the SharePoint items.

This is how to add a SharePoint list to the Power Apps gallery.

Power Apps gallery update SharePoint list

Here, we will see how to update the SharePoint list from the Power Apps gallery. For example, when we will click on a button, an item will create in the gallery and it will update in the SharePoint list.

To implement this, we are going to use another SharePoint list ‘Voters list‘.

power apps gallery update SharePoint list
Power Apps gallery update SharePoint list

We have prepared a gallery using the above SharePoint list.

power apps gallery update list
power apps gallery update list

To update the SharePoint list from the power Apps gallery, the following steps are:

  • On the Power Apps scene, add a button and place it beside the gallery. Go to the ‘Insert‘ tab > Button. Rename the button as ‘Update list‘.
  • Select the button and on the ‘OnSelect‘ property insert the below formula.
OnSelect = Patch('Voters list', Defaults('Voters list'),{Title: "Smith", Age:28, Address: "Canada"})

Where,

  • Voters list – The name of the data source
  • Title, Age, Address – The column name of the SharePoint list.
Power Apps gallery add item with button
Power Apps gallery adds an item with a button

Let’s save, publish, and play the app. We can see an item is created in the Power Apps gallery, once the button is clicked.

Create an item in Power Apps gallery
Create an item in the Power Apps gallery

Also, the item is updated in the SharePoint list i.e. Voters list.

power apps gallery update item in SharePoint list
power apps gallery update item in a SharePoint list

This is how to update items in a SharePoint list and a gallery via Power Apps.

Read: Power Apps Navigate Function + 16 Examples

Power Apps gallery yes no

In this section, we’ll look at how to use the Power Apps gallery to work with the yes/no column. When we use a yes/no SharePoint column within the Power Apps gallery, it appears as a boolean value by default, i.e., true and false for yes and no.

Suppose we have a SharePoint list (i.e., employees) that contains a Yes/No column named ‘Active‘.

Power Apps gallery Yes no
Power Apps gallery Yes no

When we use this SharePoint list in a gallery, the yes/no field comes like below:

Power Apps gallery use Yes no
Power Apps gallery use Yes no

But we can change the boolean value to ‘yes and no. To do this select the label control that contains the ‘Yes/no’ SharePoint column value. Insert the below expression in the ‘Text‘ format.

Text = If(ThisItem.Active,"Yes","No")

Where Active is the name of the yes/no SharePoint column.

Power Apps gallery Yes no SharePoint column
Power Apps gallery Yes no SharePoint column

This is how to use the YesNo column in the Power Apps gallery.

Power Apps Gallery person field

Here we will see how to work with the person field in the Power Apps gallery. Let’s take the previous SharePoint list i.e. Employees to implement this and the following steps are:

  • On the Power Apps screen, add a vertical gallery.
  • Set the data source as ‘Employees‘.
  • Add a label control to the gallery.
  • Adjust the ‘Template‘ size. As a result, each item in the gallery will be displayed without scrolling.
  • Select the label and insert the below expression to show the person field.
Text = ThisItem.EmployeeName.DisplayName

Where EmployeeName is the name of the SharePoint person field name.

Now we can see the employee’s display name within the Power Apps gallery.

power apps gallery person field
power apps gallery person field

We can also display the person’s email address instead of their display name. For this, modify the expression in the ‘Text’ property of the label like below:

Text = ThisItem.EmployeeName.Email

It will show the email address of the respective person. Similarly, we can show the department, claims, job title, picture, etc.

This is how we can work with a SharePoint person field within the Power Apps gallery.

Power Apps create a gallery from the collection

Here, we will see how to create a gallery from a collection on Power Apps. For this, first, we have to create a collection on the Power Apps screen. To create the collection the syntax is:

Collect(<Exisiting or new Collection name>, {Record(s)})

To create the collection on the Power Apps, the following steps are:

  • We will create a collection on the ‘OnVisible‘ property of the Power Apps screen. So that when the collection will visible when the app will open.
  • On the Power Apps screen, choose the ‘OnVisible‘ property from the properties dropdown.
  • Insert the below expression in that property.
OnVisisble = Collect(VehicleInfo, {Name: "Tesla", Color: "Blue", PurchaseDate: Date(2020,5,15), Owner: "John"},{Name: "Lexus", Color: "Black", PurchaseDate: Date(2020,8,12), Owner: "Harry"}, {Name: "Ford", Color: "Brown", PurchaseDate: Date(2022,1,1), Owner: "Robin"})
  • On the above expression, we have created 3 records having 4 columns where VehicleInfo is the name of the new collection, Name, Color, PurchaseDate, and Owner are the names of the columns.
power apps create a gallery from collection
power apps create a gallery from the collection
  • Now, the collection is created in the Power Apps. We can see the collection in the Collections section under the view tab.
power apps create gallery from a collection
power apps create a gallery from a collection
  • If in case you are unable to see the collection, just save and publish the app. Close the app and reopen it again.
  • Now, add a vertical gallery to that desired screen. Select the ‘VehicleInfo‘ as the data source.
Create a gallery using collection on Power Apps
Create a gallery using a collection on Power Apps
  • Select a layout as per your choice. Here we are going to choose the ‘Title‘ layout as well as add several labels within the gallery to show other columns.
create a gallery from collection power apps
create a gallery from a collection of power apps

This is how to create a gallery from a collection of power apps.

Power Apps gallery design ideas

Here, we will see how to design a Power Apps gallery. We can modify the gallery’s border, border color, background color, font, font color, size, and so on.

Let us customize the above gallery in Power Apps. Select the gallery and customize it in the right properties panel.

power apps gallery design
power apps gallery design

Similarly, on the gallery, select the title and date fields and change their fonts, colors, and so on.

power apps gallery customize
power apps gallery customize

This is how to do customization on the Power Apps gallery.

Power Apps gallery background color

In Power apps, we can change the background color as per the requirement. There is a property named ‘Color’ in the right-side properties panel. Click on that option and w can see it will show a color chart. From where we can select a background color.

power apps gallery background color
power apps gallery background color

Also, it allows for the addition of a custom background color. There is an option ‘Custom’ on the color chart.

power apps gallery set background color
power apps gallery set background color

There, is another way from which we can set a background color in the Power Apps gallery. In the gallery’s property dropdown, click on the ‘Fill’. Insert the color code in the RGBA method. It will change the gallery’s background.

For example, we will insert the color code as below in the ‘Fill‘ property.

Fill = RGBA(252, 189, 182, 1)

Where,

  • 252- Red value
  • 189- Green value
  • 182- Blue value
  • 1 – Alpha value

We can see it will change the background color of the gallery like below:

power apps gallery custom background color
Power Apps gallery custom background color

This is how to custom or change the background color in the Power Apps gallery.

Also read: PowerApps stuck on getting your data

Power Apps gallery border

There is a ‘border‘ control in the Power Apps gallery where we can set the border style (dotted, dashed, solid, or none), border thickness, and border color.

Those properties can be found separately in the gallery’s properties dropdown. Assume we set the gallery’s border properties as follows:

  • BorderStyle – Dashed
  • BorderThickness – 3
  • BorderColor – Blue(Choose it from the color chart)
power apps gallery border
Power Apps gallery border

This is how to customize the Power Apps gallery border.

Power Apps gallery border between items

In this section, we’ll look at how to add borders to the items in the Power Apps gallery control. Take the Power Apps gallery above, which contains the SharePoint ‘Product’ list.

power apps gallery border between items
Power apps gallery border between items

Now we will add a border as well as a gap between the above gallery’s items. To do this, the following steps are:

  • Increase the template padding to 12 in the Power Apps gallery’s properties. Select the ‘TemplatePadding’ from the properties dropdown or select it from the right-side properties panel.
TempaltePadding = 12

It will give a gap between the gallery’s items. We can see the difference below:

how to provide gap in between items of Power Apps gallery
How to provide gap in between items of Power Apps gallery
  • Next, we will fill the template so that it will be visualized easily. Select the ‘TemplateFill’ property and insert a color or color code as per your choice.
TemplateFill = LightSalmon

Now, the items will be appeared like below:

Gap between items in Power Apps gallery
The gap between items in the Power Apps gallery
  • To give the border between the items, we can increase the value in the separator. We can find this separator in the tree view of the gallery. (On the left-side panel)
  • Select the ‘Separator‘ and increase the value to 2 in the Border properties. You can also change the color and type.
PowerApps gallery border between items
PowerApps gallery border between items

This is how to add borders or gaps between the items in the Power Apps gallery control.

Also check: PowerApps form benefits for SharePoint

Power Apps gallery hide row

Here, we will see how to hide a row or an item from the Power Apps gallery. Suppose, we have a SharePoint list named ‘Product‘ having a ‘Yes/No‘ column named ‘Delivered‘.

power apps gallery hide row
power apps gallery hide row

Using the above SharePoint list, we have prepared a Power Apps gallery that shows the item’s image, title, and order date as below:

PowerApps gallery hide item
PowerApps gallery hides item

Now, we will add an icon to the gallery. In our scenario, if the item has been delivered, click on the icon will remove it from the gallery. It also displays the delivered status as true. To implement this, the following steps are:

  • Add a ‘Hide‘ icon inside the Power Apps gallery. Click on the ‘Insert‘ tab > Icons > Hide.
  • Select the icon and set the below expression on the ‘OnSelect’ property.
OnSelect = Patch(Product, Gal_Product.Selected,{Delivered: true})

Where,

  • Product – Name of the data source
  • Gal_Product– Name of the gallery
  • Delivered– The yes/no column of the SharePoint list
hide item in gallery PowerApps
Hide item in gallery PowerApps
  • Select the gallery, and set the below formula in the gallery’s Items property.
Items = Filter(Product,Delivered= false)
Make rows invisible from Powerapps gallery
Make rows invisible from the Powerapps gallery

Let’s save, publish and play the app. Assume the ‘keyboard‘ has arrived. So all we need to do is hide it from the gallery. To do so, select the hide icon. We can see it is going to hide from the gallery.

Hide a record from Gallery in PowerApps
Hide a record from Gallery in PowerApps

Also, the delivered column of the item in the SharePoint list is updated.

Hide any SharePoint list row in Power Apps
Hide any SharePoint list row in Power Apps

This is how to hide any SharePoint list row in the Power Apps gallery.

Also read: Power Apps SharePoint Button

Power Apps gallery header row

Here we will see how to add a header row in a Power Apps gallery. We are going to use the ‘Product’ SharePoint list to implement this requirement. The following steps are:

  • Using the SharePoint list, we have created a vertical gallery on the Power Apps shown below:
power apps gallery header row
Power apps gallery header row
  • Next, we will create a collection that will use as headers in the Power Apps gallery.
  • Select the Power Apps screen, and insert the below expression in the ‘OnVisible‘ property.
OnVisible = Collect(ProductHeaders,{Name: "", OrderDate: "", ParentCompany: ""})

Where,

  • ProductHeaders – The name of the new collection
  • Name, OrderDate, ParentCompany – The headers of the gallery
power apps gallery create header row
power apps gallery creates a header row
  • Add a data table to the screen and place it just above the gallery. Go to the ‘Insert’ tab > Data table.
  • Select the collection i.e. ProductHeaders as the data source of the data table. Adjust the height and width of the table header. Also, customize the header’s font.
power apps gallery add a header row
power apps gallery add a header row

That’s it! Save, and publish the app. We can see the header row in the Power Apps gallery. This is how to add a header row in the Power Apps gallery.

Power Apps gallery layout

The Gallery Layout is divided into two categories in PowerApps. Such as:

  1. List
  2. Gallery

Each layout has some sub-layouts. The ‘List‘ layout contains the below sub-layouts.

  • Blank
  • Title
  • Title and subtitle
  • Title, Subtitle, and body
  • Image and title
  • Image, title, and subtitle
  • Image, title, subtitle, and body

Select the gallery and then click the ‘Layout‘ button on the right-side properties. It includes all of the layouts available for use in the gallery.

power apps gallery layout
power apps gallery layout

Similarly, if we select the ‘Gallery‘ and it contains the below sub-layouts:

  • 2 Columns
  • 3 Columns
  • Title and subtitle
  • Title and subtitle on overlay
Layout of power apps gallery
The layout of the power apps gallery

In our above example, we have used the ‘List‘ layouts. Now, we will see an example using a ‘Title and subtitle‘ layout of the ‘Gallery‘ layout.

Layout of the power apps gallery
The layout of the power apps gallery

This is how to set the layouts of the Power Apps gallery.

Power Apps gallery filter

Here, we will see how to filter a gallery control in Power Apps. Let’s take the above ‘Product’ gallery to implement this.

Suppose, there is a requirement to filter the gallery control whose parent company is ‘Dell’. To do this, the following steps are:

  • On the Power Apps screen, select the gallery control.
  • Insert the below expression in the ‘Items’ property of the gallery control.
Items = Filter(Product,ParentCompany.Value = "Dell")

Where,

  • Product – The name of the data source
  • ParentCompany – The Choice column of the SharePoint list. So it is inserted as ‘ParentCompany.Value’.
power apps gallery filter
power apps gallery filter

This is how to filter the Power Apps gallery control.

Power Apps gallery wrap count

  • In Power Apps gallery control, the ‘WrapCount‘ property specifies how many items are displayed per row or column based on horizontal or vertical layout.
  • In other words, if the Gallery is set to horizontal, the ‘WrapCount‘ property determines the number of items per column
  • Similarly, if set to vertical, the ‘WrapCount‘ property determines the number of items per row.
  • Records are listed one after the other in the vertical layout. In contrast, records in the horizontal layout are listed next to each other from left to right.
  • Let’s implement this property in the gallery control to see how it works. To implement this, we are going to use the previous Power Apps gallery that contains the SharePoint ‘Product‘ list.
power apps gallery wrap count
power apps gallery wrap count

The wrap count in the above vertical gallery is set to 1 by default. As a result, the items appear one after the other.

If we set the Wrap count to 2, the gallery’s item will appear as shown below:

Wrap count in power apps gallery
Wrap count in power apps gallery

In the vertical gallery, we can set the wrap count to a maximum of 10. This is how to wrap count works in the Power Apps gallery.

Checkout this post: Power Apps WeekNum and ISOWeekNum Function with Examples

Power Apps Gallery Dynamic Wrap count

We saw how the wrap count works with the Power Apps gallery control in the previous example. In this section, we’ll look at how the wrap count in the Power Apps gallery control is set dynamically.

In the wrap count, we will set a condition. If the gallery has more than 4 items, instead of scrolling, it will wrap the item count to 2; otherwise, it will show the items one after the other.

So, insert the below formula in the gallery’s ‘WrapCount‘ property.

If(CountRows(Self.AllItems) > 4,2,1)

As the total items of the gallery are more than 4, so the gallery’s wrap count is set to 2. As result, the items will appear to look like the below:

Power Apps Gallery Dynamic Wrap count
Power Apps Gallery Dynamic Wrap count

If the total number of items is less than 4, then the items will appear one after another in the gallery control. This is how the wrap count will change dynamically in the Power Apps gallery.

Power Apps gallery refresh

Here, we will see how to refresh the Power Apps gallery in different ways.

Refresh the Power Apps gallery with a button

First, we will see how to refresh a Power Apps gallery using a button. To perform this manual process, we must add a button to the Power Apps screen where the gallery is used.

  • Click on the ‘Insert‘ tab > Button > Select it. Rename the button as ‘Refresh’.
  • On the ‘OnSelect‘ property, add the below expression to refresh the gallery.
OnSelect = Refresh(Product)

Where, Product – The name of the data source.

Power Apps refresh gallery using a button
Power Apps refresh the gallery using a button

Now is the time to save, publish, and run the app. For testing purposes, we will add a new item to the SharePoint list. We can see that once the button is pressed, the gallery will be updated.

This is how to refresh the Power Apps gallery via the button clicked.

Refresh the data when the screen is visible

Here, we will set the ‘refresh()’ on the ‘OnVisible‘ property of the Power Apps screen. As a result, when the screen becomes visible, it will automatically refresh screen with the most recent updates.

It is best to use the ‘Refresh()‘ function on screens that contain calculated values about data source records.

  • Navigate to the required screen.
  • On the ‘OnVisible‘ property, set the below expression.
OnVisible = Refresh(Product)
PowerApps refresh gallery
PowerApps refresh gallery

When the screen is visible, it will refresh the data source automatically. This is how to refresh the data in the Power Apps gallery by making the screen visible.

Refresh the Power Apps gallery using a timer

In this method, we can refresh the data automatically using a timer control within the Power Apps gallery. The data will be refreshed at a specified interval of time if the timer control is used. To work with it, the following steps are:

  • On the Power Apps screen, add a timer control. Go to the ‘Insert‘ tab > Inputs > Timer.
power apps gallery refresh
power apps gallery refresh
  • Select the ‘OnTimerEnd‘ property from the timer’s properties drop-down. Set the below expression on that.
OnTimerEnd = Refresh(Product)
  • Set the toggle ‘On‘ in the ‘Repeat‘ and ‘Auto start‘.(On the left-side properties panel)
  • Similarly, set the toggle ‘Off‘ in the ‘Auto pause‘.
  • Set the duration as 60000. It is the default Time Duration that represents in Milliseconds which means 60000 Milliseconds = 60 Seconds.
powerapps refresh gallery timer
powerapps refresh gallery timer

It will refresh the data each 1 minute automatically. Let’s save, publish, and play the app.

For testing purposes, we will delete an item (ex – Mouse) from the data source. Now we will wait for 1 minute and we can see the gallery got refreshed after 1 minute as well as the item got vanished like below.

powerapps refresh gallery using timer
powerapps refresh gallery using a timer

This is how to refresh the gallery using a timer in PowerApps.

Read: PowerApps nested gallery control example

power apps gallery deletes an item

Here, we will see how to delete an item from the Power Apps gallery. Let’s use the previous Power Apps gallery to implement this and the following steps are:

  • Add a ‘Trash‘ icon inside the Power Apps gallery. Click on the ‘Insert‘ tab > Icons > Trash. We can see it will appear in each row of the gallery.
power apps gallery deletes an item
power apps gallery deletes an item
  • Select the icon and insert the below expression in the ‘OnSelect‘ property like below:
OnSelect = Remove(Product,Gal_Product.Selected)

Where,

  • Product – The name of the data source
  • Gal_Product – The name of the gallery
powerapps delete sharepoint list item from gallery
PowerApps delete SharePoint list items from the gallery

Save, publish, and preview the app for now. We can see the items will be removed once the icon is clicked from the gallery. For example, we will click on the trash icon that is presented on the Mouse.

delete sharepoint item in powerapps
Delete SharePoint item in powerapps

Also, we can see the item is deleted from the SharePoint list too.

delete selected item in gallery powerapps
delete a selected item in gallery powerapps

This is how to delete a selected item in gallery powerapps.

Power Apps gallery removes items from a collection

In this section, we’ll look at how to remove an item from the Power Apps gallery collection. The item will be removed from the Power Apps gallery but not from the SharePoint list or any data source using this method. To do this, the following steps are:

  • Here we are going to use the previous Power Apps gallery control that contains the ‘Voters list’.
powerapps gallery remove item
powerapps gallery remove the item
  • Navigate to that Power Apps screen where the gallery is created. In the ‘OnVisible’ property of the screen insert the below expression.
OnVisible = Collect(VotersDetails, 'Voters list')

Where,

  • VotersDetails – The name of the collection name
  • Voters list – The name of the SharePoint list
powerapps remove gallery item from collection
powerapps remove gallery items from the collection
  • Select the gallery and set the collection name i.e. VotersDetails in the ‘Items‘ property of the gallery.
Items = VotersDetails
Remove powerapps gallery item from collection
Remove powerapps gallery item from a collection
  • Add a ‘Trash‘ icon to the gallery. It will be displayed in each row.
  • On the ‘OnSelect‘ property of the trash icon, place the below expression.
OnSelect = Remove(VotersDetails,ThisItem)
Remove collect items from gallery powerapps
Remove collect items from gallery powerapps
  • Let’s save, publish, and preview the app. We can see when we clicked the icon, the respective item will be removed only from the gallery. Let’s remove an item i.e. Krish from the gallery.
Power Apps delete items from gallery collection
Power Apps delete items from the gallery collection

We can see that the item has been removed from the gallery, but it remains in the data source.

power apps gallery delete an item from collection not datasource
power apps gallery deletes an item from the collection, not a data source

This is how to delete an item from the collection, not from the data source using the power apps gallery.

Check: SharePoint PowerApps Example – Get bank branch details based on State

Power Apps gallery user photo

Here, we will see how to display the user photo on the Power Apps gallery. Suppose, we have a SharePoint list ‘Employees‘ having a people column i.e. EmployeeName.

power apps gallery user photo
power apps gallery user photo

Let’s use the above SharePoint list to create a gallery in Power Apps. Here, we’ll use the gallery layout shown below:

power apps gallery display user photo
power apps gallery display user photo

But it is not showing the user’s image. To display the user’s images in the Power Apps gallery, the following steps are:

  • On the Power Apps gallery, select the ‘Image‘ control from the tree view (On the left-side panel). We have renamed it to ‘Img_Employee
  • Insert the below expression in the ‘Image’ property of the ‘Image‘ control.
Image = ThisItem.EmployeeName.Picture

Where EmployeeName is the name of the SharePoint people column.

That’s it. Save and publish the app. Then preview or play the app. Now we can see the user’s image in the Power Apps gallery control.

powerapps gallery user image
Powerapps gallery user image

This is how to display the user image on the Power Apps gallery.

Power Apps gallery default or default selected item

Here, we will see how to make an item default or default selected item in the Power Apps gallery. For example, we have prepared a Power Apps gallery using the ‘Product‘ SharePoint list, that shows only the title of the products.

power apps gallery default
power apps gallery default

From the above gallery, we want to make one item a default item. Suppose we want to make the item ‘Tablet‘ as our default selected item.

That means, when we open the app, it will recognize the ‘Tablet‘ as the default item. To do this, the following steps are:

  • Select the gallery, and set the below expression in the ‘Default‘ property.
Default = LookUp(Product, Title = "Tablet")

Where,

  • Product – The name of the data source
  • Title – The name of the SharePoint list
power apps gallery default selected item
power apps gallery default selected item
  • Next, insert the below expression in the ‘TemplateFill‘ property of the Gallery.
TemplateFill = If(ThisItem.IsSelected, LightBlue, LightGray)

Let’s save, publish, and preview the app. We can see by default it selected the item ‘Tablet’, while we open the app.

power apps gallery selected default item
power apps gallery selected default item

This is how to make any particular item as the default selected item in the Power Apps gallery.

Read: PowerApps Example – Create a Bank Account Statement

Power Apps gallery default select first item

Similarly, here we will see how to make the first item as the default selected item in the Power Apps gallery.

Let’s take the previous gallery that contains the ‘Product‘ list. In that gallery, the first item is ‘Laptop‘. To make the first item as default selected item, the following steps are:

  • Select the gallery and insert the below expression in the ‘Default‘ properties of the gallery.
Default = first(Product)

Where Product is the name of the data source.

  • Similarly, set the below formula in the ‘TemplateFill‘ properties of the gallery.
TemplateFill = If(ThisItem.IsSelected, LightBlue, LightGray)

Save and publish the app now. When we reopen the app, we can see that it recognizes the first item as the default selected item, as shown below.

power apps gallery default select first item
power apps gallery default select first item

This is how to set the first item as the default selected item on the Power Apps gallery.

power apps gallery items count or row count

In this section, we will see how to get the total items to count present in the entire Power Apps gallery. Let’s take the above gallery to implement this prerequisite and the following steps are:

  • Add a label input to the screen and place it near the gallery.
  • Select the label and insert the below formula in the ‘Text‘ property of the label input.
Text = "The total number of items is - " & CountRows(Gal_Product.AllItems)

Where Gal_Product is the name of the gallery.

Let’s save, publish, and preview the app. We can see it is showing the total count of the gallery’s items.

power apps gallery items count
power apps gallery items count

This is how to show the items count in the Power Apps gallery.

Power Apps gallery countif

Here, we will see how to work with the ‘CountIf’ function in the Power Apps gallery. The CountIf() function is used to evaluate the number of records in a table that satisfies a logical formula.

The syntax for the CountIf() is:

CountIf() = [<Table>, <Logical Formula>]

Now, we will implement this function in our Power Apps gallery (the above gallery). We are going to evaluate the total number of a specific item (Ex- Laptop) from the entire gallery. To do this, the following steps are:

  • Add a label input to the Power Apps screen and place it near the gallery.
  • Insert the below expression in the ‘Text‘ property of the label input.
Text = "The total number of Laptop is - " & CountIf(Gal_Product.AllItems, Title = "Laptop")
power apps gallery countif
power apps gallery countif

This is how to use the CountIf() in the Power Apps gallery.

Power Apps Gallery Hyperlink

Here, we will see how to work with the hyperlink within the Powe Apps gallery control.

Assume we have a SharePoint list of ‘Courses‘ with two single-line text columns. One contains the name of the course, while the other contains the URL of the respective course.

power apps gallery hyperlink
power apps gallery hyperlink

Next, build a vertical gallery on the Power Apps using the above SharePoint list, that shows only the course’s title show as below:

powerapps gallery hyperlink
powerapps gallery hyperlink

Now, we will make this gallery clickable. That means when the user clicks on any items it will redirect to the respective websites. We can make this gallery dynamic in 2 ways such as:

Method-1: Make the label/title clickable

When a user clicks on any of the course’s items or titles, they are redirected to the URL of the corresponding website. To work with this method, the following steps are:

  • On the gallery, select the label that shows the title of the course.
  • Insert the below expression on the ‘OnSelect‘ property of the label.
OnSelecct = Launch(ThisItem.Websites)

Where Websites is the name of the Sharepoint column name.

Applying Hyperlink to Gallery Label in Power Apps
Applying Hyperlink to Gallery Label in Power Apps

Save, publish, and run the app in preview mode. We can see that when we click on any of the gallery items, it will redirect to the respective websites, with the exception of ‘Reactjs,’ which has no websites.

This is how to create a hyperlink on the Power Apps gallery label control.

Method-2: Add buttons to create hyperlinks on the gallery

In this section, we’ll look at how to make hyperlinks in the Power Apps gallery using buttons. Also, if the website is present, a button to click will be displayed; otherwise, the button will be hidden.

To do this, the following steps are:

  • Add a button to the Power Apps gallery. It will display on each row.
  • Select the button and inject the below expression into the button’s ‘Visible‘ property.
Visible = If(IsBlank(ThisItem.Websites),false,true)
powerapps gallery item hyperlink
powerapps gallery item hyperlink

We can see, that there is no button in the ‘Reactjs‘ as there are no websites in the SharePoint list. If the user clicks on any button the respective link will be open. This is how to make hyperlinks on the Power Apps gallery.

Power Apps vertical gallery with Horizontal scroll bar

Here, we will see how to work with a horizontal scroll bar within a Power Apps vertical gallery. We are going to use the Sharepoint ‘Product’ list as the data source in the Vertical gallery. To execute this, the following steps are:

  • On the Power Apps screen, add a horizontal container. To add this, go to the ‘Add control’ (+)or ‘Insert’ (on the left-side panel) > Layouts > Horizontal container > Select.
Power Apps gallery Horizontal scrollbar
Power Apps gallery Horizontal scrollbar
  • Next, we will insert a normal container within the horizontal container. To do this, select the horizontal container and add the normal container into it.
Working with horizontal scrollbar within thePower Apps vertical gallery
Working with a horizontal scrollbar within the power Apps vertical gallery
  • Now we will add a vertical gallery inside the normal container as well as add a data source to it i.e. SharePoint ‘Product‘ list. Select the normal container > Insert tab > Gallery > Vertical gallery.
horizontal scrollbar within the power Apps vertical gallery
Horizontal scrollbar within the power Apps vertical gallery
  • Select the gallery, and choose the layout as ‘Image, title, subtitle, and body. Because this will need to be changed in order to display multiple columns (in tabular format). Also, remove the ‘Next‘ icon from the gallery.
  • Add several label controls to the gallery to show the other fields of the list. It will display shown as below:
Power Apps vertical gallery scroll bar horizontal
Power Apps vertical gallery scroll bar horizontal
  • Now we will adjust the normal container width to the gallery’s width. Select the normal container and insert the below expression in the ‘LayoutMinWidth‘ property.
LayoutMinWidth = Product_Gal.Width

Where Product_Gal is the name of the gallery.

Vertical gallery with a horizontal scroll bar in Power Apps
Vertical gallery with a horizontal scroll bar in Power Apps
  • Make sure to choose the ‘Align in Container‘ as custom in the normal container. (On the right-side properties panel).
  • Resize the gallery’s height, so that we can add a header to the gallery. Select the normal container(i.e. Container2 in our case), add a rectangle to it, and place it above the gallery.
  • Add label controls to the rectangle to display the item headers like Image, Name, Order Date, Price, Parent Company, and delivered.
powerapps add horizontal scroll bar to gallery
powerapps add horizontal scroll bar to gallery
  • Now, set the size in the horizontal container as per your choice. Select the horizontal container and give a value to the size (for ex- 550 in our case) in the right-side properties panel.
Add horizontal scroll bar to a vertical gallery in Power Apps
Add a horizontal scroll bar to a vertical gallery in Power Apps
  • On that properties panel, set the ‘Horizontal Overflow‘ as scroll from the drop-down option.
Vertical gallery with a horizontal scroll bar in powerapps
Vertical gallery with a horizontal scroll bar in powerapps

That’s it. Let’s save, publish and play the app. We can see a horizontal scrollbar will be visible in the vertical gallery.

Power Apps horizontal scroll bar in the vertical gallery
Power Apps horizontal scroll bar in the vertical gallery

Scroll that horizontal bar, we can see the rest data below:

powerapps vertical gallery show a horizontal scroll bar
powerapps vertical gallery shows a horizontal scroll bar

This is how to work with a horizontal scroll bar within a vertical gallery in the Power Apps.

Check: How to create a custom calendar in PowerApps

power apps gallery dynamic or auto Height

In this section, we will see how to customize the height of the Power Apps gallery. That means the height of the gallery will be changed as per the item contained.

As per our requirement, if the data source only has two records, the gallery height will only show two items; if it has four records, the gallery will display four items.

Suppose, we have prepared a gallery that contains the ‘Voters list’ SharePoint list.

power apps gallery auto height
power apps gallery auto height

But we want instead of a vertical scroll bar, it will show all the items at a time within the gallery. To do this, the following steps are:

  • Select the gallery.
  • Insert the below expression in the ‘Height’ property of the gallery.
Height = (Self.TemplateHeight + Self.TemplatePadding) * CountRows(Self.AllItems)
  • Save, publish and play the app. We can see the height of the gallery has been changed shown as below:
power apps gallery dynamic height
power apps gallery dynamic height

This is how to set the dynamic height in the Power Apps gallery.

power apps gallery numbering

In this section, we’ll look at how to number the items in the Power Apps gallery. Assume we want to use a SharePoint list from the Power Apps gallery.

power apps gallery numbering
power apps gallery numbering

In the SharePoint list, there is a default column ‘ID’ that gives a unique identifier number to each item. Here we will show this ID for the gallery’s items. To do this, the following steps are:

  • Select the Power Apps gallery.
  • Insert a ‘Label‘ control to the gallery.
  • In the ‘Text‘ property of the gallery, insert the below expression:
Text = ThisItem.ID

Here, the ID is the default column that comes from the SharePoint list. Once we insert the above expression, we can see the item’s ID will be displayed like below.

power apps gallery numbering items
power apps gallery numbering items

This is how we can number the items within the Power Apps gallery.

Power Apps gallery row number

Here, we will see how to get the row number for each row in the Power Apps gallery. Each row number will come out like 1,2,3, etc. That means it is an automatically generated number that will be displayed in the gallery shown below:

power apps gallery row number
power apps gallery row number

To do this, the following steps are:

  • On the Power Apps screen (where the gallery is placed), insert the below expression in the ‘OnVisible’ property.
OnVisible = Clear(colNumber);
ForAll(
    Product,
    Collect(
        colNumber,
        Last(
            FirstN(
                AddColumns(
                    Product,
                    "RowIndex",
                    CountRows(colNumber) + 1
                ),
                CountRows(colNumber) + 1
            )
        )
    )
)

Where,

  • colNumber – The name of the new collection name
  • Product – The name of the data source
  • RowIndex – The new column that is added to specify the automatically generated number
Row numbers in Power Apps gallery
Row numbers in the Power Apps gallery
  • Select the gallery, and set the collection name in the ‘Items’ property.
Items = colNumber 
How to give gallery row number in Power Apps
How to give gallery row number in Power Apps
  • Select the gallery and Insert a ‘Label’ control to the gallery.
  • Select the label control and insert the below expression inside the ‘Text’ property of the label control.
Text = ThisItem.RowIndex

Save and publish the app. Then click on the ‘Play‘ button. We can see the row number will be visible on the Power Apps gallery.

Generating Row Numbers in the Power Apps gallery
Generating Row Numbers in the Power Apps gallery

This is how to generate row numbers in the Power Apps gallery.

Power Apps gallery grid view

Here, we will see how to create a grid view on a sample gallery. Suppose we have created a Power Apps gallery using a SharePoint list and we want to convert this simple gallery to a grid view that shows below:

power apps gallery grid view
Power apps gallery grid view

To create a grid view on a simple gallery, the following steps are:

  • On the Power Apps gallery, select the label that contains the ‘Title’ of the product.
  • Give a border to that label on the ‘Properties panel’.
  • Similarly, give borders to the rest labels such as Order date and parent company. Now, the gallery will look like the below:
How to Create PowerApps GridView on gallery
How to Create Power Apps GridView on gallery
  • Now, resize the labels’ position on the gallery. So that the labels will come closer.
Converting gallery items to a grid view in Power Apps
Converting gallery items to a grid view in Power Apps
  • Now, we will resize the template’s height and width. And the gallery will appear with a grid view.
Create Grid View In PowerApps Using Blank Gallery Control
Create Grid View In PowerApps Using Gallery Control

This is how to create a grid view in Power Apps using a gallery control.

Power Apps gallery reset

We’ll look at how to reset a gallery in Power Apps. Assume that when we select any item inside the gallery, the image of that item is displayed. When we click the ‘Reset’ button or icon, the gallery is reset and no images are displayed.

To implement this requirement, we are going to use the previous SharePoint list ‘Product‘, which has an ‘Image‘ column. We have prepared a vertical gallery on Power Apps that shows the item’s title and order date.

power apps gallery reset
power apps gallery reset
  • Next, we will add an image control to the screen. To do this, go to the Insert tab > Media > Image. It will appear with a sample image.
power apps reset gallery
power apps reset the gallery
  • Select the image control, and insert the below expression inside the ‘Image’ property of the Image control.
Image = Gallery_Product.Selected.Image

Where,

  • Gallery_Product – The name of the gallery.
  • Image – The name of the SharePoint list’s image column

It will show the image of the gallery’s first item.

Power Apps reset the vertical gallery
Power Apps reset the vertical gallery
  • Similarly, add a ‘Label’ control to the screen that will show the selected item’s title.
  • Select the ‘Label’, and insert the below expression inside the ‘Text’ properties of the label.
Text = Gallery_Product.Selected.Title
  • Now, we will add a ‘Reset‘ icon from the ‘Icons’ tab and place it on the screen’s header. Go to the ‘Insert‘ tab > Icons > Reset.
  • Select the icon and insert the below formula inside the ‘OnSelect‘ property of the icon. When we will click on the icon, it will reset the gallery selection.
OnSelect = Reset(Gallery_Product);
How to reset a gallery on Power Apps
How to reset a gallery on Power Apps
  • Finally, select the gallery, and in the ‘default’ property insert the below expression.
Default = {}

The above formula set the gallery’s default item as blank. That means once the formula is applied to the gallery, it will show blank if any of the items are not selected. Or, when we click on the reset icon it will appear as blank.

Let’s save, publish, and play the app. Suppose we will selected any item and it will appear on the screen with the respective item’s image as well as the title. Suppose we have selected the fourth item i.e., Mouse

Power Apps Reset a Gallery
Power Apps Reset a Gallery

Once we clicked on the reset icon, the galley will be reset and nothing will appear on the screen except the gallery.

How to reset a gallery on PowerApps
How to reset a gallery on PowerApps

This is how to reset a gallery on PowerApps.

Power Apps gallery items height

Here, we will see how to set the height of the gallery item. Suppose, we have a Power Apps gallery that is attached with a SharePoint list.

power apps gallery items height
power apps gallery items height

To change the item’s height within the gallery, the following steps are:

  • Select the template inside the gallery.
  • Resize the template’s height and width on the properties panel.
power apps gallery resize items height
power apps gallery resize items height
  • Next, select the item’s title or date and resize its height in the properties. Also, you can customize the font size. It will appear as bigger than before.
power apps set gallery items height
Power Apps set gallery item’s height

This is how you customize the gallery’s item height in Power Apps.

Power Apps gallery navigation step or next arrow

Here, we will see how to navigation step or the next arrow work in the Power Apps gallery control. Suppose, we have created a SharePoint gallery using the SharePoint ‘Product‘ list. We can find a ‘Next‘ arrow icon that is used to navigate to another screen.

power apps gallery next arrow
power apps gallery next arrow

There is a requirement that when the user clicks on the ‘Next‘ icon, the product details appear on another screen. However, for clarity, we will display the selected item on the same screen. You can use a different screen instead of the one described below by following the same steps.

  • On the Power Apps screen, adjust the width so that we can show the selected item’s details on that screen.
  • On another part of that screen add a vertical blank gallery and insert a display form under the Forms tab. Now, the screen will look like the below:
power apps gallery navigation step
power apps gallery navigation step
  • Next, select the ‘Next’ arrow and insert the below expression within the ‘OnSelect’ property.
OnSelect = Navigate(Screen_Products, ScreenTransition.Fade,{selectedId: Products_Gal.Selected.ID})

Where,

  • Screen_Products – The name of the Power Apps screen
  • Products_Gal – The name of the gallery
  • ScreenTranisition.Fade – The argument of the screen transition
  • ID– The id of the selected item
  • selectedID – The name of the context argument
power apps gallery navigate to detail screen
power apps gallery navigate to the details screen
  • Similarly, insert the below formula on the ‘Item’ property of the ‘Display Form’.
Item = First(Filter(Product, ID = selectedId))

Where,

  • Product – The name of the data source
  • selectedID – The name of the context
How to move to next details screens on Power Apps gallery
How to move to the next details screens on the Power Apps gallery

That’s it! Let’s save, publish, and preview the app. We can see when we click on the ‘Next’ icon from any items in the gallery, it will display the item’s details on the display form.

powerapps gallery next icon
powerapps gallery next icon

This is how to work with the next arrow or navigation step in the Power Apps gallery.

Power Apps move from gallery to edit form

Here, we will how to work with the Power Apps edit form or how to move from gallery to edit form and modify the existing data. That means when the user clicks on any Power Apps gallery’s item, it will open with an edit form from where the user can edit the data and save it to the gallery.

For this, we are going to follow the above steps with little modification.

  • Here we have created a vertical gallery using the SharePoint ‘Product‘ list that contains the layout of the Item’s title and the order date.
  • On that same screen, we have added an ‘edit form‘. Then the screen will appear like below:
power apps gallery edit form
power apps gallery edit form
  • On the above screen, we have added 2 labels for the gallery and the edit form as headers.
  • Select the ‘Next’ icon on the gallery and insert the below expression on the ‘OnSelect’ property.
OnSelect = Navigate(Product_Screen, ScreenTransition.Fade,{selectedItem: Gal_Products.Selected.ID})

Where,

  • Product_Screen – The name of the Power Apps screen
  • Gal_Products – The name of the gallery
  • ScreenTranisition.Fade – The argument of the screen transition
  • ID– The id of the selected item
  • selectedItem – The name of the context argument
power apps gallery to edit form
power apps gallery to edit form
  • Next, select the edit form and insert the below formula inside the ‘Item’ property.
Item = First(Filter(Product,ID = selectedItem))

Where Product is the name of the data source.

power apps gallery edit
power apps gallery edit
  • Add a button to the form and rename it as ‘Save’.
  • On the button’s ‘OnSelect’ property, insert the below expression.
OnSelect = SubmitForm('Edit Form'); ResetForm('Edit Form');
power apps gallery with form
power apps gallery with form

Where Edit Form is the name of the form.

Now, save, publish, and preview the app. Let’s select any item from the gallery. We can see the item will reflect on the edit form where we can edit or modify the item. Once we click on the save button the modified data will display in the gallery.

Suppose, we selected the item i.e., Tablet, and modify the order date from 7/6/2022 to 18/6/2022.

How to work with power apps gallery with form
How to work with power apps gallery with form

Once we click on the ‘Save‘ button, the data got modified in the Power Apps gallery.

Move power apps gallery to edit form
Move power apps gallery to edit form

This is how to move the power apps gallery to edit form.

Power Apps gallery OnSelect

Here, we will see how to work with the ‘OnSelect‘ properties within the Power Gallery.

  • Generally, when we insert a button into a gallery, the ‘OnSelect‘ property of the button input is automatically set to ‘Select (Parent)’. However, we do not want a button in every row of the vertical gallery.
  • Instead, we want the user to click the gallery row, then a button outside the gallery to activate the OnSelect functions.
  • When a user selects an item from the gallery and taps the button on the first screen, it will navigate to the second screen, where an edit form will help to display all of the details of the selected gallery item from the first screen. To do so, follow the steps below.
  • On the Power Apps Screen (First screen), we have created a Gallery that displays the data from one of the SharePoint list i.e. Vehicles.
power apps gallery OnSelect
power apps gallery OnSelect
  • From the above gallery, we have removed the ‘Next‘ icon.
  • Add a new blank screen or a scrollable screen(the second screen)to the app and add an edit form to that screen. Attach that form to the SharePoint data source i.e. Vehicles.
power apps gallery OnSelect property
power apps gallery OnSelect property
  • Navigate to the first screen, which contains the gallery. Select the gallery and insert the below expression in the ‘TemplateFill‘ property.
TemplateFill = If(ThisItem.IsSelected,LightGreen)
  • As per the above formula, it will fill the selected template color as ‘Light green‘ on the gallery.
gallery OnSelect on Power Apps
gallery OnSelect on Power Apps
  • Add a button to that screen and place it beside the gallery. Rename the button as ‘See the Details‘. On the ‘OnSelect‘ property of the button
OnSelect = Navigate(
    EditScreen,
    ScreenTransition.Fade,
    {itemToEdit: Gallery_Vehicles.Selected}
);
EditForm(Edit_Form)

Where,

  • EditScreen – The name of the second screen
  • Gallery_Vehicles– The name of the gallery
  • Edit_Form – The name of the edit form
power apps gallery button OnSelect
power apps gallery button OnSelect
  • Next, in the second screen, select the edit form and insert the below expression in the ‘Item‘ property.
Item = itemToEdit
using onSelect in a Gallery on Power Apps
using onSelect in a Gallery on Power Apps
  • On that second screen, insert a ‘Back’ icon and place it inside the edit form. When the user clicks on that icon it will navigate to the first screen where the vehicles gallery is present.
OnSelect = Navigate(Gallery_Vehicles)
PowerApps gallery OnSelect
PowerApps gallery OnSelect
  • That’s It. Now save, publish, and play the app. Let’s select some items from the gallery. Suppose, we have selected the sixth item, i.e., Royal enfield. Then click on the button.
Perform OnSelect Operation on Power Apps Gallery Items
Perform OnSelect Operation on Power Apps Gallery Items

It will navigate to the second screen. It will show all the details of the selected item.

Select Item in Gallery OnSelect on Power Apps
Select Item in Gallery OnSelect on Power Apps

If you click on the back icon it will redirect to the gallery screen or first screen. This is a sample scenario of working with the OnSelect property within the Power Apps gallery.

Power Apps gallery template size

  • Template Size is a property of the Gallery control in PowerApps. It is the height of each item in a gallery when viewed vertically or the width of each item when viewed horizontally.
  • It lets us specify the width and height of each item within the gallery.
  • We have created a gallery using a Sharepoint list as our data source.
power apps gallery show template size
power apps gallery show template size
  • Inside the gallery, select the template. We can find the ‘template size‘ property within the ‘Properties‘ panel.
  • Because the gallery only displays the vehicle’s title, the template size is set to default. We can customize the template size as per our requirements.
power apps gallery template size
power apps gallery template size
  • Let’s increase the template size to 120. We can see the differences below.
Changing Gallery Template Size Property on Power Apps
Changing Gallery Template Size Property on Power Apps

This is how to change the gallery’s template size property on the Power Apps.

Power Apps gallery transition

  • Here, we will discuss transition effects on the Power Apps gallery. As we mentioned previously, it is a visual effect such as push, pop, or none when a user hovers over a gallery item.
  • By default, the Gallery Items are visually static and have no effect when you move your mouse over them. That means the transition effect is set to None by default.
  • To find the transition property, select the gallery and go to ‘transition’ on the left side properties panel.
power apps gallery transition
power apps gallery transition
  • We can see the 2 available options on the transition effect’s drop-down menu.
power apps gallery transition effects
power apps gallery transition effects
  • Select the Gallery, and then look for the Transition field on the right side properties panel, it will be set to None by default. Replace it with Pop.
power apps gallery transition Pop
Power apps gallery transition Pop
  • Let’s preview the app or click on F5. When we hover over the gallery’s items, we can see the pop effect below:
power apps gallery transition Pop
power apps gallery transition Pop
  • Similarly, replace the Pop to Push on the gallery’s transition effect. When we hover over the gallery items, we see the Push effect as shown below:
power apps gallery transition Push
power apps gallery transition Push

This is how the transition effects work in the Power Apps gallery.

Power Apps gallery loading spinner

Here we will see how to use a loading spinner within the Power Apps Gallery. Suppose a user selects an item from the gallery to display on the next screen’s form. Because the record takes time to load, the form screen does not appear immediately. In this case, we’ll load the data using a loading spinner and display the chosen item on the following screen. To work with this requirement, the following steps are:

  • On Power Apps, we have created a gallery using a SharePoint list i.e., Vehicles.
Use Loading spinner on Power Apps gallery
Use the loading spinner on the Power Apps gallery
  • When the user selects any item, it will display on the second screen where we have placed a display form to see the details of the selected item.
Loadaing spinner in Power Apps gallery
Loading spinner in Power Apps gallery
  • As per the requirement, when the user selects any item, it will take time to load the data. So we need to add a loading spinner to the first screen. For this, follow the below steps.
    • You can find and get different types of loading spinners from the Loading.io site. Navigate to that site.
    • Select any design for the loading spinner.
    • Choose a palette.
    • Customize the toggle from Transparent to ON and modify the Background to Transparent. Also, you can change the theme (ex. Attack On Titan).
Website to Get free loading spinner
Website to get free loading spinner
  • To download the spinner, select SVG format. Because SVG provides the best performance in Power Apps. So we recommend selecting that and then selecting ‘Animated‘ from the dropdown menu.
Download loading spinner to the system
Download loading spinner to the system
  • Now the loading spinner has been downloaded successfully to the local system. It’s time to upload this spinner to the Power Apps screen. For this,
    • On Power Apps, go to Media, which is present on the left side panel.
    • Click on Upload.
    • Upload the spinner from the local system.
Upload the loading spinner into the Power Apps
Upload the loading spinner into the Power Apps

Let’s use this spinner within the Power Apps and the following steps are:

  • On the Power Apps gallery, click on the ‘Next‘ icon and insert the below expressions in the ‘OnSelect‘ property of the gallery.
OnSelect = UpdateContext({ShowSpinner: true }); 
Set(varCurrentData,LookUp(Vehicles,ID=ThisItem.ID));Navigate('Screen Display');
UpdateContext({ShowSpinner: false });

According to the preceding expressions, when the user clicks on the icon, it will first display the spinner, then load the data, navigate to the display screen, and then remove the spinner from the screen.

Where,

  • ShowSpinner – The name of the update context variable.
  • VarCurrentData – The name of the selected Item variable.
  • Vehicles– The name of the data source.
  • Screen Display – The second screen where the display form is present.
Loading Spinner while gallery data items are retrieved
Loading Spinner while gallery data items are retrieved
  • Upload the downloaded spinner to the gallery.
  • Resize it and place it in the center of the gallery.
Power Apps gallery using loading spinner
Power Apps gallery using loading spinner
  • Add a label control to the screen that will cover the total screen. Remove the text from the label control.
  • Select the label and in the ‘Fill‘ property, insert the below code.
Fill = RGBA(0, 0, 0, 0.1)
Power Apps Loading Spinner in gallery
Power Apps Loading Spinner in gallery

Note – Make sure the label is on top of all the other controls to prevent the user from doing anything else.

  • Select both the loading spinner and the label control, and set the variable i.e. ShowSpinner in the Visible property.
How To Add Loading spinner In PowerApps gallery
How To Add Loading Spinner In PowerApps Gallery
  • That’s it! Now save, publish, and preview the app. Let’s click on the next icon of an item. We can see it will show a spinner to load the data and then show the details on the next screen.
Power Apps gallery using Loading spinner
Power Apps gallery using Loading spinner

This is how to use the loading spinner to navigate from one screen to another within the Power Apps gallery.

Power Apps gallery removes duplicates

Here, we will see how to remove duplicates or repetitive items from a Power Apps gallery. Let’s create a collection named “Courses” with some duplicate values. To create the collection, the following steps are:

  • On the Power Apps screen, insert the below expression in the ‘OnVisible‘ property.
OnVisible = Collect(Courses,{Name:"Power Apps",Price:15000},{Name:"Power Automate",Price:8000},{Name:"Power Apps",Price:15000},{Name:"Power BI",Price:12000},{Name:"Maria DB",Price:11000}, {Name:"SharePoint Online",Price:12500},{Name:"Power Apps",Price:15000},{Name:"Python",Price:15000},{Name:"Power Apps",Price:20000})

It will create a collection having 9 items. Where,

  • Courses – The name of the collection
  • Name & Price – The columns name of the collection
power apps gallery remove duplicates
power apps gallery removes duplicates

Let’s use this collection in a vertical gallery.

  • Insert a blank vertical gallery and in the ‘Items’ property set the collection name i.e., Courses.
  • Keep the layout as ‘Title and subtitle‘ for name and price respectively.
powerapps gallery remove duplicates
powerapps gallery remove duplicates

In the above gallery, there is an item called “Power Apps” that appears four times, but the price varies in one case, i.e., (Power Apps, 20000).

Now we will remove the other duplicate items from the above gallery. To do this, the following steps are:

  • Select the gallery.
  • On the ‘Items‘ property, insert the below formula.
Items = GroupBy(Courses,"Name","Price","CourseGroup")

Where CourseGroup– The name of the new group.

Remove Duplicates from Gallery on Power Apps
Remove Duplicates from Gallery on Power Apps

We can see that once the formula was applied to the gallery’s items property, it removed all the duplicate items. This is how to remove duplicates from the gallery on Power Apps.

Power Apps gallery distinct or unique value

Here we will see how to work with the distinct or unique values within the Power Apps gallery. Suppose, we have a SharePoint list named ‘Project’ having some random data.

power apps gallery unique values
power apps gallery unique values

Let’s use this above list within a Power Apps gallery.

power apps gallery distinct value
power apps gallery distinct value

However, we can see that some items in the Power Apps Gallery are repeated, and we want to keep only unique values. That means the items that are repeated should be removed from the gallery. To accomplish this, take the following steps:

  • Select the Power Apps gallery.
  • Insert the below expression within the ‘Items’ property of the gallery.
Items = Distinct(Projects, Title)

Where

  • Projects – The name of the data source
  • Title – The name of the SharePoint list
power apps gallery show distinct value
power apps gallery shows the distinct value
  • Select the label control that shows the title of the projects and set the below expression in the ‘Text’ property.
Text = ThisItem.Result
power apps gallery distinct values
power apps gallery distinct values

Now, save and publish the app. Then play it in preview mode. We can see it only show the unique values.

power apps gallery show unique values
power apps gallery shows unique values

This is how to work with distinct or unique values within the Power Apps gallery.

Power Apps gallery thisitem

In the Power Apps gallery, the term “thisitem” refers to the gallery’s current data structure. Suppose we have prepared a blank gallery that is connected to a SharePoint data source i.e. Vehicles.

power apps gallery thisitem
power apps gallery thisitem

In the above blank gallery, insert a label. We can see that, by default, it is showing the data of the current data source. In our case, it is showing the title of the vehicle.

ThisItem in Power Apps Gallery
ThisItem in Power Apps Gallery

Similarly, if we use another label control on the screen it is showing another data of data source. That means the ‘Thisitem‘ provides us with the records from the current data source. This is how the ‘Thisitem’ works in the Power Apps gallery.

Power Apps gallery blank or empty

Here we will see how to work with blank values or empty values within the Power Apps gallery. Suppose we have a SharePoint list named “Employees” with some random data and empty values shown below.

power apps gallery blank
power apps gallery blank

Let’s prepare a PowerApps gallery using the above SharePoint list.

power apps gallery empty
power apps gallery empty

Now we will remove all those records whose join date is missing or empty. To do this, in the ‘Items‘ property of the gallery, insert the below expression.

Items = Filter(Employees,!IsBlank(JoinDate))

Where

  • Employee – The name of the data source
  • JoinDate – The name of the column

Save, publish, and preview the app after applying the expression to the gallery’s Items property. We can see that it will hide items with no join date.

power apps gallery empty items
power apps gallery empty items

Similarly, if you want to show only those items whose join date has blank, then you can insert the below expression in the ‘Items’ property of the gallery.

Items = Filter(Employees,IsBlank(JoinDate))
power apps gallery show blank items
power apps gallery shows blank items

This is how to work with the empty values within the Power Apps gallery.

Power Apps gallery on hover

There is no simple straightforward way to configure a Hover colour for the gallery control.

To workaround on this we are going to use the previous Power Apps gallery and the following steps are:

  • On Power Apps gallery, insert a ‘Label‘ control.
  • Remove its text property.
  • On the ‘HoverFill‘ property set the below expression.
HoverFill = If(ThisItem.IsSelected, LightBlue, White)

As per the above expression, if the gallery’s item is selected then the hover color will ‘LightBlue’; otherwise, it will be white or transparent.

Note- To prevent the other functionalities, keep the label control at the bottom of all controls.

power apps gallery on hover
power apps gallery on hover

Now, save and publish the app. Play it on preview mode or press F5. Let’s select the 3rd item. We can see when we mouse hover on that, it will change the color like below:

power apps gallery change color on hover
power apps gallery changes color on hover

This is how to work with hover on the Power Apps gallery.

power apps gallery order by

Here, we will see how to work with ‘order by’ within the Power Apps gallery. That means sorting the gallery in ascending or descending order depending on the user’s preference.

Suppose, we have prepared a Power Apps gallery using a SharePoint list that shows only the title.

power apps gallery order by
power apps gallery order by

However, we want to sort the gallery by the Title column. To do this, insert the below expression on the ‘Items’ property of the gallery.

Items = SortByColumns(Projects,"Title")

Where,

  • Projects – The name of the Sharepoint list
  • Title – The name of the SharePoint column
power apps gallery orderby
power apps gallery orderby

We can see that all of the items have been sorted in ascending order within the Power Apps gallery. If you want to sort the items by descending order, then insert the below formula on the ‘Items‘ property.

Items = SortByColumns(Projects,"Title", Descending)

When we apply the formula to the ‘Items’ property, we can see that all of the items have been ordered in descending order.

power apps gallery order by or sort
power apps gallery order by or sort

This is how to order in the Power Apps gallery.

Power Apps gallery order by date

Similarly, we will see how to order the date field in ascending or descending order in this section. Assume we’ve created a Power Apps gallery using a SharePoint list called ‘Employees,’ which contains a date field called JoinDate.

power apps gallery order by date
power apps gallery order by date

Let’s sort the date field in descending order. To do this, insert the below expression on the ‘Items‘ property of the ‘Gallery‘.

Items = Sort(Employees, JoinDate, Descending)

Where,

  • Employees – The name of the data source
  • JoinDate – The name of the SharePoint column
Gallery order by date on power apps
Gallery Order by date on power apps

Now, we can see the date field appears in descending order in the Power Apps gallery. Similarly, you can replace the ‘Descending‘ with ‘Ascending‘ to set the date field in ascending order. This is how to do gallery Order by date on power apps.

Power Apps Gallery Attachments

Here, we will see how to work with attachments from the Power Apps gallery. Suppose, we have a SharePoint list named ‘Courses’ that contains an attachments column.

Power Apps Gallery Attachments
Power Apps Gallery Attachments

There is a requirement, that the user will store the attachments from the Power Apps gallery to the SharePoint list. To achieve this, the following steps are:

  • On the Power Apps screen, create a vertical gallery and use the above SharePoint list as the data source.
  • Set the gallery’s layout as ‘Title’ which means it only shows the course’s title on the Power Apps gallery like below:
Power Apps Gallery store Attachments
Power Apps Gallery store Attachments
  • Add an edit form to the screen and place it beside the gallery.
  • Set the data source as ‘Courses‘.
  • Select the form and set the ‘item‘ property as the below expression that will show the gallery’s selected item in the edit form.
Item = 'Courses Gallery'.Selected
  • where Courses Gallery is the name of the gallery.
add attachment control in Power Apps gallery
Add attachment control in the Power Apps gallery
  • On the edit form, select the attachment data card and unlock it.
  • Copy the ‘datacardvalue‘.
Power Apps Gallery of Attachments
Power Apps Gallery of Attachments
  • Paste it inside the gallery. So that it will appear on each row.
SharePoint list attachments with Power Apps
SharePoint list attachments with Power Apps
  • Select the attachment control from the gallery. And insert the below expression in the ‘Items‘ property of the attachment control.
Items = ThisItem.Attachments
  • Similarly, set the below expression in the ‘OnAddFile‘ property of the attachment control.
OnAddFile = ClearCollect(AttachmentsCollection,Self.Attachments); SubmitForm('Courses Form')

Where,

  • AttachmentCollection – The name of the new collection
  • Courses Form – The name of the edit form
Upload attachments in PowerApps Gallery
Upload attachments in PowerApps Gallery
  • Select the attachment control on the edit form and insert the collection name, i.e., AttachmentsCollection on the ‘Items’ property.
PowerApps Gallery of Attachments
PowerApps Gallery of Attachments
  • Set the toggle ‘Off‘ on the ‘Visible’ property of the edit form. So that only the gallery will be visible on the Power Apps screen.
  • That’s it! Now save, publish, and play the app in preview mode.
  • Click on any “attachment file” and insert an attachment within the item. Suppose, we will insert an attachment within the “SharePoint“.
Updating SharePoint List Via Power Apps With Attachment
Updating SharePoint List Via Power Apps With Attachment
  • Once it is uploaded, we can see it will store the attachment within the SharePoint list like below:
Power Apps galley with Attachments
Power Apps gallery with Attachments

This is how to store attachments from the Power Apps gallery in SharePoint.

Power Apps Gallery with multiple selections

Here, we ill see how to use multiple selections within the Power Apps gallery. There is currently no option in the gallery to select multiple items at once. Rather, we can use a variety of methods to accomplish this.

To meet this requirement, we can use the checkbox control from the Power Apps gallery. As a result, we can make multiple selections.

Suppose, we have a SharePoint list ‘Product‘ having some random data. Using that SharePoint list, we have prepared a Power Apps gallery like below.

power apps gallery with multiple selections
Power apps gallery with multiple selections
  • Let’s insert a ‘Check box‘ control within the Power Apps gallery. As a result, it will appear on each row of the gallery. Naviagte to the Insert tab > Input > Check box.
  • Remove the text from the check box an d keep only boxex.
  • Selct the check box and insert teh below formula within the ‘OnCheck‘ property.
OnCheck = Collect(ColTitle,ThisItem.Title)

Where,

  • ColTitle – The name of the new collection.
  • Title – Then column name of the SharePoint list.
gallery with multiple selections in Power Apps
Gallery with multiple selections in Power Apps
  • Similarly, insert the below expression in the ‘OnUncheck’ property of the check box control.
OnUncheck = Remove(ColTitle,{Value:ThisItem.Title})
power apps gallery with multiselecting
power apps gallery with multiselecting
  • On the above expression we have used Remove() that will remove the value from the collection. When the check box is unchecked, the title value that was added to the collection is removed.
  • Assume we want to see what happens to the collection when the user interacts with the checkboxes. To illustrate this, we’d like to insert a data table into Power Apps and place it next to the gallery.
  • To add the data table, click on the Insert tab > Data Table > Set the data source as the collection name i.e. ColTitle.
  • Select the data table > Properties > Edit fields > + Add field > select Value > Add.
  • Select the data table and set the item as per the below expression.
Items = ColTitle.Value
Multi selections on Power Apps gallery
Multi selections on Power Apps gallery

When we uncheck any items from the gallery, it will remove that from the data table. This is how to show and remove multiselecting from the Power Apps gallery.

Also, you may like the below Power Apps tutorials:

Conclusion

This Power Apps tutorial learnt us everything we needed to know about Power Apps gallery control. In addition, we have discussed examples with various scenarios below:

  • what is Power Apps gallery?
  • What are the types of the Power Apps gallery?
  • How to add a gallery control on Power Apps?
  • What are the properties of the Power Apps gallery?
  • What is the limitation of the Power apps gallery?
  • How to use the SharePoint data source in a Power Apps gallery?
  • What is the design ideas Power Apps gallery?
  • How to update the SharePoint list using a Power Apps gallery?
  • How to customize the background color of the Power Apps gallery?
  • What is the item limit in a Power Apps gallery?
  • How to customize the Power Apps gallery border?
  • How to hide a row in the Power Apps gallery?
  • What is the Power Apps gallery layout?
  • How to do the Power Apps gallery filter?
  • How does Power Apps gallery wrap count?
  • How does Power Apps Gallery dynamic Wrap count?
  • How to set a Power Apps gallery border between items?
  • How does the Power Apps gallery refresh with a button?
  • How does the Power Apps gallery refresh on the page visible?
  • How to Power Apps gallery refresh using a timer or automatically?
  • How does the Power Apps gallery delete an item?
  • How to remove an item from the Power Apps gallery collection?
  • How to display the Power Apps gallery user photo?
  • How to set the Power Apps gallery default or default selected item?
  • How to set the default select first item in the Power Apps gallery?
  • Evaluate the Power Apps gallery items count or row count?
  • How to use the countIf() in the Power Apps gallery?
  • How to make hyperlinks on the Power Apps gallery?
  • How to work with a vertical gallery with a horizontal scroll bar on the Power Apps?
  • How to create a power apps gallery from a collection?
  • How to add a header row in the Power Apps gallery?
  • How to set the dynamic height in the Power Apps gallery?
  • How do powerapps gallery items number items?
  • How to generate row numbers in the Power Apps gallery?
  • How to create a grid view in Power Apps using a gallery control?
  • How to reset a galley in Power Apps?
  • How to work with the Power Apps gallery’s item height?
  • How to work with the power apps gallery to navigate to the detail screen?
  • How to work with the power apps gallery with an edit form?
  • How to do a power apps gallery with the OnSelect property?
  • How to customize the template size within the Power Apps Gallery?
  • What is the transition effect and how do we work with it in the Power Apps gallery?
  • How to add a loading spinner within the Power Apps gallery?
  • How to remove duplicates from a collection via the Power Apps gallery?
  • What is thisitem in the Power Apps gallery?
  • How to show or hide the empty values within the Power Apps gallery?
  • How to work with distinct or unique values within the Power Apps gallery?
  • How to work with the Yes/No column within the Power Apps gallery?
  • How to work with the person field within the Power Apps gallery?
  • How to do power apps gallery on hover?
  • How do order by power apps gallery?
  • How do order by date in the power apps gallery?
  • How to upload the attachments from the Power Apps Gallery?
  • How to work with multiple selecting items within the Power Apps Gallery?
  • 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.

  • >