Skip to main content

add-rule

Description​

Fires when adding a filtering rule

Usage​

"add-rule": ({
  rule: {
    $temp?: boolean,
    field: string,
    type?: string,
    filter?: string,
    includes?: any[],
    value?:  any[],
  }; 
  edit?: boolean,
  after?: string | number,
}) => void;

Parameters​

The callback of the action takes an object with the following parameters:

  • rule - (required) a filtering rule with the following parameters:
    • $temp - (optional) set to true by default, which means that a rule is added only temporarily before changes are saved
    • field - (required) the id of a field
    • type - (optional) the type of a value: "text" (default, for string values), "number", "date", "tuple"
    • filter - (optional) (optional) the filter operator
    • includes - (optional) an array of the included values (strings, numbers or dates)
    • value - (optional) the value passed to the field
  • edit - (optional) by default, opens the rule editor form when a rule is added; if it's set to false, the form is not opened and a rule with an empty filter is added.
  • after - (optional) the id of a field after which a new rule will be added

Example​

The example below shows how to add a rule without opening the editor form and set the filtering value:

<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;
      ev.rule.includes = ["Daisy"];
    });
  }
  
</script>

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

Related articles: