Fluent Commerce Logo
Docs
Sign In

Filter Panel: Configuration, Customization, and Best Practices

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.
No alt text provided

Steps

Step arrow right iconAdd the Component Skeleton to the Manifest

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

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

Step arrow right iconDefine 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}
Result

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

Step arrow right iconExclude 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"]`.

Step arrow right iconCustomize Fields Using Overrides

Using the `overrides` property, you can change the type, label, default values, or field . 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.

Step arrow right iconFormat 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.

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}
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}

Step arrow right iconConfigure 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}