Connexion
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:
- Using the above SharePoint list, we will create a canvas app within the Power Apps.
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)- To identify the selected item, insert the below expression on the gallery’s TemplateFill property.
TemplateFill = If(ThisItem.IsSelected, Color.BlanchedAlmond,Color.LightGray)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.SelectedWhere Hotel_Registration_Gallery is the name of the Power Apps vertical gallery.
We can see that the Power Apps display form will show all of the details from the first gallery item that was selected.
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.
- 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)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"}
);
- 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.
- 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:
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:
