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`1{
2 "component": "fc.filterPanel",
3 "props": {
4 "overrides": {},
5 "exclude": []
6 }
7}Language: plain_text
Name: Basic Structure
Description:
Filter Panel Component basic structure
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`, and`variables`properties.`descendants`
- defines the GraphQL query for filtering.
`query` - supply query parameters.
`variables` - define components to display the query results.
`descendants`
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}Language: plain_text
Name: Custom Query and Components
Description:
Example for a custom query and components to display the query results
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``"exclude": ["createdon", "ref", "type", "onhand"]`Customize Fields Using Overrides
Using the
`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}Language: json
Name: Example 1
Description:
An example demonstrating how to change a field type, adjust the order of fields on the filter panel, enable multi-select functionality, and populate dropdown options within a filter on the filter panel.
1{
2 "catalogue": {
3 "component": "select",
4 "defaultValue": "{{settings.default_ic}}",
5 "extensions": {
6 "source": "fc.mystique.inventory.search.catalogues"
7 }
8 }
9}Language: json
Name: Example 2
Description:
Set a Default Value for a Field
For more details on
`overrides`Format Filter Data with inputTemplate and outputTemplate
Use
`outputTemplate``inputTemplate`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}Language: json
Name: Example: Sending Object Instead of Raw Value
Description:
What’s happening here?
`outputTemplate``{ ref: value }``inputTemplate`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}Language: plain_text
Name: Example: Using outputTemplate with Cross-Field References in Filter Panel
Description:
In the example:
-
`value``outputTemplate `-
`values`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}Language: json
Name: Defaults for Filters: Setting Configuration
Description:
`name``alias`
