Filter Panel: Configuration, Customization, and Best Practices

Docs

Help & Feedback

Get Started
Functionality
Learning
Extension
Dev Tooling
APIs
Releases

How-to Guide

Author:

Yulia Andreyanova

Changed on:

30 May 2025

Key Points

This guide provides step-by-step instructions on setting up and customizing the Filter Panel component to filter data effectively, whether on standalone pages or embedded within the List component to filter an inner list.
Discover how to define data sources, integrate custom queries, and display query results seamlessly using descendant components.
Explore options to customize fields: modify field types, set default values, rearrange the field order, and remove unnecessary fields.
Unlock the component's key functionality—synchronizing filter data with the URL. This enables easy sharing of pre-filtered views through links.
Learn how to configure default filter values using settings for a streamlined and consistent user experience.

Prerequisites

Settings Creation and Editing Mutations

Steps

Add the Component Skeleton to the Manifest

First, add the basic structure for the `fc.filterPanel` in the manifest:

1{
2  "component": "fc.filterPanel",
3  "props": {
4    "overrides": {},
5    "exclude": []
6  }
7}

Define the Data Source for the Filter Panel

If you are using the default Page query, no further steps are needed.
For custom queries, add the `query`, `variables`, and `descendants` properties.

`query` defines the GraphQL query for filtering.
`variables` supply query parameters.
`descendants` define components to display the query results.

1{
2  "component": "fc.filterPanel",
3  "props": {
4    "noCard": true,
5    "query": "query virtualPositions {...}",
6    "variables": { "someVariable": "value" },
7    "descendants": [
8      {
9        "component": "fc.list",
10        "dataSource": "virtualPositions",
11        "props": {
12          "attributes": [
13            {
14              "label": "Virtual Catalogue",
15              "value": "{{node.catalogue.name}}"
16            },
17            {
18              "label": "Available Quantity",
19              "value": "{{node.quantity}}"
20            }
21          ]
22        }
23      }
24    ]
25  }
26}

Removing Borders and Padding for Embedded Filter Panels

Use the `noCard` parameter to remove the border and padding when embedding the filter panel inside other components.

Result

Once configured, the filter panel will display all available default fields based on the page query or custom query.

Exclude Unnecessary Fields

If you see fields that you don’t need, exclude them by adding their names to the `exclude` property: `"exclude": ["createdon", "ref", "type", "onhand"]`.

Customize Fields Using Overrides

Using the `overrides` property, you can change the type, label, default values, or field order. Additionally, you can enable multi-select functionality for dropdowns, populate dropdown options dynamically, and customize the behavior of filters on the filter panel to align with specific business requirements

1{
2 "overrides": {
3   "status": {
4     "component": "select",
5     "label": "fc.uvoi.inventorySearch.filterPanel.field.status.label",
6     "multiple": true,
7     "sortPrefix": 1,
8     "extensions": {
9       "hideDefaultValue": true,
10       "source": "fc.mystique.inventory.search.inventory.position.stock.statuses"
11     }
12   },
13   "onHandRange": {
14     "label": "fc.uvoi.inventorySearch.filterPanel.field.onHandRange.label",
15     "sortPrefix": 2
16    }
17  }
18}

1{
2   "catalogue": {
3    "component": "select",
4    "defaultValue": "{{settings.default_ic}}",
5    "extensions": {
6      "source": "fc.mystique.inventory.search.catalogues"
7    }
8  }
9}

For more details on `overrides`, refer to the Component description.

Format Filter Data with inputTemplate and outputTemplate

Use `outputTemplate` to define how filter values are formatted before being sent to the backend. This is especially important when the backend expects structured data, like objects or arrays, instead of plain strings.`inputTemplate` does the reverse—it transforms values from the URL or default values into a shape that the field understands when loading or refreshing the page.

Pairing outputTemplate and inputTemplate for Reliable Filter Behavior

These templates are defined per field using the `overrides` configuration. Both `outputTemplate` and `inputTemplate` must be used together to ensure proper two-way data transformation.

