Power Apps Gallery Control – Helpful tutorial

In this Power Apps tutorial, We will discuss what is Gallery control in Power Apps, What are the key properties of PowerApps gallery control, and how we can use it in a simple way.

Also, by taking some simple scenarios, We will cover these below topics:

• PowerApps gallery types or types of PowerApps gallery
• PowerApps gallery add new record
• PowerApps gallery item limit
• PowerApps gallery layout
• PowerApps gallery selected item Or PowerApps gallery default
• PowerApps gallery SharePoint list
• PowerApps gallery delete item
• PowerApps gallery table
• PowerApps gallery selected item navigate
• PowerApps gallery alternate row color
• PowerApps gallery selected item color
• PowerApps gallery all items
• PowerApps gallery attachments
• PowerApps gallery border
• PowerApps gallery button
• PowerApps gallery border between items
• PowerApps gallery blank
• PowerApps gallery bulk update
• PowerApps gallery checkbox selected
• PowerApps gallery count rows
• PowerApps gallery count
• PowerApps gallery change color on select
• PowerApps gallery collection
• PowerApps gallery default selected item
• PowerApps gallery distinct
• PowerApps gallery dropdown
• PowerApps gallery filter
• PowerApps gallery group by
• PowerApps gallery get row number
• PowerApps gallery hyperlink
• PowerApps gallery header row
• PowerApps gallery hide row
• PowerApps gallery increment number
• PowerApps gallery multiple data sources
• PowerApps gallery multi select
• PowerApps gallery order by date
• PowerApps gallery order by
• PowerApps gallery onselect
• PowerApps gallery radio button
• PowerApps gallery refresh

Power Apps Gallery Control

• PowerApps Gallery is a type of control that can display a set of records from a data source. In the gallery, each record holds multiple types of data. Also, it can contain other controls. Let’s take a simple example.
• Suppose you are using a gallery control to display multiple sales with each item showing Product Name, Product Price, and Product Quantity for each product.
• Within the Gallery control, each and every data field appears in a separate control. You can configure those PowerApps controls in its template. Inside the gallery, the template appears as the first item.
  • On the left edge of a Gallery control in horizontal/landscape orientation.
  • And at the top of a Gallery control in vertical/portrait orientation.

• If you will modify anything in the template, then the whole gallery will reflect.

Power Apps Gallery Control Properties

Below represents some of the important key properties of the PowerApps Gallery control. Such as:

1. Items = This specifies the source of data that appears in a control like a list, a gallery, or a chart.
2. Default = When the app starts up, it specifies the record from the data source to be selected in the gallery.
3. Selected = It defines the selected item.
4. AllItems = It defines all items in a gallery including the additional control values that are a part of the gallery’s template.
5. BorderColor = It provides the color of a control’s border.
6. DelayItemLoading = It specifies the delay loading of items (rows) until after the screen first loads.
7. DisplayMode = It defines whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
8. Fill = It specifies the background color of a control.
9. ItemAccessibleLabel = This defines the label of each gallery item for screen readers.It should describe what each item is.
10. LoadingSpinner (None, Controls or Data) = When it is None, then the spinner will not be shown. When it is Controls or Data, then the spinner will be shown when a render pass occurs that results in visible empty rows.
11. LoadingSpinnerColor = It specifies the fill color of the loading spinner. Default is set to BorderColor.
12. NavigationStep = If you will set the value as true, then the gallery scrolls so far and the user selects a navigation arrow at either end of that gallery.
13. Selectable = It defines whether the gallery items can be selected. When the user will set to true, screen readers identify the gallery as a selectable list. And you select an item by selecting it. When a user will set it to false, screen readers identify the gallery as a regular list, and selecting an item doesn’t select it.
14. ShowNavigation = It defines whether an arrow appears at each end of a gallery so that a user can scroll through the items in the gallery by selecting an arrow.
15. ShowScrollbar = It specifies whether a scrollbar appears when the user hovers over a gallery.
16. TemplateFill = It provides the background color of a gallery.
17. TemplateSize = It defines the height of the template for a gallery in vertical/portrait orientation. Or the width of the template for a gallery in horizontal/landscape orientation.
18. Transition = It represents the visual effect (Pop, Push, or None) when the user hovers over an item in a gallery.
19. Visible = It defines whether the control displays or is hidden.
20. WrapCount = It represents the number of items shown per row or column based on horizontal or vertical layout.

PowerApps gallery types

• There are total six different types of gallery control in PowerApps. Such as:

1. Vertical
2. Horizontal
3. Flexible height
4. Blank vertical
5. Blank horizontal
6. Blank flexible height

• To insert any kind of gallery in PowerApps, go to Insert tab -> Click on Gallery -> then you can choose your desired gallery from the gallery section as shown below.

PowerApps gallery add new record

Do you want to insert a new record in the PowerApps Gallery control? Check out the below example.

• Unfortunately, We can not add a new row or item to the PowerApps Gallery control. There is no such way to achieve this directly.
• But alternatively what we can do is, We will use the PowerApps Patch Function to the OnSelect property of the Button control.
• Here the Patch function will actually add a row to your Data Source. And once you will connect the Data source to the gallery control, then the row will automatically add to the gallery. Let’s do this.
• On the screen, I have a Gallery control where the records are retrieved from a SharePoint List called Products. The list contains some various fields with different Data types like:

