How to access FilterBuilder API

You can use either of the two ways below to get access to the FilterBuilder API:

• apply the init handler function with the api as the parameter
• apply the bind:this construct to store the api object in a variable (please, refer to bind)

Apply the init handler

You can access FilterBuilder API using the init handler function that takes api as the parameter.

The example below shows how to add a rule without opening the editor form and set the filtering value. To make this possible, we get access to the FilterBuilder API using the init handler, and then intercept and modify the add-rule action using the api.intercept() method.

<script>
    import { getData } from "./common/data";
    import { FilterBuilder } from "wx-svelte-filter";

    const { value, fields, options } = getData();

    const init = (api) => {
        api.intercept("add-rule", ev => {
            ev.edit = false;
        });
    }
</script>

<FilterBuilder {value} {options} {fields} {init} />  

Bind to api

You can access FilterBuilder API via the api gateway object. You should use the bind Svelte feature to bind to the api object.

In the example below we use the api.getValue() method of the FilterBuilder API to retrieve the current filtering configuration. When the user clicks the "Show value" button, the current filter (rules and groups) is fetched and logged to the console.

<script>
    import { getData } from "../data";
    import { FilterBuilder } from "wx-svelte-filter";
    import { Button } from "wx-svelte-core";

    const { value, fields, options } = getData();

    let api = $state();

    function logValue() {
        console.log(api.getValue());
    }
</script>

<Button type="secondary" onclick={logValue}>Log value</Button>
<FilterBuilder bind:this={api} {value} {fields} {options} />

api methods

• api.exec()
• api.getReactiveState()
• api.getState()
• api.getValue()
• api.intercept()
• api.on()
• api.setNext()

See each method description in the next sections.