1{
2  "component": "fc.filterPanel",
3  "props": {
4    "allowReadWriteUrlParams": true,
5    "overrides": {
6      "productCatalogue": {
7        "component": "select",
8        "label": "fc.uvoi.inventorySearch.filterPanel.field.productCatalogue.label",
9        "sortPrefix": 1,
10        "defaultValue": "{{settings.default_pc}}",
11        "outputTemplate": "{\"ref\": \"{{value}}\"}",
12        "inputTemplate": "{{ref}}"
13      }
14    }
15  }
16}

Recommended Practice: Using outputTemplate with Contextual Values

To pass structured data to the backend, you can use `outputTemplate` with references to other fields in the same filter panel.Use the `values` context to access values from other fields and `value` for the current field. See the example below.Important: The template can only process string values. If `{{values.catalogue}}` from the example below (or any referenced value) returns an object or array, the template will break.

1{
2  "component": "fc.filterPanel",
3  "props": {
4    "allowReadWriteUrlParams": true,
5    "overrides": {
6      "productCatalogue": {
7        "component": "select",
8        "label": "fc.uvoi.inventorySearch.filterPanel.field.productCatalogue.label",
9        "sortPrefix": 1,
10        "defaultValue": "{{settings.default_pc}}",
11        "outputTemplate": "{\"ref\": \"{{value}}\", \"catalogue\": {\"ref\": \"{{values.catalogue}}\"}}",
12        "inputTemplate": "{{ref}}"
13      }
14    }
15  }
16}

Configure Default Values Using Settings

Add settings as follows to define default values for fields.

1{
2    "settings": [
3    {
4        "name": "fc.oms.inventory.search.product.catalogue.default",
5        "alias": "default_pc"
6    }
7  ]
8}

Defining and Accessing Settings in the Manifest

Settings must be added to the manifest header. You can refer to them using either their name or alias: `"defaultValue": "{{settings.default_pc}}"`.

Related artifacts

Filter Panel Component

Related content

Filter Panel Component

Edited 293 days ago

The `fc.filterPanel` component is a versatile feature for filtering data, supporting two key use cases: standalone list filtering or as an embedded feature within the `fc.list` component for inner list filtering. It enables developers to customize filters via overrides, manage dynamic GraphQL queries, and exclude specific fields. When embedded, it enhances the user experience with dynamic, row-level filtering. Flexible configuration options ensure precise control over behavior and appearance, adapting seamlessly to various scenarios.

Knowledge Tracks Related To This Topic

Filtering and Searching in Fluent OMS Web App

Configuring Wildcard Search with a Two-Layer Model

Filter Panel Component

Complex Filter Component

Select Field Component

Multi-Value Search Component

Filter Panel: Configuration, Customization, and Best Practices

Complex Filter Configuration: Tips and Techniques

Using Predefined Values in Order Tag Filters

Rename Order Tag Filters to Business-Friendly Labels

Enable the Status Filter with Predefined Values

Configure Relative Date Filtering and Default Timeframes

Building Better Filters: From Reusable Components to Customer Search

Add the Component Skeleton to the Manifest

First, add the basic structure for the `fc.filterPanel` in the manifest:

1{
2  "component": "fc.filterPanel",
3  "props": {
4    "overrides": {},
5    "exclude": []
6  }
7}

Define the Data Source for the Filter Panel

If you are using the default Page query, no further steps are needed.
For custom queries, add the `query`, `variables`, and `descendants` properties.

`query` defines the GraphQL query for filtering.
`variables` supply query parameters.
`descendants` define components to display the query results.

1{
2  "component": "fc.filterPanel",
3  "props": {
4    "noCard": true,
5    "query": "query virtualPositions {...}",
6    "variables": { "someVariable": "value" },
7    "descendants": [
8      {
9        "component": "fc.list",
10        "dataSource": "virtualPositions",
11        "props": {
12          "attributes": [
13            {
14              "label": "Virtual Catalogue",
15              "value": "{{node.catalogue.name}}"
16            },
17            {
18              "label": "Available Quantity",
19              "value": "{{node.quantity}}"
20            }
21          ]
22        }
23      }
24    ]
25  }
26}

