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.
Leave a Comment