How to use Power Apps Gallery Dropdown

Do you want to know how to use the dropdown control within the Power Apps gallery? If so, keep learning this Power Apps tutorial to get more ideas for achieving this. Also, we are going to cover these below topics such as:

1. Power Apps gallery dropdown selected value
2. PowerApps dropdown within a gallery
3. PowerApps sort gallery dropdown
4. PowerApps reset dropdown in gallery
5. PowerApps gallery sort by date dropdown
6. PowerApps gallery dropdown get value
7. power apps gallery dropdown sum
8. power apps gallery dropdown delete an item

Power Apps gallery dropdown

Now, we will see how to build a dropdown list within the Power Apps gallery. To work around this, the following steps are:

• On the Power Apps screen, we will create a collection based on MobileDetails on the screen’s OnVisible property.

OnVisible = ClearCollect(MobileDetails,{Mobile:"Iphone12",Owner:"David Albert",Price:63000,PurchaseDate:Date(2021,5,12)},{Mobile:"Iphone13Pro",Owner:"Elina Willum",Price:96000,PurchaseDate:Date(2021,12,25)},{Mobile:"Iphone12ProMax",Owner:"John Burman",Price:135000,PurchaseDate:Date(2022,1,14)},{Mobile:"Iphone13",Owner:"David Albert",Price:83000,PurchaseDate:Date(2022,5,12)},{Mobile:"Iphone14",Owner:"Harry Green",Price:89000,PurchaseDate:Date(2022,7,28)})

Here,

1. MobileDeatils: The collection name
2. Mobile, Owner, Price: The column names of the collection

• Next, add a Power Apps Dropdown Control and insert the below expression to display the owner name.

Items = Distinct(MobileDetails,Owner)

On the above expression, we have inserted a Distinct() to remove the duplicate values.

• Now, we will add a vertical gallery (MobileDetailsGallery) to the Power Apps screen. So that when the user selects any item from the dropdown list, it will show the respective mobile details such as Mobile model, purchase date, and price.
• Go to Insert > Gallery > Blank Vertical. Set the Gallery Layout as ‘Title, subtitle, and body.
• On the gallery’s Item property, insert the below expression to show the ad of the filtered item their details.

Items = Filter(MobileDetails, Owner_Dropdown.Selected.Result in Owner)

Where,

1. MobileDetails = Collection name
2. Owner_Dropdown = Dropdown control name
3. Owner = One of the columns from the collection

As you can see in the Gallery Layout as ‘Title, subtitle, and body, We need to specify the values in these three fields (on its Text property). Such as:

Title (Text) = ThisItem.Mobile   // It will display the mobile name in the gallery.
Subtitle (Text) = ThisItem.PurchaseDate   // It will display the purchase date in the gallery.
Body (Text) = ThisItem.Price   // It will display the price in the gallery.

Where,

Mobile, PurchaseDate, Price = Collection column names

Refer to the screenshot below.

• Now, save and publish the app. Then preview the app and select an item from the dropdown control (Ex: Elina Willum). We can see the details will appear below:

This is how to work with the Power Apps gallery dropdown using the selected value.

Also read: Power Apps gallery dropdown filter

PowerApps dropdown inside gallery or PowerApps gallery dropdown items

Here, we will see how to work with dropdown control within a Power Apps gallery or how to interact with the Power Apps gallery with dropdown items.

That is, we will build a Power Apps gallery based on a specific SharePoint data source. In addition, we will add a dropdown control on each gallery row will have a dropdown control.

When a user selects a dropdown option, the respective item in the Power Apps gallery and the SharePoint list is modified.

To work with this requirement, the following steps are:

• We have prepared a SharePoint list named ‘Vendors‘ including a choice column i.e., Status.

• We have prepared a gallery using the above SharePoint list and inserted a dropdown control to the power Apps gallery.
• To display the choices, we need to insert the below expression on the dropdown’s Items property.

Items = Choices(vendors.Status)

• The result you can see in the image below.

• On the above dropdown, we want to display the choices retrieved from the SharePoint list. To do this, we need to insert the below expression on the dropdown’s Default property.

Default = ThisItem.Status.Value

Now, we can see the dropdown will come as per the SharePoint list.

• Again, we will insert another expression that will modify the respective data when the user selects any option from the dropdown control. Select the dropdown control, and insert the below code on the OnChange property.

OnChange = Patch(
    vendors,
    ThisItem,
    {Status: {Value: Status_Dropdown.Selected.Value}}
)

Where Status_Dropdown is the name of the dropdown control.

Now, save and publish the app. Next, Play the app in preview mode. Let’s select an option from the dropdown list (on the first item, ex: Declined to Delivered).

Also, we can see, that the respective item’s status has been changed in the SharePoint list like below:

This is how to work with PowerApps dropdown items within the gallery.

Check out: Power Apps Gallery SharePoint [With 15+ Examples]

Power Apps reset dropdown in gallery

Here, we will see how to reset a dropdown control within the Power Apps gallery. The following steps are:

• We are going to use the previous Power Apps gallery to implement this with some little modifications. First, we will remove the expression from the dropdown’s OnChange property.
• Following that, we will add a button control to the screen. Change the button’s name to Reset. As a result, when the user clicks the button, the dropdown menu selection is reset and returns to its default value.

• Select the button control and insert the below expression on the OnSelect property.

OnSelect = Set(VarResetAllDD, true );Set(VarResetAllDD, false );

Here VarResetAllDD is the name of the local variable name.

Save and publish the app for now. Then play the app in preview mode. Let’s change the dropdown’s item from Declined to Delivered.

When the user clicks on the Reset button, it will reset the dropdown control and return to the previous item.

This is how to reset a Power Apps dropdown in the gallery.

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

Power Apps sort gallery dropdown

Here, we will see how to sort a gallery based on dropdown selection. Suppose, we have prepared a SharePoint list named Vehicles including some columns such as Title, State, and date with some random data like below:

Using the above SharePoint list, we will prepare a Power Apps gallery and insert a dropdown control to the screen. When the user clicks on any option from the dropdown control, the gallery items will be sorted. To work with this, the following steps are:

• On the Power Apps screen, add dropdown control and insert the below expression into the dropdown’s Items property:

Items =  ["State","Date"]

In the above expression, we have used the column names as the dropdown items.

• Next, insert a gallery control to the Power Apps screen and inject the below expression on the gallery’s Items property.

Items = SortByColumns(Vehicles,Columns_Dropdown.Selected.Value,Descending)

Where,

1. Vehicles: The name of the SharePoint list
2. Columns_Dropdown: The name of the dropdown control
3. Descending: You can choose any order i.e., descending or ascending

• Now, save the app and publish it. Play the app in preview mode. We can see when we select any items from the dropdown list, the gallery item will be changed according to that. (ex: select date from the dropdown list)

This is how to sort the PowerApps gallery by dropdown selection.

Check: Power Apps Dropdown Control with SharePoint

Power Apps gallery dropdown sort by date

Here, we will see how to sort a Power Apps gallery by date using a dropdown control. We are going to use the previous Power Apps gallery to implement this.

Now, we will add a dropdown control to the above screen. So that when the user clicks on any choice, it will sort the gallery by date in ascending or descending order.

To do this, the following steps are:

• On the Power Apps screen, add a dropdown control and insert the below expression in the dropdown’s Items property.

Items = ["DateByAscending","DateByDescending"]

Where DateByAscending and DateByDescending are the choices of the dropdown control.

• To sort the gallery as per the dropdown selection, insert the below expression on the gallery’s Items property.

Items = If(OrderDropdown.Selected.Value = "DateByAscending",SortByColumns(Vehicles,"Date",Ascending),SortByColumns(Vehicles,"Date",Descending))

Where OrderDropdown: The name of the dropdown control

Save, and publish the app for now. Play the app in preview mode. We can see, that when we select the DateByAscending the gallery will display the items sorted by date in ascending order; similarly, when we select the DateByDescending the gallery will display the items sorted by date in descending order.

This is how to do powerapps gallery sort by date via dropdown control.

Read: How to Remove Duplicates in Power Apps Dropdown

Power Apps gallery dropdown get value

Here we will see how to get the value on the Power Apps gallery using dropdown control. That means when the user clicks on any item from the dropdown, it will display the selected item as well as it will update that respective item in the SharePoint list.

Previously, we have seen how to update the gallery using the dropdown item. In that case, we have used a choice column but now, we will use the string value to implement this.

We have prepared a SharePoint list named Vehicles having a title and a country (Single line of text) column.

