Filter Table With Button Handlers

App Building
1

I have a Table with two buttons, Active and Inactive. When I click Active, I want to show all rows where the value of a field is empty and when I click Inactive I want to show all all rows where the value of the field is not empty.

I added an Event handler to the Active button like so

setfilter
setfilter626×635 50.8 KB

I also added a handler using the Clear filter method so when I switch between filters, the previous filter is reset.

clearFilter
clearFilter625×616 48.8 KB

Unfortunately, this is not working as expected. as I am still getting the records from Inactive filter.

Am I understanding the use of set and clear filter and using them correctly?

2

Hi @yourbudweiser! When you use the clearFilter API, the Filter ID should match the ID of the filter you want to clear. It looks like the filter ID for your active filter is {{ self.id }}, which I think evaluates to buttonActiveEmployees. So the clear filter ID should reference buttonActiveEmployees instead of buttonInactiveEmployees

You can also use the "clear filters" API to just clear all filters if you don't want to have to specify an ID!

4

When the table loads, all records appear.

When I click the Active button, I apply these filters. On first click, it works.

  • Clear Filter "buttonInactiveEmployees"
  • Set Filter "End Date is empty"

button-active
button-active1241×505 78.3 KB

When I click the Inactive button, I apply these filters. Always works.

  • Set Filter "End Date is not empty"
  • Clear Filter "buttonActiveEmployees"

button-inactive
button-inactive1260×505 78.1 KB

After clicking the Inactive button, clicking the Active button does not return any results.

5

Hm what does the Table's filterStack property show up as in debug tools when it's not working?

6

filterstack

button-active
button-active1262×468 80.1 KB

button-inactive
button-inactive1262×468 79.5 KB

7

Looks like it somehow got into a state where both filters are being applied so it's returning no results

You may want to use the setFilterStack API instead, which will overwrite filterStack to whatever you pass

8

Does this appear to be a bug or something I am doing wrong?

I've tried using the setFilterStack API but I don't see any difference. Am I using this correctly?

setFilterStack
setFilterStack1431×534 78.5 KB

9

Filters should just be an array there!

Or change the action to "run script"

10

Some examples would really be helpful and appreciated :melting_face:

11

The filter works as expected when using the Switch component, I just would like to apply the same functionality to buttons. So instead of True/False it would be Button 1 / Button 2.

12

Personally, I really prefer to setup predefined filters through a transformer that's monitoring states or something. I always find it feels more clear and easier to work with while editing the app. Not saying what should work but isn't should be ignored, but you might find it less of a headache now and in the future to shift your approach.

1 Like
13

As a new user all ideas are really appreciated. Trying to figure out use cases for functionality that seemingly should work can be time consuming and difficult to implement. It seems to me that adding and clearing filters using event handlers is pretty straightforward as @mckenna alluded to in her first response.

I was able to get this working by using the click handler to run a script using setFilter and clearFilterStack

Active Employees button:

employeesTable.clearFilterStack();
employeesTable.setFilter({ columnId: "Employee_EndDate", operator: "isEmpty", id: "activeEmployee" });

Inactive Employees button:

employeesTable.clearFilterStack();
employeesTable.setFilter({ columnId: "Employee_EndDate", operator: "isNotEmpty", id: "inactiveEmployee" });
1 Like
14

Thank you for the feedback, @yourbudweiser!

I'm glad to hear you have a working solution. We have the filter api in our docs, but it seems like we could supplement that with some best practices examples here in the forum