How to Filter a Power Apps Gallery With Multiple Dropdowns

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.

How to Filter a Power Apps Gallery With Multiple Dropdowns

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:

ColumnData type
Request IDNumber
SubjectTitle (Single line of text)
Request DateDate and time
CategoryChoice (Servers, User Workstation, Basic Software, Data Center)
PriorityChoice (Very High, Medium, Normal)
ProgressNumber
Request UserPerson
Look at the SharePoint Online list below:
Filter a Power Apps Gallery With Multiple Dropdowns

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.
Filter Power Apps Gallery With Multiple Dropdowns
  • 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,

  1. CategoryWithBlank, PriorityWithBlank, ReqUserWithBlank = Provide the Collection Names
  2. Category, Priority, ReqUser = Specify the Collection Headers
  3. ‘IT Help Desk’ = SharePoint List Name
  4. Category.Value, Priority.Value = SharePoint Choice Columns
  5. ‘Request User’.DisplayName = SharePoint Person Column
Power Apps Filter Gallery With Multiple Dropdowns
  • Then, set these collections to each and every Dropdown’s Items property:
Category: Items = CategoryWithBlank
Priority: Items = PriorityWithBlank
RequestUser: Items = ReqUserWithBlank
How to Filter Power Apps Gallery Control With Multiple Dropdowns
  • Save, and Close the app. Open and Preview the app once again, you can see the outputs below:
Add blank values to Power Apps Dropdown
  • 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:

How to Filter Power Apps Gallery With Multiple Dropdowns
  • 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,

  1. ddCategory, ddPriority, ddReqUser = Dropdown Control Names
  2. Category, Priority = SharePoint Choice Columns
  3. ‘Request User’ = SharePoint Person Columns
Power Apps Filter Gallery With Multiple Dropdown Controls
  • 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.
How to Filter a Power Apps Gallery control With Multiple Dropdowns

This is how to filter a Power Apps Gallery With Multiple Dropdowns.

Moreover, you may like some more Power Apps tutorials:

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.

>