1. Title = By default it is a Single line of text
2. Vendor = Choice Data type
3. Customer Name = Single line of text data type
4. Quantity = Number Data type
5. Price = Currency Data type
6. Comments = Multiple lines of text Data type

The SharePoint list looks like the below screenshot.

• The below represents the Power Apps gallery control and a Button input control (Create Item). The gallery contains the Title, Quantity, and Comments columns that are retrieved from the SharePoint list.
• The button helps you to create a new record into the SharePoint list once the user will click on it.

• Select the Button and apply this below formula on its OnSelect property as:

OnSelect = Patch(
    Products,
    Defaults(Products),
    {
        Title: "EarDope",
        Quantity: 5,
        Comments: "Nice Product"
    }
)

• Now Save and Preview the app. Tap on the Create Item button. Once you will click on it, a new record has been created in the list and as well as in the PowerApps Gallery control as shown below.
• If in case, the new record will not appear in the gallery control, then you need to refresh the SharePoint List data source. Then you can view the new row in the gallery.

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

PowerApps gallery item limit

• Whenever you are working with the Power Apps Gallery control, maybe a question that comes to your mind is, What is the limit of the item that can hold by the gallery?
• So coming to the answer to this question is, there is not really any limit imposed by the gallery, But there is a limit on how many items the user can retrieve at a time.
• For the Power Apps Gallery control, the default item limit is 500 and the maximum limit is 2000.
• Normally we need to filter the data source in some way to keep the items displayed in the gallery below those limits.

PowerApps gallery layout

in PowerApps, There are two different categories of Gallery Layout. Such as:

1. List:

If you will select List in the Gallery Layout section, then you can see there are a total of seven types of layouts:

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

2. Gallery:

Similarly, If you will select Gallery in the Gallery Layout section, then you can see there are a total of four types of layouts:

• 2 columns
• 3 columns
• Title and subtitle
• Title and subtitle on overlay

• If you will select All from the Gallery Layout section, then all the layouts (List and as well as Gallery) will appear at a time.

Example:

• Here we will discuss one example. Suppose you want to design the gallery on your own idea. That means, without using any layout template, you want to make it your own.
• In this case, you need to insert a Gallery control (you can take any gallery control) and then make the Layout as Blank.
• Once you will choose the Blank layout, then the gallery will appear as shown below. Next, add the SharePoint List name (Products) to its Items property.

• Next, Select the first section of the gallery control and insert a Label input. Select the label and set its Text property as:

Text = ThisItem.Title

Title is the SharePoint field name that I want to display in the label control. You can take any field inside the gallery.

• Again, I have taken a Dropdown control and set its Items property as:

Items = Choices(Products.Vendor).Value

Where,

1. Products = SharePoint List name
2. Vendor = Choice column

Check out the below PowerApps tutorials to work with Power Apps Dropdown Choice field:

Power Apps Dropdown Control – How to use

• In the same way, you can take any PowerApps Control and show the value in the gallery as per your need.

PowerApps gallery selected item Or PowerApps gallery default

In this topic, both the “PowerApps gallery selected item” and “PowerApps gallery default” are the same thing. Here we will see how we can set a Default value in the PowerApps Gallery control. Let’s take a simple scenario.

• The below screenshot represents a gallery control having some List item IDs. Now I would like to set its Default value as Item ID 2.
• So when the user will open the app, always he/she can view the gallery will appear with the default value is 2. Also, the default value will appear with a different highlighted color as shown below.

• You can see, the gallery is having the Items property that is connected to a SharePointPoint List named ‘Product Info‘.

Items = 'Product Info'

• Also, there is a Label control inside the gallery where its Text property is having value with its Item ID.

Text = ThisItem.ID

Where,

ID = SharePoint Column name

• Next, Select the Gallery control and set its Default property to the below code:

Default = LookUp(
    'Product Info',
    ID = 2
)

• At last, Select the TemplateFill property of the gallery and apply the below code:

TemplateFill = If(
    ThisItem.IsSelected,
    LightCoral,
    White
)

• To view the result, Save, Publish, and Close the app. When you will reopen the app again, you will see the gallery will appear with the default value as Item 2.

PowerApps gallery SharePoint list

Suppose you have a SharePoint List having various data types of fields. And next, do you want to display the SharePoint List item(s) in a PowerApps Gallery control?

Check out the below detailed PowerApps guide that how you can use a PowerApps gallery to display the SharePoint List items:

• Power Apps Display SharePoint List Items – 5 Ways

Example:

• Let us discuss a simple example. In this example, I want to update the SharePoint list item through the gallery control.
• In the below screenshot, you can see there is a SharePoint List named MarkSheet. This list has some columns with different data types as Title, Accountany etc.
• Among them, there is one Choice field called Status that specifies either a student is Pass or Fail.
• Now on the app, there is a gallery control where all the records are retrieved from the MarkSheet list. Also, there is a Dropdown control and a button input that are present inside the gallery.
• When a user will select the status from the dropdown control and tap on the Save button (actually it is a Save icon), then the specific record will update in the SharePoint List (MarkSheet).

For SharePoint Choice Field:

• To achieve this, Select the Save button and apply this below code on its OnSelect property as:

OnSelect = Patch(
    MarkSheet,
    Gallery4.Selected,
    {
        Status: {
            '@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedReference",
            Id: 1,
            Value: Dropdown2.Selected.Value
        }
    }
)

Where,

1. MarkSheet = SharePoint List Name where you want to update
2. Gallery4 = Gallery control name where all the records displays
3. Dropdown2 = Dropdown control name that is having all the SharePoint Choice field values

For SharePoint Single line of text Field:

• If the Status field is a Single line of text, then you can set this below code to Save button’s OnSelect property.

OnSelect = Patch(
MarkSheet, Gallery4.Selected,
{
Status: Dropdown2.Selected.Value
}
);

• At last, Save and Preview the app. Change the Status value of item (s) that you want and then hit the save button.
• Next, go to the existing SharePoint list, you can see the list has been updated to the dropdpwn selected value.

PowerApps gallery delete item

Suppose there is a Gallery control having with some records. Next, in case you want to delete or remove some of the unnecessary items from the gallery control (but not from any data source like SharePoint, Excel, etc.). To workaround with this, follow the below instructions.

• Below represents a SharePoint List named Travel Details having with different types of fields. Also, this list has some records and I want to remove the last two items from the gallery control (without effecting the list).

• In the app, I have created a Collection on the Screen’s OnVisible property i.e.

OnVisible = Collect(TravelCollection, 'Travel Details')

Where,

1. TravelCollection = Collection name
2. ‘Travel Details’ = SharePoint List name

• Now you will Save, Publish and close the app. When you will reopen the app again, then you can see the collection has been created in the app.
• Next, I have taken a Gallery control (Vertical) and set the created collection name (TravelCollection) to its Items property. You can see all the records in the gallery as shown below.
• You may think that how the below image appears when you are inserting the gallery. Its very simple, I have set the gallery Wrapcount property to 2. In the same way, you can increment the number in the wrapcount property to display the gallery wrap.
• Here, I would like to remove the last two items (Warner and Imran) that are present in the gallery control.

• To do so, I have added a Trash icon and applied the below formula on its OnSelect property as:

OnSelect = Remove(TravelCollection, ThisItem)

• That’s it. Save and Preview the app. Click on the Trash icon of the item that you want to remove from the gallery.
• Once you will click it, then it will delete from the gallery but not from the SharePoint list data source.
• One more thing, If you prefer to have one Delete button somewhere on your screen, you can just add a button, change the button text to “DELETE ITEM” and then set it’s OnSelect property to the below code:

OnSelect = Remove(
    TravelCollection,
    Gallery5.Selected
)

Where,

Gallery5 = Gallery control name

• One most important thing you need to ensure i.e. at a time, both the formulas (Trash icon and Button) will not work. You need to apply only one formula at a time.

• Save and Preview the app. Select any item from the gallery (that you want to delete) and tap on the delete button. Then the specific item will be deleted from the gallery control.

PowerApps gallery table

Do you know what does the means of a Gallery table are and how to create it in Power Apps? If no, then do not hesitate. Please go through the below Power Apps guide that is purely based on the gallery table:

• How to Create PowerApps GridView

PowerApps gallery selected item navigate

In this topic, We will see how to work with Power Apps gallery selected item navigate. Please check out the below forum link to understand easily:

• Work with PowerApps gallery selected item navigate

PowerApps gallery alternate row color

Do you worry about adding alternating row colors to Power Apps Gallery control? Do not worry, let’s do this. In this scenario, we will discuss how we can provide an alternate color to the PowerApps gallery.

• Below screenshot represents a PowerApps Gallery control where the records are retrieved from a SharePoint Document Library Data source.
• Next, I would like to view the gallery rows with an alternative colors. Actually there are many ways to achieve this. Here, I will discuss some of them that you may follow.

• To do such kind of things in the PowerApps Gallery, there is a property called TemplateFill. This property helps to set the background of each row in the gallery control.
• In case if you are using the Vertical gallery control, then the rows will become columns.

Example – 1:

• This is one of the ways to achieve that how we can provide the row color to the PowerApps Gallery control. Select the gallery and apply this below formula on its TemplateFill property as:

TemplateFill = RGBA(
    0,
    0,
    0,
    Mod(
        ThisItem.ID,
        2
    ) / 2
)

• The above formula specifies, when the remainder of the ID/2, then set the opacity to 0%, So the background will appear with White color.
• This thing will happen for all rows, where the ItemID is an even number.
• If the ItemID is odd number, then the remainder will be 1 with opacity 50%.

Example – 2:

• Similarly, there is another way where we can use the Power Apps If statement. Select the Gallery control and set this below code on its TemplateFill property as:

TemplateFill = If(
    Mod(
        ThisItem.ID,
        2
    ) = 0,
    LightGreen,
    LightGray
)

• The above code defines all the even number of rows will display with the light green color and all the odd number of rows will appear with the light grey color as shown in the below screenshot.

Example – 3:

Also, you can apply this below formula to Gallery’s TemplateFill property as:

TemplateFill = If(
    Mod(
        Value(ThisItem.ID),
        2
    ) = 0,
    Color!Aqua,
    Color!AliceBlue
)

Refer to the below screenshot.

PowerApps gallery selected item color

• Suppose there is a PowerApps Gallery control and you want to display an item with a specific color when a user will select on it. It is very simple to do.
• The below screenshot represents a Horizontal gallery control where all the items are retrieved from a SharePoint Document Library (Image Library).
• Here, I have set the Wrap count property to 2, thats why the gallery is appearing as like below.
• Next, When a user will select any particular item from the gallery, then that specific selected item will appear with the user provided color.

• To achieve this, Select the gallery and apply this below formula on its TemplateFill property as:

TemplateFill = If(
    ThisItem.Name = Gallery7.Selected.Name,
    Blue,
    Green
)

Where,

Gallery7 = Gallery control name

This is how we can work with PowerApps gallery selected item color.

PowerApps gallery all items

Do you want to work with PowerApps Gallery All items? Please check out the below PowerApps tutorial that how you can do it easily:

• PowerApps ForAll Function with examples

PowerApps gallery attachments

What are the Gallery attachments in Power Apps and how to use them smoothly in the app?

You can refer to the below-detailed guide to work with the Attachment Control in PowerApps:

• Use of Power Apps Attachment Control

• Many of the PowerApps users may think that, is there any way to use Attachment controls in a PowerApps Gallery control or simply, Do you want to add attachments through Gallery?
• Coming to the answer to this question is, Unfortunately there is no such way where we can add an attachment to the gallery control directly. But there is an alternative solution that we can refer.
• As there is no direct way to achieve this, so we can prefer a invisible PowerApps form to add an attachment to the gallery,
• In this scenario, I would like to save the gallery attachments in a SharePoint List (in the Attachments column). In the below screen, you can see the list (Book Details) that I have used here. Follow the further steps to do so:

Step – 1:

• At first, On the screen, Insert a Gallery control and as well as an Edit form side by side (like the below screenshot).
• Select the Edit form and apply the SharePoint list on the form’s DataSource property:

DataSource = 'Book Details'

Where,

‘Book Details’ = SharePoint List Name

• Also, Select the gallery and set its Items property to the SharePoint list as:

Items = 'Book Details'

Step – 2:

• Select the Edit form and set its Items property as:

Items = Gallery8.Selected

Where,

Gallery8 = Gallery control name that I have created

• Once you will apply the code, you can see the gallery selected record in the edit form as shown above.

Step – 3:

• Next, unlock the Attachment Data card from the Edit form. Copy the Attachment control and paste (ctrl+v) it into the gallery (in the first section).
• Once you will paste the attachment control, then automatically it will add to each record of the gallery.
• Select the gallery control from the gallery and apply the below code on its Items property as:

Items = ThisItem.Attachments

Step – 4:

• Select the OnAddFile property of the gallary attachment control and write the below formula:

OnAddFile = ClearCollect(
    ColAttach,
    Self.Attachments
);
SubmitForm(Form1);

Where,

1. ColAttach = Collection name
2. Form1 = Edit form name

Step – 5:

• Select the Attachment control from the Edit form and set the below code on its Items property as:

Items = ColAttach

Step – 6:

At last, Set the Edit Form’s Visible property to false.

Step – 7:

• Now save and preview the app. Attach some file(s) in the gallery item(s). Then go to your SharePoint Site and open the existing SharePoint List (Book Details).
• Select the item(s) and open the Details pane. Now you can view all the attachements or files (that you have uploaded in the app) in the SharePoint Attachments column as like the below screenshot.

This is how we can work with the PowerApps gallery attachments.

PowerApps gallery border

Suppose there is a PowerApps gallery control and you want to give some gap and border in between the items. The gallery will look something like the below screenshot.

• To workaround with this, We will use the TemplatePadding property of the gallery. Select this property and increase the number to 10.

TemplatePadding = 10

• Next, Select the Fill property of the gallery and provide a color to gallery that you want.

Fill = LightGoldenRodYellow

• Then, Select the TemplateFill property and provide other color as per your need.

TemplateFill = LightBlue

• Once you will apply all the formulas to all the above properties, then you can see the difference in the gallery control.

PowerApps gallery button

In this scenario, We will see how to work with a PowerApps Gallery control with a Button input control.

• Here in the app, there is a Horizontal Gallery control where all the items are retrieved from a Sharepoint Document Library.
• Also, there is a Button control named “Hit Me!” that is present outside of the gallery. Now what I would like to do is, When a user will click on the button, then the gallery will hide. Again, when the user will tap on the button, then again the gallery will appear and so on.

• At first, you need to apply the below code on Screen’s OnVisible property as:

OnVisible = Set(
    VarDispGallery,
    false
)

Where,

VarDispGallery = Variable name. You can provide any name here.

• Next, Select the gallery and set the variable on its Visible property as:

Visible = VarDispGallery

• And then, Click on the Button (Hit Me) and apply the below code on its OnSelect property as:

OnSelect = Set(
    VarDispGallery,
    !VarDispGallery
)

• Save and Preview the app. When you will hit the buuton, then the gallery will hide. Again it will appear when you will tap the button.

PowerApps gallery border between items

In this topic, We will see how to provide a border or separator between items in the Power Apps gallery control.

Example – 1: (Add Separator in a Blank Browse Gallery Control)

Suppose there is a Blank gallery control in the app. You want to provide a separator line between the records in the gallery that will look like the one below screenshot.

• To achieve this, first of all, select the edit pen icon in the blank gallery control and insert a Rectangle icon (Insert -> Icons -> Rectangle) as shown below.

• Next, Set the below properties of the Rectangle icon as:

Rectangle1.X: 2
Rectangle1.Y: Gallery12.TemplateHeight - Rectangle1.Height
Rectangle1.Width: Gallery12.TemplateWidth - 2 * Rectangle1.X
Rectangle1.Height: 2

Where,

1. Gallery12 = Gallery control name
2. Rectangle1 = Rectangle icon name

• Overall the above code specifies, it will insert a separator line on the bottom of each record in the gallery control.
• If you want to change the rectangle’s color, then in that case you can use the Border color and Fill color.
• Also, you can change the X and Height properties to change how the separator looks.

Example – 2: (Remove the Separator from the Gallery control)

• On the PowerApps screen, there is a gallery control. Here, I want to remove the separator line that is present at the bottom of every item. Actually, it is very simple and easy to do. Refer to the below screenshot to see the difference.

• To do so, Select the Gallery Separator from the Tree View -> Click on Elipses (…) -> Delete as like the below screenshot.

This is how we can work with the PowerApps gallery border between items.

PowerApps gallery blank

• Many of us (like PowerApps Beginners) what doing is, When we are creating a blank gallery control, however the data is not displaying as per the below screenshot.
• Even, when We are providing the data source, then also the records are not showing in the blank gallery as like the below screenshot.

• For this, choose Edit icon (pen icon) from the gallery and then we need to insert a Label control as like below.

• Next, you need to set the Label’s Text property with the related field name that you want to display as:

Text = ThisItem.Title

Where,

Title = SharePoint field name

• Not only the Label control, but also you can add any PowerApps control and display any data source field value in the blank gallery control. You can design the gallery as per your own choice.

PowerApps gallery bulk update

To update bulk records in PowerApps gallery, please check the below PowerApps tutorial:

• PowerApps gallery bulk update

PowerApps gallery checkbox selected

Do you want to work the PowerApps gallery with a Checkbox control? If yes, please go through the below PowerApps article that how you can use it easily.

• PowerApps CheckBox – How to use

PowerApps gallery count rows

Do you think that, Is there any way to count the rows in the current gallery view? Yes, you can count all the rows from the gallery by using the Power Apps CountRows function.

• Insert a Label control and apply the below code on its Text property as:

Text = "Total Number of Gallery Items: " & CountRows(Gallery11.AllItems)

Where,

1. “Total Number of Gallery Items: “ = This is the text that will appear in the label control
2. Gallery11 = Gallery control name

• To try out many more examples of PowerApps gallery count rows, check out the below PowerApps Tutorial: PowerApps CountRows function with Examples

PowerApps gallery count

Here we will see how to count gallery filtered items in PowerApps.

• In this scenario, there is a gallery control having with records that are retrieved from the SharePoint List (MarkSheet).
• Next, I want to count the total number of gallery rows that are having with Status as only Pass values.
• To do this, Add a Label control and apply the below code on its Text property as:

Text = "Total count of Pass Value: " & CountRows(
    Filter(
        Gallery14.AllItems,
        Status.Value = "Pass"
    )
)

Where,

1. Gallery14 = Gallery control name where all the data will filter
2. Status = SharePoint Choice field that are having pass values. As it is a choice column, so we need to set the field name with a “.Value“

• When you will save and preview the app. you can see the total number of gallery rows (only pass values) in the label control as shown above.

To learn more about the PowerApps Count function with various examples, you can refer to the below PowerApps tutorial:

• PowerApps Count Function with Examples

PowerApps gallery change color on select

• Here, both PowerApps gallery change color on select and PowerApps gallery selected item color are same thing. In both the cases, either you can use the TemplateFill or Fill property.
• Select the Gallery control and apply the below code on its TemplateFill property as:

TemplateFill = If(
    ThisItem.Title = Gallery15.Selected.Title,
    LightGreen,
    LightGray
)

1. Title = SharePoint Column name
2. Gallery15 = Gallery control name

• Save and Preview the app. Once you will select any record from the gallery, you can see that selected item will appear with the green color and unselected items will appear with the gray color.

PowerApps gallery collection

First of all, you should know what does the mean of PowerApps gallery collection is and what is the use of it?

Suppose you have a Power Apps Collection and you want to display all the collection records in a gallery control. Please refer to the below Power Apps tutorial that how you can use it in a simple way.

• PowerApps Collection – How to create and use

PowerApps gallery default selected item

In this topic, we will see how to work with PowerApps gallery default selected item.

• In the below screenshot, you can see the gallery control is having some items like POWERAPPS, POWER BI, POWER AUTOMATE. Now I would like to set the gallery’s Default to one record belongs the gallery’s Items table.

• To set the Default property of the Gallery control, you need to write the below code on Gallery’s Default property:

Default = {Value:"POWERAPPS"}

PowerApps gallery distinct

• Suppose in the app, you have a gallery control having with some duplicate values (that are retrieved from a SharePoint List). Now you want to remove all the duplicate values from the gallery and it will display only the unique values.
• For example, in the below gallery, there are some duplicate values like Laptop, SmartPhone, Tablet etc. Here, I want to delete all the duplicates and display all the unique values in the gallery as like the below screenshot.

• To achieve this, We will use PowerApps Distinct function. Select the Galery control and apply the below code on its Items property as:

Items = Distinct(Products, Title)

Where,

