Searching and filtering in your apps

Most apps I build need a search/filter function. Sometimes the search/filter is central to how the app functions, and sometimes it's a rarely used feature. If the search/filter is against an external data source, I want to be efficient with network calls.

​

Instant filtering vs Apply button

Instant filtering is very heavy on network calls. Take the case of searching a data source based on the input of a text box. If you have DelayOutput set to false, every time you press a key on the keyboard, a new query is executed against the data source. And if you've ever done this against a reasonable sized data source you are probably aware of the keyboard/interface lag that results.

This is why DelayOutput exists on the text box control. So as we press keys, events aren't fired until the control detects a delay in our input.

DelayOutput is a simple way to avoid our multiple network call problem. But what happens when we add in a combobox or tag picker to filter by a choice or relationship? These controls don't have a DelayOutput property.

Enter the Apply button

Using an Apply button is an easy way to avoid all of this. Instead of having your searches and filters applied directly from the controls to the source, we apply variables to the source, and use the Apply button to update our variables from the controls

​

But, what if we want to avoid our network call problem, yet not have the user press an extra button.

As discussed above, this is easy enough if you are searching from the output of a textbox. But how do we do it with our comboboxes, or a combination of both?

The solution I have been using recently is a timer:

- that is reset each time a user changes a combobox or types a character in the text box

- that on timer end, applies the filter

This timer can be set at any length, to match what makes sense for your app. It's basically a DelayOutput that is unified across all of your search/filter controls.

​

So how do we do it?

1) Create yourself an Apply Filter button if you don't already have one

2) Create another button OnSelect=UpdateContext({conStartTimer:true})

3) Create a timer Start=conStartTimer, OnTimerEnd=Select([your apply filter button])

4) on the OnChange event of each of your search/filter controls, add OnChange=UpdateContext({conStartTimer:false});Reset([timer from step 3]);Select([our new button from step 2])

This creates a timer that starts from 0 each time you make a change to one of your search/filter controls, and when it reaches its timer end (I set mine for 1500ms) it applies your filter.