How to Filter a Gallery in Power Apps

Learn how to create dynamic filters in Power Apps using dropdowns, text input, date pickers, and radio buttons to filter records in a gallery.

Overview

In this tutorial, you’ll learn how to apply multiple filters to a Power Apps Gallery connected to a SharePoint list.

The example scenario is a car service business app that allows filtering by:

  • Customer Plan (Dropdown)
  • Check-in Date Range (Date Pickers)
  • Service Completed (Radio Buttons)
  • Search Term (Text Input)

Data Source

The app uses a SharePoint list with the following columns:

  • ID (Number)
  • Car (Text)
  • Customer (Text)
  • Service (Text)
  • Check-in Date (Date)
  • Price (Currency)
  • Customer Plan (Choice: Gold, Silver, Bronze)
  • Service Completed (Yes/No)

Step 1: Setup the Gallery

Connect your app to the SharePoint list and add a vertical gallery. Set the Items property of the gallery to:

CarService

Then add labels to display the fields you want, such as ID, Car, Customer, Service, Date, Price, Plan, and Service Completed.

To convert the Service Completed boolean into text:

If(ThisItem.ServiceCompleted, "Yes", "No")

Step 2: Add a Dropdown Filter (Customer Plan)

Insert a Dropdown control and set its Items property to:

["Gold", "Silver", "Bronze"]

Rename it to DropdownCustomerPlan.

Update the gallery’s Items property to filter by selected plan:


Filter(
  CarService,
  CustomerPlan.Value = DropdownCustomerPlan.SelectedText.Value
)
      

Step 3: Add Date Filters (Check-in Date)

Insert two Date Picker controls, name them DatePickerFrom and DatePickerTo. Then modify the gallery’s filter:


Filter(
  CarService,
  CustomerPlan.Value = DropdownCustomerPlan.SelectedText.Value,
  CheckInDate >= DatePickerFrom.SelectedDate,
  CheckInDate <= DatePickerTo.SelectedDate
)
      

Step 4: Add Radio Buttons (Service Completed)

Insert a Radio control, set its Items to:

["Yes", "No"]

Rename it to RadioServiceCompleted. Update the filter again:


Filter(
  CarService,
  CustomerPlan.Value = DropdownCustomerPlan.SelectedText.Value,
  CheckInDate >= DatePickerFrom.SelectedDate,
  CheckInDate <= DatePickerTo.SelectedDate,
  ServiceCompleted = If(RadioServiceCompleted.Selected.Value = "Yes", true, false)
)
      

Step 5: Add a Text Search Filter

Insert a Text Input control with the hint text “Search here”. Rename it to TextInputSearch.

Add a text search to check if the input exists in any of the four fields: ID, Car, Customer, or Service.


Filter(
  CarService,
  CustomerPlan.Value = DropdownCustomerPlan.SelectedText.Value,
  CheckInDate >= DatePickerFrom.SelectedDate,
  CheckInDate <= DatePickerTo.SelectedDate,
  ServiceCompleted = If(RadioServiceCompleted.Selected.Value = "Yes", true, false),
  TextInputSearch.Text in Car ||
  TextInputSearch.Text in Id ||
  TextInputSearch.Text in Customer
)
      

Summary

With the combination of dropdowns, date pickers, radio buttons, and text input, you can build a fully functional and user-friendly filtered gallery in Power Apps. This enhances user experience by allowing real-time, multi-criteria filtering of your SharePoint or other data source records.

Comments

Leave a Comment

Your email address will not be published. Required fields are marked *