Filter Panel: Configuration, Customization, and Best Practices

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}}"`.

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