Overview
Adding filtering to galleries to an excellent way to add beneficial functionality to your app that your users can leverage. It allows users to easily comb through lists of data and improves adoption.
YouTube
Add Filter Icons
Go to the left nav and add filter icons to the columns requiring filters
Create Filter Popout
For each filter pop out, you will need the following components:
- Rectangle backdrop
- List box for option set filter or textbox for text filtering
- Button for applying
- Button for clearing
It’s recommended that your group the components together for ease of visibility. Each component can be updated tot he color scheme desired.
The list box will need to be updated with the option set being filtered on.
Create Filter Variables
Each filter pop out will use the same variable to display/hide the group. In this case, we will create a variable called filterType, and when it’s set to the column type, it will display the appropriate filter popout.
If the group for the filter components is selected, the Visible property can be updated to filterType = “type”. Every additional column filter applied can have it’s visibly property updated accordingly.
Update Gallery Filters
Go to the Items property of your gallery, and add the Filter function. In this case we will apply a filter that always returns a true value; if the list box is empty = true or if a value is selected in the list box, it will return back appropriate results.
Filter(dataSource, IsBlank(listbox_Type.Selected) || ThisRecord.’Relationship Type’ in listbox_Type.SelectedItems)
Switch Icons
Ideally when a filter has been applied, you want to show to the user that a column has been filtered on. In this case, the Icon property can be updated to show a filled filter icon if applied. Here is an example of the logic using an if statement:
If(Not(IsBlank(listbox_Type.Selected)), Icon.FilterFlatFilled, Icon.FilterFlat)
Filtering Data
If the user select one or more of the option under a filter, the list will automatically update in the backend. The Filter icon will not appear full.
Here is an example of the filtered data:
