Install the Advanced Filter (Demo) for a practical example of how to implement this plugin.

To implement this component, there are a few steps that have to be followed:

After adding the library and consuming it's public elements, add the block to the screen (or screens).

There's an action on the component, as well as on the AdvancedFilter(demo app), called UserList_InitializeValues. It's located inside a folder called ActionToBeCloned.

This action is an example that can be used as a template to create the AdvancedFilterField List required as an input on the block. This is the list with all the fields that will be available as filters on the block. This action can be called on the OnInitialize event handler of the page.

The block receives another text input with the filters serialized as JSON (AdvancedFilterSerialized). It's important to store this and the FilterForQuery output of the ApplyFilter event on a client variable, if you decide to keep the filters stored on the session. This will make the filter persist even if the page is refreshed or the user navigates out and back to it.

There's a practical example of how to do it for multiple pages, it can be found on the AdvancedFilter(demo app).