Complex Filter Configuration: Tips and Techniques
How-to Guide
Author:
Yulia Andreyanova
Changed on:
9 Apr 2025
Key Points
- This guide offers step-by-step instructions for setting up and customizing the Complex Filter component to achieve precise and efficient data filtering.
- Learn how to set up data sources, use GraphQL queries, and display results easily with card components like Standard Card and Product Card.
- Discover how to customize fields by changing their types, adjusting the field order, and removing unnecessary ones to make the filter simple and effective for your needs.
Prerequisites
Steps
Add the Component Skeleton to the Manifest
Begin by defining the structure for the
`fc.field.filterComplex`1{
2 "component": "fc.field.filterComplex",
3 "label": "Product filter",
4 "extensions": {
5 "filtersSource": "",
6 "query": "",
7 "variables": {},
8 "overrides": {},
9 "searchItemConfig": {},
10 "chipItemConfig": {},
11 "onChangeValues": {},
12 "mode": "single",
13 "exclude": []
14 }
15}Language: plain_text
Name: Defining the Basic Structure for the Complex Filter Component
Description:
Illustrates how to define the foundational setup for the
`fc.field.filterComplex`Configure Data Source
Define the
`query``variables`1"extensions": {
2 "query": parse(gql`query products($products_ref: [String!], $products_name: [String!], $productCatalogue: String!) {
3 variant: variantProducts (ref: $products_ref, name: $products_name, catalogue: {ref: $productCatalogue}) {
4 edges {
5 node { ref name attributes { name value } }
6 }
7 }
8 standard: standardProducts (ref: $products_ref, name: $products_name, catalogue: {ref: $productCatalogue}) {
9 edges {
10 node { ref name attributes { name value } }
11 }
12 }
13 }`),
14 "variables": {
15 "products_first": 100,
16 "productCatalogue": "{{productCatalogue}}"
17 },
18}Language: plain_text
Name: Setting Up Query and Variables for Dynamic Data Fetching
Description:
Demonstrates how to define the GraphQL query and variables required for the
`fc.field.filterComplex`Customize Fields
To refine the displayed data, unwanted fields can be excluded by adding their names to the
`exclude``overrides`1"extensions": {
2 "overrides": {
3 "name": {
4 "sortPrefix": 1
5 },
6 },
7 "exclude": [
8 "createdon",
9 "updatedon",
10 "type",
11 "status",
12 "gtin",
13 "summary",
14 "productcatalogue"
15 ]
16}Language: plain_text
Name: Customizing and Refining Displayed Fields
Description:
Illustrates how to tailor the
`fc.field.filterComplex``exclude`Configure Selection Behavior
Control how users interact with the filter using the
`mode``selectionLimit`1{
2 "extensions": {
3 "mode": "multiple",
4 "selectionLimit": 5
5 }
6}Language: json
Name: Configuring Selection Constraints
Description:
Defines how users interact with the filter by setting selection mode and limiting the number of selectable items
The
`mode``single``multiple``selectionLimit``mode``multiple`Set Modal Size and Layout Columns
Use
`modalDimension``displayColumns`- : This controls the modal size. It accepts "small" (the default) or "medium." This is useful when you expect longer labels or want more visual breathing room.
`modalDimension` - : This setting defines the number of columns for the field layout. Set it to
`displayColumns`or`2`to group more fields horizontally, making better use of screen space.`3`
1"extensions": {
2 "modalDimension": "medium",
3 "displayColumns": 2
4}Language: plain_text
Name: Define Modal Dimensions and Column Layout
Description:
Demonstrates how to use the
`modalDimension``displayColumns`
Display Search Results
Choose between the fc.card.product or fc.card.attribute components to visualize search results. Configure how results are presented using the
`searchItemConfig`1"extensions": {
2 "searchItemConfig": {
3 "component": "fc.card.product",
4 "props": {
5 "title": "{{node.name}}",
6 "cardImage": {
7 "imageUrl": "{{node.attributes.byName.imageUrl}}"
8 },
9 "attributes": [
10 {
11 "value": "{{node.ref}}"
12 }
13 ]
14 }
15 },
16}Language: plain_text
Name: Configuring Search Result Display
Description:
Demonstrates how to use the
`searchItemConfig`Configure Selected Items Display
Use the
`chipItemConfig`1"extensions": {
2 "chipItemConfig": {
3 "label": "{{node.name}}",
4 "query": parse(gql`query products($products_ref: [String!], $products_name: [String!]) {
5 variant: variantProducts (ref: $products_ref, name: $products_name) {
6 edges { node { ref name }}
7 }
8 standard: standardProducts (ref: $products_ref, name: $products_name) {
9 edges { node { ref name } }
10 }
11 }`),
12 "variables": {
13 "products_first": 100,
14 },
15 },
16}Language: plain_text
Name: Displaying Selected Items with chipItemConfig
Description:
Explains how to use the
`chipItemConfig`Handle Selected Values
After items are selected and the modal window is closed, the chosen values must appear in the main input field. Use the
`onChangeValues`The
`onChangeValues`1"extensions": {
2 "onChangeValues": {
3 "value": "node.ref",
4 "variableName": 'products_ref',
5 "visibleItemsThreshold",: 3
6 },
7}Language: plain_text
Name: Mapping Selected Values with onChangeValues
Description:
Describes how to use the
`onChangeValues`Full Configuration Example
Below is a comprehensive example of the fully configured
`fc.field.filterComplex`1"productRef": {
2 "component": "fc.field.filterComplex",
3 "label": "Product filter",
4 "extensions": {
5 "query": parse(gql`query products($products_ref: [String!], $products_name: [String!], $productCatalogue: String!) {
6 variant: variantProducts (ref: $products_ref, name: $products_name, catalogue: {ref: $productCatalogue}) {
7 edges {
8 node {
9 ref
10 name
11 attributes {
12 name
13 value
14 }
15 }
16 }
17 }
18 standard: standardProducts (ref: $products_ref, name: $products_name, catalogue: {ref: $productCatalogue}) {
19 edges {
20 node {
21 ref
22 name
23 attributes {
24 name
25 value
26 }
27 }
28 }
29 }
30 }`),
31 "variables": {
32 "products_first": 100,
33 "productCatalogue": "{{productCatalogue}}"
34 },
35 "searchItemConfig": {
36 "component": "fc.card.product",
37 "props": {
38 "title": "{{node.name}}",
39 "cardImage": {
40 "imageUrl": "{{node.attributes.byName.imageUrl}}"
41 },
42 "attributes": [
43 {
44 "value": "{{node.ref}}"
45 }
46 ]
47 }
48 },
49 "chipItemConfig": {
50 "label": "{{node.name}}",
51 "query": parse(gql`query products($products_ref: [String!], $products_name: [String!]) {
52 variant: variantProducts (ref: $products_ref, name: $products_name) {
53 edges {
54 node {
55 ref
56 name
57 }
58 }
59 }
60 standard: standardProducts (ref: $products_ref, name: $products_name) {
61 edges {
62 node {
63 ref
64 name
65 }
66 }
67 }
68 }`),
69 "variables": {
70 "products_first": 100,
71 },
72 },
73 "onChangeValues": {
74 "value": "node.ref",
75 "variableName": 'products_ref'
76 },
77 "exclude": [
78 "createdon",
79 "updatedon",
80 "type",
81 "status",
82 "gtin",
83 "summary",
84 "productcatalogue"
85 ],
86 "overrides": {
87 "name": {
88 "sortPrefix": 1
89 }
90 }
91 }
92}Language: plain_text
Name: Complete Configuration Example
Description:
Provides a fully configured example of the
`fc.field.filterComplex`
