This Power Apps tutorial will help you to know How to Filter a Power Apps Gallery With Multiple Dropdowns using a simple scenario.
Also, we will see how to add a blank value to the Power Apps Dropdown control using collections.
Also, Read: How to use Power Apps Gallery Dropdown
How to Filter a Power Apps Gallery With Multiple Dropdowns
The below gif represents three Power Apps Dropdown Controls [Category, Priority, and Request User] and a Gallery Control. All the dropdown and gallery values are retrieved from a SharePoint List.
When all dropdown value is empty, a gallery with all of the items from the SharePoint list will show up. The gallery will filter according to the user’s dropdown option once the user chooses any value from any of the dropdowns.
Additionally, the gallery will filter and display the results based on the user’s selection of all three dropdown values.
Now we will see how to filter a Power Apps Gallery With Multiple Dropdowns step by step.
Set up a SharePoint List
First, we will create a SharePoint List named IT Help Desk with the various columns:
Column | Data type |
---|---|
Request ID | Number |
Subject | Title (Single line of text) |
Request Date | Date and time |
Category | Choice (Servers, User Workstation, Basic Software, Data Center) |
Priority | Choice (Very High, Medium, Normal) |
Progress | Number |
Request User | Person |
Create a Power Apps Blank Canvas app
Next, we will create a new blank canvas app in Power Apps and add some input controls to that. Follow the instruction below:
- Sign in to Power Apps with valid Microsoft credentials.
- Go to Apps -> Expand + New app -> Select Canvas.
- Provide the App name and choose the Table Format -> Click on Create.
- Connect the SharePoint List Datasource connector (IT Help Desk) to the app.
- Next, insert three Dropdown controls and rename them to ddCategory, ddPriority, and ddReqUser.
- Now I want to retrieve all the dropdown values from the specific SharePoint list columns i.e. Category, Priority, and Request User.
- I also want to give each dropdown control a blank value. such that every value from the SharePoint list, including a blank value, will be available in the dropdown.
- To do so, we will create a collection with a blank value on the screen’s OnVisible property as:
OnVisible = ClearCollect(
CategoryWithBlank,
{Category: Char(160)}
);
Collect(
CategoryWithBlank,
Distinct(
'IT Help Desk',
Category.Value
)
);
ClearCollect(
PriorityWithBlank,
{Priority: Char(160)}
);
Collect(
PriorityWithBlank,
Distinct(
'IT Help Desk',
Priority.Value
)
);
ClearCollect(
ReqUserWithBlank,
{ReqUser: Char(160)}
);
Collect(
ReqUserWithBlank,
Distinct(
'IT Help Desk',
'Request User'.DisplayName
)
);
Where,
- CategoryWithBlank, PriorityWithBlank, ReqUserWithBlank = Provide the Collection Names
- Category, Priority, ReqUser = Specify the Collection Headers
- ‘IT Help Desk’ = SharePoint List Name
- Category.Value, Priority.Value = SharePoint Choice Columns
- ‘Request User’.DisplayName = SharePoint Person Column
- Then, set these collections to each and every Dropdown’s Items property:
Category: Items = CategoryWithBlank
Priority: Items = PriorityWithBlank
RequestUser: Items = ReqUserWithBlank
- Save, and Close the app. Open and Preview the app once again, you can see the outputs below:
- Next, add a Vertical Gallery Control and set its Layout to Title, subtitle, and body. Apply all the code on each gallery label’s Text property as:
Title:Text = "Subject: " & ThisItem.Title
Subtitle:Text = "Request Date: " & ThisItem.'Request Date'
Body:Text = "Progress: " & ThisItem.Progress & "%"
Refer to the image below:
- Then, Select the Gallery Control and set its Items property to the code below:
Items = Filter(
'IT Help Desk',
ddCategory.Selected.Value = Blank() Or Category.Value = ddCategory.Selected.Value,
ddPriority.Selected.Value = Blank() Or Priority.Value = ddPriority.Selected.Value,
ddReqUser.Selected.Value = Blank() Or 'Request User'.DisplayName = ddReqUser.Selected.Value
)
Where,
- ddCategory, ddPriority, ddReqUser = Dropdown Control Names
- Category, Priority = SharePoint Choice Columns
- ‘Request User’ = SharePoint Person Columns
- Save the app and then run a preview. The gallery will filter and show all the SharePoint list records when all the dropdown controls have empty values.
- When you choose options from the various drop-down controls, the gallery filters and shows those specific values in accordance with your drop-down selections.
This is how to filter a Power Apps Gallery With Multiple Dropdowns.
Moreover, you may like some more Power Apps tutorials:
- Power Apps Gallery Conditional Formatting [With 11 Examples]
- How to Select First Item in a Power Apps Gallery
- How to Display Dataverse Choices in Power Apps Gallery
- Alternate Row Color in Power Apps Gallery
In this Power Apps tutorial, we discussed How to Filter a Power Apps Gallery With Multiple Dropdowns using a simple scenario.
Also, we will saw how to add a blank value to the Power Apps Dropdown control using collections.
After working for more than 15 years in Microsoft technologies like SharePoint, Office 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (9 times). I have also worked in companies like HP, TCS, KPIT, etc.