Filter Panel: Configuration, Customization, and Best Practices
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
Steps
Add 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}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}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 . 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.
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}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}