Removing Borders and Padding for Embedded Filter Panels

Use the `noCard` parameter to remove the border and padding when embedding the filter panel inside other components.

Result

Once configured, the filter panel will display all available default fields based on the page query or custom query.

Exclude Unnecessary Fields

If you see fields that you don’t need, exclude them by adding their names to the `exclude` property: `"exclude": ["createdon", "ref", "type", "onhand"]`.

Customize Fields Using Overrides

1{
2 "overrides": {
3   "status": {
4     "component": "select",
5     "label": "fc.uvoi.inventorySearch.filterPanel.field.status.label",
6     "multiple": true,
7     "sortPrefix": 1,
8     "extensions": {
9       "hideDefaultValue": true,
10       "source": "fc.mystique.inventory.search.inventory.position.stock.statuses"
11     }
12   },
13   "onHandRange": {
14     "label": "fc.uvoi.inventorySearch.filterPanel.field.onHandRange.label",
15     "sortPrefix": 2
16    }
17  }
18}

1{
2   "catalogue": {
3    "component": "select",
4    "defaultValue": "{{settings.default_ic}}",
5    "extensions": {
6      "source": "fc.mystique.inventory.search.catalogues"
7    }
8  }
9}

For more details on `overrides`, refer to the Component description.

Format Filter Data with inputTemplate and outputTemplate

Pairing outputTemplate and inputTemplate for Reliable Filter Behavior

These templates are defined per field using the `overrides` configuration. Both `outputTemplate` and `inputTemplate` must be used together to ensure proper two-way data transformation.

1{
2  "component": "fc.filterPanel",
3  "props": {
4    "allowReadWriteUrlParams": true,
5    "overrides": {
6      "productCatalogue": {
7        "component": "select",
8        "label": "fc.uvoi.inventorySearch.filterPanel.field.productCatalogue.label",
9        "sortPrefix": 1,
10        "defaultValue": "{{settings.default_pc}}",
11        "outputTemplate": "{\"ref\": \"{{value}}\"}",
12        "inputTemplate": "{{ref}}"
13      }
14    }
15  }
16}

Recommended Practice: Using outputTemplate with Contextual Values

1{
2  "component": "fc.filterPanel",
3  "props": {
4    "allowReadWriteUrlParams": true,
5    "overrides": {
6      "productCatalogue": {
7        "component": "select",
8        "label": "fc.uvoi.inventorySearch.filterPanel.field.productCatalogue.label",
9        "sortPrefix": 1,
10        "defaultValue": "{{settings.default_pc}}",
11        "outputTemplate": "{\"ref\": \"{{value}}\", \"catalogue\": {\"ref\": \"{{values.catalogue}}\"}}",
12        "inputTemplate": "{{ref}}"
13      }
14    }
15  }
16}

Configure Default Values Using Settings

Add settings as follows to define default values for fields.

1{
2    "settings": [
3    {
4        "name": "fc.oms.inventory.search.product.catalogue.default",
5        "alias": "default_pc"
6    }
7  ]
8}

Defining and Accessing Settings in the Manifest

Settings must be added to the manifest header. You can refer to them using either their name or alias: `"defaultValue": "{{settings.default_pc}}"`.

Filter Panel: Configuration, Customization, and Best Practices

Key Points

Prerequisites

Settings Creation and Editing Mutations

Steps

Add the Component Skeleton to the Manifest

Define the Data Source for the Filter Panel

Result

Exclude Unnecessary Fields

Customize Fields Using Overrides

Format Filter Data with inputTemplate and outputTemplate

Configure Default Values Using Settings

Related artifacts

Filter Panel Component

Related content

Filter Panel Component

Yulia Andreyanova

Knowledge Tracks Related To This Topic

Building Blocks

By Type

Helpful Resources

Quick Links

Add the Component Skeleton to the Manifest

Define the Data Source for the Filter Panel

Result

Exclude Unnecessary Fields

Customize Fields Using Overrides

Format Filter Data with inputTemplate and outputTemplate

Configure Default Values Using Settings