How to Filter Power Apps Gallery By Dropdown & Multiple Dropdowns?

While working with the Power Apps gallery, I got a task where I needed to filter the gallery based on a single dropdown and multiple dropdowns.

In this Power Apps tutorial, I will show you how to filter Power Apps Gallery by dropdown and filter Power Apps gallery with multiple dropdown controls.

We will also discuss some below topics:

  • Filter Power Apps gallery by dropdown choice field
  • Filter Power Apps gallery by dropdown all items
  • Power Apps filter gallery by dropdown date
  • Filter the Power Apps gallery by dropdown and search

Power Apps Filter Gallery By Dropdown [Choice Field]

First, let me tell you how to filter a Power Apps gallery by dropdown based on the SharePoint list choice field.

Example:

1. I have a SharePoint List named “Project Tracker.” This list contains the fields below.

Column NameData Type
Project NameThis is a Title column with a single line of text. I just renamed it to “Project Name”
DescriptionMultiple lines of text
Project StatusChoice
Start DateDate and time
End DateDate and time
SharePoint rest api tutorial and examples

2. In Power Apps, there is a Gallery control and a Dropdown control. The dropdown control has values like All, In Progress, Not Started, and Completed.

3. When a user selects any value from the dropdown, the gallery will display each record from the SharePoint list based on the selected dropdown choice field.

Refer to the screenshot below:

Filter Power Apps Gallery By Dropdown

To achieve the above example, follow the steps below. Such as:

4. Open Power Apps -> Create Power Apps canvas app -> Connect the SharePoint list [Project Tracker] to the app. Once you connect, it will look like the screenshot below.

Power Apps Gallery Filter By Dropdown

5. Select a Power Apps Screen [ProjectTrackerScreen] -> Set its OnVisible property to the code below.

OnVisible = ClearCollect(
    colProjects,
    {Value: "All"}
);
Collect(
    colProjects,
    Distinct(
        'Project Tracker',
        'Project Status'.Value
    )
)

Where,

  • colProjects = Power Apps Collection
  • {Value: “All”} = Collection Item
  • Distinct() = This function can remove duplicate values from a data source
  • Project Tracker’ = SharePoint Online List
  • ‘Project Status’.Value = SharePoint Choice Field Column Values
Power Apps Gallery Filter By Dropdown Choice Field

6. Next, insert a Dropdown control [drp_ProjectStatus] -> Set its Items property as:

Items = colProjects

Where,

  • colProjects = Power Apps Collection
How to Filter Power Apps Gallery By Dropdown

7. Insert a Gallery control and set its Items property as shown below:

Items = If(
    drp_ProjectStatus.Selected.Value = "All",
    'Project Tracker',
    Filter(
        'Project Tracker',
        'Project Status'.Value = drp_ProjectStatus.Selected.Value
    )
)

Where,

  • If() = This function helps us to evaluate multiple unrelated conditions
  • drp_ProjectStatus.Selected.Value = “All” = Power Apps dropdown name and “All” is the collection item value

Refer to the below image:

How to Filter Power Apps Gallery By Dropdown Choice Field

8. Save, Publish, and Preview the app. When the user selects a specific value from the dropdown control, the gallery will display the filtered records, i.e., [Completed Projects], as in the screenshot below.

How to Filter a Power Apps Gallery By Dropdown Choice Field

This is how to filter a Power Apps gallery by dropdown choice field.

Power Apps Filter Gallery By Dropdown Date

Next, we will discuss how to filter a Power Apps gallery by dropdown date.

Example:

1. I have a SharePoint list named “Training Courses“. This list contains the below fields.

Column NameData Type
Course NameThis is a Title column with a single line of text. I just renamed it to “Course Name”
DescriptionMultiple lines of text
Course Start DateDate and time
Course End DateDate and time
Power Apps Filter Gallery By Dropdown Date

2. In Power Apps, there is a Horizontal gallery control; this gallery displays each record from the SharePoint list based on the date selected in the dropdown menu.

Power Apps Gallery Filter By Dropdown Date

To work around the above example, follow the below steps.

3. On the Power Apps -> Connect the SharePoint list, i.e., [Training Courses] to the app. Once you connect, it will look like the screenshot below.