1. Products = SharePoint List name
2. Title = Specify the column where you want to eveluate the unique value. It is a Single line of text column

• Next, Select the Label control from the gallery and set its Text property as:

Text = ThisItem.Result

• If the SharePoint field is a Choice field, then you should try the below code:

Items = Distinct(Products, Status.Value)

Where,

Status = Choice field name

This is how we can work with PowerApps gallery distinct.

PowerApps gallery dropdown

Why do you worry about how to work with the gallery dropdown in PowerApps? On the site, there is a detailed tutorial that how a user can use a PowerApps gallery dropdown so easily. Go through the detailed guide with various examples: PowerApps Dropdown Gallery + Examples

PowerApps gallery filter

Do you want to filter the PowerApps Gallery control? If so, you can check out the below tutorial that is purely related to the PowerApps filter gallery. Also, there are various different types of examples that you can try out easily. Check out PowerApps Gallery Control Filter Example

PowerApps gallery group by

In this topic, We will see how to work the gallery control with the Power Apps GroupBy function. In this below scenario, create a gallery that will display some Data pulled from a Sharepoint list. I want the data to be grouped by the DisplayName of a person’s Field in that list.

• The SharePoint list that I will use is, SharePoint Project Expenses. This list has one People picker or Person field named Project Handler. I want to group this person field and all the names will appear in the PowerApps gallery control.

• To achieve this, Select the gallery and write the below formula on its Items property as:

Items = GroupBy(
    AddColumns(
        'SharePoint Project Expenses',
        "UserDisplayName",
        'Project Handler'.DisplayName
    ),
    "UserDisplayName",
    "GroupByUsersDisplayName"
)

Where,

“UserDisplayName” = New column name that you created by the PowerApps AddColumns function.

• Next, you need to select the Label control from the gallery and set its Text property as:

Text = ThisItem.UserDisplayName

• When you will save and preview the app, you can see all the user display names in the gallery control as shown above.

PowerApps gallery get row number

Next comes how we can get the row numbers in a PowerApps Gallery control.

• PowerApps gallery gets row number means, simply we can say it is an auto-generated number that will appear in the gallery.
• The number will come automatically that depends on the number of gallery items. Refer to the below screenshot.

• At first, in the app, write the below formula on Screen’s OnVisible property as:

OnVisible = Clear(colNumberedInvoices);
ForAll(
    'SharePoint Project Expenses',
    Collect(
        colNumberedInvoices,
        Last(
            FirstN(
                AddColumns(
                    'SharePoint Project Expenses',
                    "RowIndex",
                    CountRows(colNumberedInvoices) + 1
                ),
                CountRows(colNumberedInvoices) + 1
            )
        )
    )
)

Where,

1. ‘SharePoint Project Expenses’ = SharePoint List Name
2. colNumberedInvoices = Collection name
3. RowIndex = This is the new column that you have created to specify the autogenerated number

• At last, Insert a label control within the gallery and set its Text property to the below code:

Text = ThisItem.RowIndex

• Before applying the above formula, you must ensure that the gallery should contain the collection items. That means the gallery items property should have the created collection name i.e. colNumberedInvoices. Otherwise, an error will occur in the label control.

• To view the result, just save, publish and close the app. Once you will reopen the app, you can see the auto-generated number has appeared in the gallery control.

This is how to get row number in PowerApps gallery control.

PowerApps gallery hyperlink

• Many of us (maybe PowerApps beginners) do not know that how to give a hyperlink to the PowerApps Gallery control. Although it is very simple and easy.
• To provide any link to any item in PowerApps, we can use the Launch function.
• In the below screenshot, there are some items in the PowerApps gallery-like PowerApps, Python Guides, etc. Now I would like to provide a link to the PowerApps item. So that whenever I will select that item, it will directly navigate to that provided website.
• To do so, select the Label control inside the gallery and apply the below code on its OnSelect property as:

OnSelect = Launch("https://powerapps.microsoft.com/")

• Suppose, the text “powerapps.microsoft.com/” appears within the label’s Text, then you can use this below code instead:

OnSelect = Launch("https://" & Label8.Text)

Where,

Label8 = Label control name where the text appears

This is how we can work with the PowerApps gallery hyperlink.

PowerApps gallery header row

Do you want to create a Header row in the PowerApps gallery control? Follow these simple steps through the below tutorial: Create PowerApps gallery header

PowerApps gallery hide row

Can you ever imagine that we can hide an item or a row from the PowerApps gallery? Yes, of course, we can hide a row from gallery control. Let us take a simple scenario.

• Here, I am Building a project expenses application where users can log in and evaluate the Project Handler.
• The Project Handler (this is the SharePoint column name with Person field type) names are saved in a SharePoint List called SharePoint Project Expenses.
• However, I would like to filter the gallery so the user whose name is in the list will not be able to evaluate himself/herself.
• So basically it is possible by hiding a record from the gallery based on the user login.
• For Example, my name is “Preeti” and the name is present in the SharePoint list (SharePoint Project Epenses).
• If I will start the application, then I should be able to evaluate the rest of handlers in the SharePoint list but I should not see my name in the gallery as shown below .

• To achieve this, Set the below code on App’s OnStart property as:

OnStart = ClearCollect(
    mycollection,
    Filter(
        'SharePoint Project Expenses',
        Not(User().Email in 'Project Handler'.Email)
    )
)

Where,

1. mycollection = Collection name
2. ‘Project Handler’ = SharePoint people picker field that allows multiple values

• Next, set the collection name to the Gallery’s Items property:

Items = mycollection

• At last, select the label control from the gallery and set its Text property:

Text = ThisItem.'Project Handler'.DisplayName

• Here, You can specify the project handler with DisplayName, Email, Department, etc. (whatever that you want to show in the gallery)

This is how we can work with the PowerApps gallery hide row.

PowerApps gallery increment number

Do you want to populate the Text Box values into your Gallery when you click on the “Button” in your app?

• For example, there are some records in the gallery-like Input Details-1, Input Details-2, Input Details-3, Input Details-4, Input Details-5, and so on. Next, When a user will delete one item from the gallery suppose Details-3, then the next item will replace in the deleted item place. Refer to the below gif to understand better.

• First of all, on the screen, Insert a Text input control, a Button input (named ADD) and a Gallery control. Resize the input controls as like the above screenshot.
• Now we will create a Power Apps Collection on the OnSelect property of the Button control (ADD) as:

OnSelect = Collect(
    InputCollection,
    {
        Name: "Input Details-" & CountRows(InputCollection) + 1,
        TextBoxValue: TextInput1.Text
    }
)

Where,

1. InputCollection = Collection name
2. Name, TextBoxValue = Header of the collection
3. CountRows = This function helps to count the total number of items or records in a gallery control.
4. TextInput1 = Text input control name

You can check out these below tutorials that how you can work with Power Apps Count IF function:

PowerApps CountIf Function with Examples

• Next, Select the Gallery control and apply the collection on its Items property as:

Items = InputCollection

• Within the gallery, insert a Trash icon that will help you to delete the item. Apply the below code on the OnSelect property of the Trash icon:

OnSelect = Remove(
    InputCollection,
    ThisItem
);
Clear(InputCollection1);
ForAll(
    InputCollection,
    Collect(
        InputCollection1,
        {
            Name: "Details-" & CountRows(InputCollection1) + 1,
            TextBoxValue: TextBoxValue
        }
    )
);
ClearCollect(
    InputCollection,
    InputCollection1
)

Here, the InputCollection1 specifies the new collection name.

Once it is done, Save and Preview the app. And then, follow the same way as like that above gif.

This is how we can work with the PowerApps gallery increment number.

PowerApps gallery multiple data sources

Check out the below PowerApps forums that how to work with multiple data sources in a PowerApps gallery:

• Gallery with multiple data sources
• Gallery filter with multiple data sources

PowerApps gallery multi select

• Let’s say there is a Gallery control in PowerApps. The gallery is populating with some names like as shown below.
• As we know, in the gallery, currently there is no such option where we can select multiple items at a time. Rather than, We can use some different ways to achieve this.
• Alternatively, to do this simply, We can use a PowerApps Checkbox control in the gallery. Here what I want to do is, I would like to be able to select some gallery items and the same items should populate to a gallery and as well as from a collection.
• In the below screenshot, all the items of the gallery control appears from a SharePoint List (Title column).

• At first, Select the gallery and click on the edit pen icon. Then, insert a check box control (Insert -> Input -> Select Check box). Remove the Text from the Check box control.
• Once you will insert the check box to gallery, then the control will appear in each and all items automatically. Write the below formula on Check box’s OnCheck property as:

OnCheck = Collect(
    ItemCollection,
    ThisItem.Title
)

Where,

• ItemCollection = Collection name
• Title = SharePoint field name that appears in the gallery

The above code specifies it will add the Title values to the collection once the check box is checked.

• Next, under OnUncheck property of the check box control, apply the below formula:

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

Where,

Remove = This function is used to remove a value from the collection.

When the check box will uncheck, then this will remove the title value that was added to the collection.

• Next, suppose you want to visualize how the collection looks like when someone interact with the check boxes on the gallery. To show this, I will insert a Data table in Power Apps.
• Select the Data table -> Go to Properties pane -> Click on Edit fields from Fields section -> + Add field -> Check the Value from check box-> Click on Add as shown below.
• Then, go to the Items property of the data table and apply the below code:

Items = ItemCollection.Value

• At last, Save and Preview the app. Check the desired item(s) from the gallery. At the same time, you can see all the checked items will appear in the data table and as well as the collection.
• When you will uncheck the item(s) from the gallery, then at the same time, the removed items will disappear from the data table.

PowerApps gallery order by date

Do you want to sort the PowerApps gallery by a Date field? Please check out the below simple scenario.

• Suppose there is a SharePoint List called Travel Details. This list has a Date field named Travel Start Date.
• Now I would like to sort (in descending order) the SharePoint item based upon the Date field and the result will appear in the PowerApps gallery.

• To achieve this, Select the gallery control and apply the below code on its Items property as:

Items = Sort(
    'Travel Details',
    'Travel Start Date',
    Descending
)

• As I wanted to sort the date field as a descending order, that’s why I have mentioned it as Descending in the code. If you want to sort it as Ascending, then you should mention it as Ascending.

• To view the result in gallery, you can save and preview the app.

PowerApps gallery order by

What is PowerApps Gallery Order by and what is the appropriate formula to do so. A gallery order by means to sort the gallery in ascending or descending order (based on the user’s desire).

