How to Select First Item in a Power Apps Gallery

In this Power Apps Tutorial, we’ll look at how to select first item in a Power Apps gallery.

We were recently asked to create a Power Apps gallery that would select the first item when working with the Power Apps canvas apps.

Along with this, we will discuss the below topics based on a select the first item within the Power Apps gallery control. Such as:

  • Power Apps get the first selected item in a gallery
  • Power Apps select the first item in a filtered gallery
  • Power Apps get the first item in a gallery collection

Power Apps select first item in a gallery

In this section, we’ll look at how to select the first item in a Power Apps gallery. That is, the gallery will be displayed by default by selecting the first item.

For this, we need to build a Power Apps gallery. We have a SharePoint list named Hotel Guest Registration that contains different types of columns such as single line of text, date, number, etc as shown below:

Power Apps select the first item in the gallery
Power Apps select the first item in the gallery
  • Using the above SharePoint list, we will create a canvas app within the Power Apps.
PowerApps select the first item in the gallery
PowerApps select the first item in the gallery

Note:

In the above Power Apps gallery, we have concatenated the guest’s first name and last name as well as the address and city by using the below expressions.
  • Now, insert the following expression into the Default property of the Power Apps vertical gallery. As a result, it selects the first item in the gallery by default.
Default = First(Self.AllItems)
Select default first item in Power Apps gallery
Select the default first item in a Power Apps gallery
  • To identify the selected item, insert the below expression on the gallery’s TemplateFill property.
TemplateFill = If(ThisItem.IsSelected, Color.BlanchedAlmond,Color.LightGray)
How to auto select first item in a Power Apps gallery
How to auto-select the first item in a Power Apps gallery

This is how to auto-select the first item in a Power Apps gallery.

Get first selected item in a Power Apps gallery

Here, we will see how to get the first selected item in a Power Apps gallery. For this, we are going to use the above example of the Power Apps gallery where the first item has been selected bydefault.

To get the first selected gallery item, the following steps are:

  • On the Power Apps screen, add a display form where we can display all the details from the Power Apps screen.
  • Insert the below expression on the Items property of the Power Apps display form.
Items = Hotel_Registration_Gallery.Selected

Where Hotel_Registration_Gallery is the name of the Power Apps vertical gallery.

Get selected first gallery item value in Power Apps
Get selected first gallery item value in Power Apps

We can see that the Power Apps display form will show all of the details from the first gallery item that was selected.

Power Apps get the first selected item in a gallery
Power Apps get the first selected item in a gallery

This is how to get the first selected item in a Power Apps gallery.

Also, read How to create multiple tabs form in Power Apps

Power Apps select the first item in a filtered gallery

In this section, we’ll look at how to choose the first item from a filtered Power Apps gallery. That is, we will create a filter gallery based on a specific condition and then identify the first item from the filtered values.

To work with this scenario, we are going to use the above Power Apps gallery and the following steps are:

  • Suppose, we are going to filter the data whose ‘check-in’ date is on 16/3/2023. For this, we will insert the below expression on the gallery’s Items property.
Items = Filter('Hotel Guest Registration','Check-in Date'=Date(2023,3,16))

Where ‘Hotel Guest Registration’ is the name of the SharePoint data source, and ‘Check-in Date’ is the name of the SharePoint list date column based on which we will filter the gallery data.

How to get first selected item from the Power Apps filtered gallery
How to get a first selected item from the Power Apps filtered gallery
  • To get the first selected item from the above Power Apps gallery, update the gallery’s Items property with the below expression:
Items = First(
    Filter(
        'Hotel Guest Registration',
        'Check-in Date' = Date(
            2023,
            3,
            16
        )
    )
)

Also, insert the below expression on the gallery’s TemplateFill property to identify the selected first item.

TemplateFill = If(ThisItem.IsSelected, Color.DarkSalmon,Color.LightGray)
Power Apps get a first selected item in the filtered gallery
Power Apps get a first selected item in the filtered gallery

This is how to get the first selected item in the Power Apps filtered gallery.

Power Apps get the first item in a gallery collection

We’ll look at how to get the first item in a Power Apps gallery collection in this section. As per the requirement, we will display the collection through a gallery and select the first item from it.

We made a collection based on a button control. That is, when the user clicks the button, a collection is created. For this, we have used the below expression on a Power Apps button control’s OnSelect property.

OnSelect = Collect(ColGadgets,
{Gadget:"Airpods Gen 2" , Year: 2022, Manufacturer: "Apple"},
{Gadget:"Meta Quest Pro" , Year: 2023 , Manufacturer: "Meta"},
{Gadget:"Google Pixel 7" , Year: 2022 , Manufacturer: "Google"},
{Gadget:"Watch Ultra" , Year:2023 , Manufacturer: "Apple"},
{Gadget:"G4 electric bike" , Year:2021 , Manufacturer: "Gocycle"},
{Gadget:"Legion Pro 7i Powerful Laptop" , Year:2023 , Manufacturer: "Lenovo"}
);
power apps select first item in a gallery collection
power apps select first item in a gallery collection
  • Next, click on the button to create a collection and add a vertical gallery to the Power Apps screen. Connect the gallery with the collection. As a result, the gallery will display all the collected data.
Power Apps get first selected item in the gallery collection
Power Apps get first selected item in the gallery collection
  • Now, let’s add another gallery to get the first selected item from the above Power Apps gallery collection. For this, insert the below expression on the new gallery’s Items property.
Items = First(ColGadgets)

We can see, the new gallery will display the first selected item from the Power Apps gallery collection as shown below:

How to get first selected item in the PowerApps gallery collection
How to get the first selected item in the PowerApps gallery collection

This is how to get the first selected item in the PowerApps gallery collection.

Conclusion

From this Power Apps Tutorial, we learned all about getting the first selected gallery item within Power Apps based on different scenarios. Such as:

  • Power Apps select the first item in the gallery
  • Power Apps get the first selected item in a gallery
  • Power Apps select the first item in a filtered gallery
  • Power Apps get the first item in a gallery collection

You may like the following Power Apps gallery control articles:

>