Power Apps Filter Menu: Apply, Clear and Reset

In this article I will show how to make a filter-menu that appears on the right-side of the app just like SharePoint. I will also demonstrate how to clear filters and reset filters.

If you want to build the Paid Time-Off app below you can start by reading this article on filtering a gallery with multiple dropdowns. Or if you already have a gallery you want to add this user-interface to you should be able to achieve it just by studying this blog.

Creating the Filters Menu

After completing the previous article the Paid Time-Off App has the ability to filter past requests by using the dropdown menus on the right-hand side.

Add a label with a ‘White’ Fill property underneath the dropdown menus. Reposition the dropdown menus slightly below their current position and place another label with the title ‘Filters’ on top.

Then insert another label over top of the gallery to prevent the user from clicking it while the ‘Filters’ menu is active.

To achieve the transparent look put this code in the Fill property of the screen-protecting label.

RGBA(237,237,237,0.4)

Place two buttons underneath the dropdown menus: Apply and Clear.

Show And Hide The Filters Menu

Next, we fill create the controls to show and hide the filters menu. Insert a Filter icon and a label with the word ‘Filter’ into the top-right corner of the title bar. Also make a Cancel Icon beneath the Filter icon.

Use this code in the OnSelect property of the Filter icon.

Set(varShowFilters, true);

Then write this code in the OnSelect property of both the Apply button and the Cancel icon.

Set(varShowFilters, false);

Finally, put the varShowFilters variable in the Visible property of all of the menu controls and the screen-protect label.

varShowFilters

And put the opposite code in the Visible property of the Filter control

!varShowFilters

Now menu will now show when you click Filter and hide when you click either the Apply button or Cancel icon.

Clearing Filters

When a user clicks the clear button all of the filters should revert to a blank selection. Write this code in the OnSelect property of the Clear button.

// Define default filter values
Set(varDefaultFilters, {
    Type: Blank(),
    Status: Blank(),
    Employee: Blank()
});

// Reset all of the filter controls
Reset(drp_Type);
Reset(drp_Status);
Reset(drp_Employee);

Then set the Default property of each filter using this code

varDefaultFilters.Type

varDefaultFilters.Status

varDefaultFilters.Employee

Clicking the Clear button will now reset the dropdown menus and show all information in the gallery once again.

Cancel Filter Changes

When the user clicks the Cancel icon any changes made to the filters will return to their previous values before opening the menu.

Replace any code in the OnSelect property of the Filter icon with this code.

// store currently applied filter values in a variable
Set(varAppliedFilters, {
        Employee: drp_Employee.Selected.Value,
        Status: drp_Status.Selected.Value,
        Type: drp_Type.Selected.Value
});

// copy the applied filters to default filters variable
Set(varDefaultFilters, varAppliedFilters);

// show the filters menu
Set(varShowFilters, true);

Then write this code in the OnSelect property of the Cancel icon.

// hide the filters menu
Set(varShowFilters, false);

// copy the applied filters to default filters variable
Set(varDefaultFilters, varAppliedFilters);

// Reset all of the filter controls
Reset(drp_Type);
Reset(drp_Status);
Reset(drp_Employee);

Now clicking the Cancel icon will return the dropdowns to their previous state.

More Space To Display Data

Hiding the dropdown menu when not in-use gives us more space to display data in the gallery. Now we can display 2 additional columns on-the-right instead of using the space for a menu.

Questions?

If you have any questions or feedback about Power Apps Filter Menu: Apply, Clear and Reset please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.