Using the above SharePoint list, we created a Power Apps gallery and added a dropdown control to display the country. Insert the following expression into the dropdown control:

Items = Distinct(Vehicles,Country)

Where Country is the name of the SharePoint column. To show only the unique value and remove the duplicates we have used the distinct().

Also, insert the below expression on the dropdown’s default property to display the value as per the SharePoint list.

Default = ThisItem.Country

Again, insert the below expression on the dropdown’s OnChange property to save the selected data from the dropdown to the SharePoint list

OnChange = Patch(Vehicles, ThisItem,{Country: Dropdown_Country.Selected.Result})

Where Dropdown_Country is the name of the dropdown control name.

To get the selected value we will insert a label control to the screen. Inject the below formula on the label’s text property.

Text = "The selected country is: " & Dropdown_Country.SelectedText.Result

Save and publish the app for now. Play the app in preview mode. Let’s select an item from the dropdown control and we can see it will reflect that item in the label control (Ex- Select Germany in the First item)

This is how to get the dropdown value on the power apps gallery.

Also read: Power Apps Radio Button

Power Apps gallery dropdown sum

In this section, we will see how to work with the power apps gallery dropdown sum. That means when the user clicks on any item from the dropdown control it will retrieve the specific numerical data and calculate its sum.

To work with this, the following steps are:

• We have prepared a Power Apps gallery (using a SharePoint list) that displays the title and the order quantity.

• Next, we will build a dropdown control that will display the unique value of the title column. Insert the below expression on the dropdown’s Items property.

Items = Distinct('Orders List', Title)

Where,

1. ‘Orders List‘: The name of the SharePoint list
2. Title: The column name which we use in the dropdown control.

• To display the total quantity, we will add a Label control and inject the below expression on the label’s Text property.

Text = "The Total quantity of " & Dropdown_Title.Selected.Result & " is " & Sum(Filter('Orders List',Title = Dropdown_Title.Selected.Result),OrderQty)

Where,

1. Dropdown_Title: The name of the dropdown control.
2. OrderQty: The name of the SharePoint column.

Now, press the F5 key or play the app in preview mode. Let’s select an item from the dropdown control (ex- Desktop) and we can see, that it will display the total quantity of the selected item as below:

This is how to calculate the sum of dropdown items on the Power Apps gallery.

Check: Power Apps Cascading Dropdown Control

Power Apps gallery dropdown delete an item

In this section, we will see how to work with the power apps gallery dropdown to delete an item. That means when the user clicks on any dropdown item, the respective item will be selected from the Power Apps gallery as well as from the data source.

To work with this, the following steps are:

• We have prepared a Power Apps gallery using a SharePoint list where we display the ID, Title, and Date column of the SharePoint list like below:

Where Vendors is the name of the SharePoint data source.

• On the above Power Apps screen, add a dropdown control and insert the below expression on the dropdown’s items property to display the ID of the gallery’s items.

Items = vendors.ID 

Where ID is the name of the SharePoint data source’s column

• To delete the selected dropdown item from the Power Apps gallery, insert the below expression on the dropdown’s OnChange property.

OnChange = Remove(vendors,ID_Dropdown.Selected)

Where ID_Dropdown is the name of the dropdown control.

• Save, and publish the app for now. Next, play the app in preview mode. Let’s select an item from the dropdown (ex: 75). We can see, that once we select the item, instantly it will remove from the Power Apps gallery.

There is no such item in the above gallery with the ID that equals 75. This is how to delete an item in the Power Apps gallery using the dropdown control.

Also, you may like some more Power Apps Tutorials:

• How to Work With Power Apps Dropdown Blank Values
• How to Set Default Value in Power Apps Dropdown
• Power Apps Gallery Control [Complete Tutorial]
• Power Apps Data Table [Complete Guide]
• PowerApps stuck on getting your data
• Power Apps SharePoint Button
• How to Filter a Power Apps Gallery With Multiple Dropdowns

Conclusion

From this Power Apps tutorial, we have learned all about the Power Apps gallery with dropdown control. Also, we have covered the below topics such as:

• Power Apps gallery dropdown selected value
• PowerApps dropdown inside the gallery
• PowerApps sort gallery dropdown
• PowerApps reset dropdown in gallery
• PowerApps gallery dropdown sort by date
• PowerApps gallery dropdown get value
• power apps gallery dropdown sum
• power apps gallery dropdown delete an item