How to Filter Power Apps Gallery By Dropdown Date

4. Insert a Dropdown control and set its Items property as:

Items = Distinct(
    'Training Courses',
    'Course Start Date'
)

Where,

  • ‘Training Courses’ = SharePoint Online List
  • Course Start Date’ = SharePoint Date Field
How to Filter a Power Apps Gallery by Dropdown Date

5. Then, insert a Gallery control and set its Items property as:

Items = Filter(
    'Training Courses',
    'Course Start Date' = drp_TrainingCourses.Selected.Value
)

Where,

  • ‘Training Courses’ = SharePoint Online List
  • drp_TrainingCourses = Power Apps Dropdown Name
Power Apps Gallery Filter Using Dropdown Date

6. Save, Publish, and Preview the app. Select any particular date from the dropdown control, and the gallery will filter and display the records based on that date.

Power Apps Filter Gallery Using Dropdown Date

This is how to filter a Power Apps gallery by dropdown date.

Power Apps Filter Gallery By Dropdown and Search

Let’s see how to filter a Power Apps gallery by dropdown control based on the search.

Example:

1. I will take the same SharePoint list [Training Courses] for this example.

2. In Power Apps, there is Gallery control, Text input, and Dropdown control. This gallery displays each record from the SharePoint list based on the dropdown control and search results.

3. As in the screenshot below, I faced a delegation warning [Yellow triangle]. The warning message appears as “Delegation warning. This formula’s “Search” part might not work correctly on large data sets.

Refer to the below screenshot:

Power Apps Filter Gallery By Dropdown and Search

4. I created a Power Apps collection [colCourses] using my SharePoint list to overcome this Power Apps delegation warning. Then, I filtered a Power Apps gallery by dropdown without delegation warning, as shown below.

Power Apps Gallery Filter By Dropdown and Search

To achieve this example, follow the below steps. Such as:

5. On the Power Apps canvas app -> Select App object and set its OnStart property as:

OnStart = ClearCollect(
    colcourses,
    'Training Courses'
)

Where,

  • colcourses = Power Apps Collection Name
  • ‘Training Courses’ = SharePoint Online List
Power Apps Filter a Gallery by Dropdown and Search

6. Insert a Text input, make its Default property blank [“”], and set its Hint text property as “Search Course Name” like below.

How to Filter Power Apps Gallery By Dropdown and Search

7. Then, insert a Dropdown control and set its Items property as:

Items = Distinct(
    colcourses,
    'Course Start Date'
)

Where,

  • colcourses = Power Apps Collection
  • ‘Course Start Date’ = SharePoint Date Field
How to Filter a Power Apps Gallery By Dropdown and Search

8. Next, insert a Gallery control and set its Items property to the code below:

Items = Search(
    Filter(
        colcourses,
        'Course Start Date' = drp_Courses.Selected.Value
    ),
    txt_Search.Text,
    "Title"
)

Where,

  • Search() = This function allows users to search for and filter items in a Power Apps gallery
  • drp_Courses = Power Apps Dropdown
  • txt_Search.Text = Power Apps Text input
  • “Title” = SharePoint Text column
Power Apps Gallery Filter By Search and Dropdown

9. Save, Publish, and preview the app. This gallery will display the filtered records based on the search results and selected dropdown value as in the screenshot below.

Power Apps Filter Gallery By Search and Dropdown

This is all about how to filter a Power Apps gallery by dropdown and search.

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 values are empty, a gallery with all of the SharePoint list items will appear. Once the user chooses a value from any of the dropdowns, the gallery will filter according to that user’s dropdown option.

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. Follow the instructions 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, namely Category, Priority, and Request User.
  • I also want to give each dropdown control a blank value. 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 by 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 a single dropdown and Multiple Dropdowns using some real examples.

>

Build a High-Performance Project Management Site in SharePoint Online

User registration Power Apps canvas app

DOWNLOAD USER REGISTRATION POWER APPS CANVAS APP

Download a fully functional Power Apps Canvas App (with Power Automate): User Registration App

Power Platform Tutorial FREE PDF Download

FREE Power Platform Tutorial PDF

Download 135 Pages FREE PDF on Microsoft Power Platform Tutorial. Learn Now…