I am building a web application, and I built a filter button to show future ETA (Estimated Time of Arrival) records in a datatable. I thought this is a good example how to connect a state and a data source together. The main purpose to build a filter and turn it on and off. Let’s see, it won’t be complicated as it first may seem.

First build a filter button with two icons
Create a filter group with layout Align to Parent and place to filter icons into it, one filter on and one filter off. (I use material icons from a plugin)


After create a custom state on the Filter Group, name it Filter State is On and set the default value to yes


Filter On Icon
Create a conditional rule when the icon visibility is true and when is false.


Filter Off Icon
Create a conditional rule when the icon visibility is true and when is false.

Okay, that’s done. The next step to create an event when someone click on the filter, so create a workflow on the group filter element. Depends on the filter state we want to change from yes to no, or from no to yes the state. I hope you follow me and ready for the last step.


The last step includes the table element on my page and it has a data source. The filter button depends on the filter group states, so on the conditional tab we create a rule when the filter is on. We select the data source constraint and search for my data type called arrivals. The rule says all the records where the ETA is in the future we show, otherwise we hide it.

And voilá, the result. The filter turned off by clicking on we see all the records, because our conditional rule is not true. I hope you liked this short-medium lenght tutorial. Stay with me and follow me for future tutorials.

Leave a Reply