• In this scenario, We will sort the PowerApps gallery by a SharePoint Title column. In the below screenshot, the first gallery represents all the Title values from the SharePoint List (‘SharePoint Project Expenses‘).
• Now, I would like to sort the gallery by the Title column and the result will appear as like the second gallery as shown below.

• To do so, Select the Gallery and apply the below formula on its Items property as:

Items = SortByColumns(
    'SharePoint Project Expenses',
    "Title"
)

• When you will save and preview the app, you will see the title values will appear as an ascending order (by default).
• Similarly, If you want to sort the Title value as an descending order, you can apply the below formula on Gallery’s Items property as:

Items = SortByColumns(
    'SharePoint Project Expenses',
    "Title",
    Descending
)

This is how we can work with PowerApps gallery order by.

PowerApps gallery onselect

In this topic, We will discuss the gallery onselect in PowerApps. Let’s overlook the below scenario.

• Mostly what happens is, When I am inserting a button into a gallery, then the OnSelect property of the button input is automatically set to Select(Parent). But at the same time, I don’t want a button in every row of the vertical gallery.
• Instead of that, I want user to click the gallery row, then click a button outside the gallery to execute the OnSelect functions.
• In this scenario, We will see how to refernce a gallery row and all its details when someone will clikck the button control.
• The below screenshot represents, a user will select any item from the gallery and tap on the button in the first screen. Once the user will click on the button, then it will navigate to the second screen where there will be an edit form that will help to display all the details of the selected gallery item from the first screen. Refer the below things to do so.

• In the first screen, Insert a Gallery (with Title layout) and set its Items property to the SharePoint List Data source as:

Items = 'SharePoint Project Expenses'

• Next, take a Button input and rename it to Click Me. Apply the below code on its OnSelect property as:

OnSelect = Navigate(
    EditScreen,
    ScreenTransition.Fade,
    {itemToEdit: Gallery27.Selected}
);
EditForm(Form2)

Where,

1. EditScreen = This is the name of the second screen where the edit form presents. Once the user will click on the button, then it will navigate to this screen.
2. itemToEdit = Variable name
3. Gallery27 = Gallery control name
4. Form2 = Edit form name

• Now go to the second screen where the form is present. Provide the SharePoint list name to its DataSource property as:

DataSource = 'SharePoint Project Expenses'

• At last, Go to the Items property of the Edit form and specify the created variable as:

Items = ItemToEdit

• Thats it to do. Save, Preview the app and perform the operation.

This is the one type of scenario that how we can work with PowerApps gallery onselect.

PowerApps gallery radio button

Do you want to work with a Radio button in the PowerApps Gallery control? Please refer to the below PowerApps article that is purely related to the radio button control: Powerapps Radio button in the gallery

PowerApps gallery refresh

Do you want to refresh the gallery items in PowerApps?

• If the app is always open and you want to automatically refresh, then in this case, you can use Power Apps Timer control.
• You just need to setup timer and set that it refreshes every 1 minute and after time ends call Refresh(DataSource)

Also, you may like these below PowerApps Tutorials:

• PowerApps SharePoint Lookup Column + PowerApps Dropdown Example
• Power Apps Display SharePoint List Items – 5 Ways
• Power Apps Dropdown Control – How to use
• PowerApps if statement with examples
• Power Apps List Box Control – Complete tutorial
• PowerApps Container Control – Complete tutorial
• How to use Power Apps for free
• Power Apps Image Control – How to use
• Power Apps Audio and Video Control [Detailed tutorial]
• Power Apps Choices Function with Examples
• PowerApps First, FirstN, Last, and LastN function with examples
• PowerApps LastSubmit() with Examples
• PowerApps Pen input control (PowerApps signature)
• How to add PowerApps app to Microsoft Teams – Step by Step

In this Power Apps tutorial, We discussed the uses of Power Apps Gallery control, What are the key properties of PowerApps gallery control, and how to use it.

Also, by taking some simple scenarios, We covered these below topics:

• Types of PowerApps gallery
• PowerApps gallery add new record
• PowerApps gallery item limit
• PowerApps gallery layout
• PowerApps gallery selected item Or PowerApps gallery default
• PowerApps gallery SharePoint list
• PowerApps gallery delete item
• PowerApps gallery table
• PowerApps gallery selected item navigate
• PowerApps gallery alternate row color
• PowerApps gallery selected item color
• PowerApps gallery all items
• PowerApps gallery attachments
• PowerApps gallery border
• PowerApps gallery button
• PowerApps gallery border between items
• PowerApps gallery blank
• PowerApps gallery bulk update
• PowerApps gallery checkbox selected
• PowerApps gallery count rows
• PowerApps gallery count
• PowerApps gallery change color on select
• PowerApps gallery collection
• PowerApps gallery default selected item
• PowerApps gallery distinct
• PowerApps gallery dropdown
• PowerApps gallery filter
• PowerApps gallery group by
• PowerApps gallery get row number
• PowerApps gallery hyperlink
• PowerApps gallery header row
• PowerApps gallery hide row
• PowerApps gallery increment number
• PowerApps gallery multiple data sources
• PowerApps gallery multi select
• PowerApps gallery order by date
• PowerApps gallery order by
• PowerApps gallery onselect
• PowerApps gallery radio button
• PowerApps gallery refresh