Note

This documentation describes the FilterBuilder Vue component for native UI views for Xml templates see filter-builder.

FilterBuilder

A full filter construction UI supporting simple condition filters and nested group conditions (advanced mode). Can be used embedded in a FilterBar or standalone (e.g. in a data export dialog).

Import

import { FilterBuilder } from '@neos/app'

Props

Prop	Type	Default	Description
`modelValue`	`Filter`	`new Filter()`	The filter object being built (v-model)
`parameters`	`Record<string, unknown>`	`{}`	Parameter values for parameterized filter conditions
`viewModel`	`ViewModel<Model>`	`undefined`	Explicit ViewModel to use (for detached/standalone mode). Falls back to injected ViewModel
`advancedMode`	`boolean \\| 'only'`	`true`	`true` = toggle between simple and advanced; `'only'` = always advanced; `false` = always simple
`readOnly`	`boolean`	`false`	Render filter conditions as read-only

Emits

Event	Payload	Description
`update:modelValue`	`Filter`	Emitted when filter conditions change
`update:parameters`	`Record<string, unknown>`	Emitted with merged parameter values when conditions change
`toggleModal`	—	Relayed from the filter builder context

Slots

Slot	Description
`default`	Rendered in the footer area (alongside the advanced-mode checkbox)

Usage Examples

Embedded in a FilterBar (no configuration needed)

The FilterBar component manages FilterBuilder internally. You rarely need to use FilterBuilder directly.

Standalone in a data export dialog

<Modal v-model:is-open="showExport" size="large">
  <template #header><Text weight="strong">Export Data</Text></template>
  <template #body>
    <FilterBuilder
      v-model="exportFilter"
      v-model:parameters="exportParams"
      :view-model="viewModel"
      advanced-mode="only"
    />
  </template>
  <template #footer>
    <ButtonsLayout>
      <button label="Cancel" @click="showExport = false" />
      <button label="Export" variant="primary" @click="runExport" />
    </ButtonsLayout>
  </template>
</Modal>

Read-only filter preview

<FilterBuilder :model-value="savedFilter" :read-only="true" :advanced-mode="false" />

Table of Contents