Power Apps Filter Menu: Apply, Clear and Reset

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.Result,
        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.

Matthew Devaney

Subscribe
Notify of
guest
6 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Teresa Agustin
Teresa Agustin
1 year ago

I love this solution! My gallery extends the full width of my screen and I only have a small header area at the top. I was wondering how to squeeze in 4 filter dropdowns as well as my logo, app name, search box and new request button without it looking cluttered and awful. I can’t wait to try this – Thanks Matthew!

Zewdu Kebad
Zewdu Kebad
1 year ago

Sir!!!, I have a question???
how can you make the filter dropdown non-transparent “the modified” and “modified by” columns when you use the filter??? I mean when you use he filter menu, it covers the two last right end column. how did you do that????
Many thanks

Alfred
Alfred
2 months ago

Great example!
If I want the filter changes to be applied to the gallery after the Apply button is hit, how do I do that?

Alfred
Alfred
2 months ago

Big thanks for your help!