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.

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.

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.

Properties	Definitions
Default	The item or record from the data source will be displayed in the gallery when the app launches.
Items	The data source that appears in a control such as a gallery, list, or chart.
Selected	It displays the selected item
AllItems	All gallery items, including additional control values from the gallery’s template.
BorderColor	The border color of a control.
BorderStyle	It shows whether the border of a control is Solid, Dashed, Dotted, or None.
BorderThickness	The border thickness of a control.
DisplayMode	Whether the control accepts user input (Edit), displays data only (View), or is disabled (Disabled).
Fill	A 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.
LoadingSpinnerColor	The loading spinner’s fill color. The default value is BorderColor.
NavigationStep	It 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.
Selectable	Whether 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.
Transition	When a user hovers over an item in a gallery, the visual effect (Pop, Push, or None) is applied.
TamplateFill	The color of a gallery’s background.
WrapCount	The number of items displayed per row or column depends on whether the layout is horizontal or vertical.
DelayItemLoading	Delay the loading of items (rows) until the screen has fully loaded.
Height	The distance between the top and bottom edges of control.
ItemAccessibleLabel	Each gallery item’s label for screen readers. Each item should be described.
TemplatePadding	The 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).

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.

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

We have prepared a gallery using the above SharePoint 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.

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.

Also, the item is updated in the SharePoint list i.e. Voters 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‘.

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

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.

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.

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.

• Now, the collection is created in the Power Apps. We can see the collection in the Collections section under the view tab.

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

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

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.

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

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.

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

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:

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)

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.

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:

• 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:

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

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

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

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

• Select the gallery, and set the below formula in the gallery’s Items property.

Items = Filter(Product,Delivered= false)

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.

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

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:

• 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

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

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.

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

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.

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

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.

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:

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:

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.

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)

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.

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

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.

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.

• 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

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.

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

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

• 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

• Select the gallery and set the collection name i.e. VotersDetails in the ‘Items‘ property of the gallery.

Items = VotersDetails

• 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)

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

We can see that the item has been removed from the gallery, but it remains in the 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.

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

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.

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.

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

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

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.

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.

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

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.

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

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.

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)

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.

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

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

• 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:

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

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

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

• On that properties panel, set the ‘Horizontal Overflow‘ as scroll from the drop-down option.

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

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

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.

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:

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.

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.

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:

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

• Select the gallery, and set the collection name in the ‘Items’ property.

Items = colNumber 

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

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:

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:

• Now, resize the labels’ position on the gallery. So that the labels will come closer.

• Now, we will resize the template’s height and width. And the gallery will appear with a grid view.

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.

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

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

• 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);

• 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

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

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.

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.

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

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.

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:

• 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

• 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

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.

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:

• 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

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

• 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');

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.

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

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.

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

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

• 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

• Next, in the second screen, select the edit form and insert the below expression in the ‘Item‘ property.

Item = itemToEdit

• 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)

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

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

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.

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

• Let’s increase the template size to 120. We can see the differences below.

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.

• We can see the 2 available options on the transition effect’s drop-down menu.

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

• Let’s preview the app or click on F5. When we hover over the gallery’s items, we can see the pop effect below:

• 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:

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.

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

• 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).

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

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

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.

• Upload the downloaded spinner to the gallery.
• Resize it and place it in the center of the gallery.

• 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)

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.

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

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

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.

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.

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.

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

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

• Select the label control that shows the title of the projects and set the below expression in the ‘Text’ property.

Text = ThisItem.Result

Now, save and publish the app. Then play it in preview mode. We can see it only show the 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.

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.

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.

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

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.

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))

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.

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:

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.

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

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.

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.

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

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.

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:

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

• On the edit form, select the attachment data card and unlock it.
• Copy the ‘datacardvalue‘.

• Paste it inside the gallery. So that it will appear on each row.

• 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

• Select the attachment control on the edit form and insert the collection name, i.e., AttachmentsCollection on the ‘Items’ property.

• 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“.

• Once it is uploaded, we can see it will store the attachment within the SharePoint list like below:

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.

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

• Similarly, insert the below expression in the ‘OnUncheck’ property of the check box control.

OnUncheck = Remove(ColTitle,{Value:ThisItem.Title})

• 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

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:

• Power Apps Drop down Control [With Various Examples]
• Create Login Page in PowerApps using SharePoint List
• PowerApps Chart Control – How to Use
• How to build multilingual apps in PowerApps
• Automatically scroll Gallery control in PowerApps

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?