How to Filter Power Apps Gallery Based On Search Box

A few days before, I worked for a client on a Power Apps application. In that app, the client required filtering the gallery based on the search input, which could be any field in the Power Apps gallery.

In this tutorial, I will explain how to filter a Power Apps gallery based on search text.

Filter Power Apps Gallery Based On Search Box

In the example below, you can see that when I searched for a name, email, or phone number, the gallery immediately filtered based on the search item. If the search control is blank by default, all the items are displayed in the Power Apps gallery.

Follow the steps below to achieve this! Here, I took the data source for this gallery as a collection.

1. Create a Power Apps collection on the App OnStart property by providing the code below.

ClearCollect(
    colCustomerDetails,
    {
        FirstName: "Patti",
        LastName: "Fernandez",
        Email: "PattiF@szg52.onmicrosoft.com",
        PhoneNumber: "444-343-4234"
    },
    {
        FirstName: "Lidia",
        LastName: "Holloway",
        Email: "LidiaH@szg52.onmicrosoft.com",
        PhoneNumber: "444-323-3534"
    },
    {
        FirstName: "Miriam",
        LastName: "Graham",
        Email: "MiriamG@szg52.onmicrosoft.com",
        PhoneNumber: "444-363-2334"
    })

Here, the ClearCollect() function creates the colCustomerDetails collection. With the fields like

• FirstName
• LastName
• Email
• PhoneNumber

2. Add a Power Apps Text input control to the new screen for data search. Also, add a search icon and change its name, as in the image below.

3. Then, add a Power Apps gallery control and provide the below filter function formula on its items property.

If(
    IsBlank(txt_search.Text) || txt_search.Text = "",
    colCustomerDetails,
    Filter(
        colCustomerDetails,
        txt_search.Text in ThisRecord.Email || 
        txt_search.Text in ThisRecord.PhoneNumber || 
        txt_search.Text in ThisRecord.FirstName || 
        txt_search.Text in ThisRecord.LastName
    )
)

Here,

• txt_search = Search text input control name.
• Filter() = Filtering the Power Apps gallery on multiple conditions, such as if the entered text is present in the collection for any of the fields.
• IsBlank(txt_search.Text) || txt_search.Text = “” = Checking whether the text input control is blank or empty.

The collection details are displayed if the search text input control is blank by default.

Save the changes and preview the app once. The gallery will filter the data based on the search item provided in the text input control.

I hope you understand how to filter a Power Apps gallery based on search input. Follow this tutorial if you are trying to filter the gallery.

Also, you may like:

• Create Power Apps Canvas App With Data From a SharePoint List
• Power Apps sort gallery
• How to Filter Multiple Person Column in Power Apps?
• Power Apps Filter Gallery By Last Month
• Power Apps Filter Gallery By Last Week
• Power Apps Filter Gallery By Year
• Power Apps Filter Gallery By Quarter