Fluent OMS webapp UI: get orders by product status

Author: Randy Chan

Published: 02-04-2025

25 min read

#Json

Here are the steps to produce the outcome by configuring the UX manifest setting.

Imagine the expected outcome.
Create a new setting (if it does not already exist): `fc.mystique.manifest.oms.fragment.ordermanagement`
Create a new setting: `fc.oms.mystique.order.search.variantProduct.statuses`
Enhance to `ordermangement` setting to include fc.filterpanel component
update language setting and labels
Test the outcome

Step 1:I would imagine the user can do the following via UI:

Ability to search products by name, ref and status.
The search results of the list of orders should consider the products selected from the filter.

Step 2:The best place to add this feature is in the orders list, which has already been provided in the reference UX manifest. so this step is to create a new setting (if it does not already exist): `fc.mystique.manifest.oms.fragment.ordermanagement`The order manifest template can be found in hereName:` fc.mystique.manifest.oms.fragment.ordermanagement`Context: ACCOUNTContext ID: 0Value Type: JSONJSON Value: copy from Available template link.After this step, your Fluent OMS gets the order management content from your account setting.
Step 3:As part of the product search UI, I want a possible product status list displayed as drop-down/selectable rather than free text entered by the user. So I need to set up a setting to store the list of product status, which can then parse to the field:Name: fc.oms.mystique.order.search.variantProduct.statusesContext: ACCOUNTContext ID: 0Value Type: JSONJSON Value: `[`` "CREATED",`` "INACTIVE",`` "ACTIVE",`` "RECALLED"``]`
No alt provided

Add the new setting to the order management setting `fc.mystique.manifest.oms.fragment.ordermanagement` so that when fc.filterPanel (next step) can use the setting.

1,
2{
3    "name": "fc.oms.mystique.order.search.variantProduct.statuses"
4}

Step 4:Here is my current order list: No alt provided

Before I add the new fc.filterpanel filter, I should disable the fc.list filter to avoid any confusion to the user, so got the setting: `fc.mystique.manifest.oms.fragment.ordermanagement` and looked up fc.list that displays the order list, change the filter->enabled: from `true` to `false` then click on the submit button
No alt provided

Go back to the Order list page; the filter is now disabled from the list: No alt provided

Next, add a simple fc.filterPanel above the fc.list section

1{
2    "component": "fc.filterPanel",
3    "props": {
4        "filtersSource": "orders",
5        "allowReadWriteUrlParams": false,
6        "overrides":{
7        },
8        "exclude": [
9            "createdon",
10            "updatedOn",
11            "quantity",
12            "paidPrice",
13            "currency",
14            "retailerId",
15            "price",
16            "taxPrice",
17            "taxType",
18            "totalPrice",
19            "totalTaxPrice",
20            "type",
21            "status",
22            "ref2",
23            "tag1",
24            "tag2",
25            "tag3"
26        ]
27    }
28},

The simple fc.filterPanel in the order list No alt provided

The filter panel is now visible on the UI with Order Ref and Product Ref as free text fields: No alt provided

The filter is functional when you enter a valid product Ref: No alt provided

The next level is I want the user to be able to search the product Ref by ref, name or status on the filter rather than manually entering the product Ref on the free test field. So, I am going to use the override section in fc.filterPanel to enhance the filter:

1{
2              "component": "fc.filterPanel",
3              "props": {
4                "filtersSource": "orders",
5                "allowReadWriteUrlParams": false,
6                "overrides": {
7                  "productRef": {
8                    "component": "fc.field.filterComplex",
9                    "label": "Product Ref",
10                    "extensions": {
11                      "query": "query products($products_ref: [String!], $products_name: [String!]) {\n  variant: variantProducts(\n    ref: $products_ref\n    name: $products_name\n   ) {\n    edges {\n      node {\n        ref\n  id       name\n    status    attributes {\n          name\n          value\n        }\n      }\n    }\n  }\n}",
12                      "variables": {
13                        "variant_first": 100
14                      },
15                      "searchItemConfig": {
16                        "component": "fc.card.product",
17                        "props": {
18                          "title": "{{node.name}}",
19                          "cardImage": {
20                            "imageUrl": "{{node.attributes.byName.imageUrl}}"
21                          },
22                          "attributes": [
23                            {
24                              "value": "{{node.ref}}"
25                            },
26                            {
27                              "label": "Status:",
28                              "value": "{{node.status}}"
29                            }
30                          ]
31                        }
32                      },
33                      "chipItemConfig": {
34                        "label": "{{node.name}}",
35                        "query": "query products($products_ref: [String!], $products_name: [String!]) {\n  variant: variantProducts(ref: $products_ref, name: $products_name) {\n    edges {\n      node {\n        ref\n        name\n  status     }\n    }\n  }\n}",
36                        "variables": {
37                          "variant_first": 100
38                        }
39                      },
40                      "onChangeValues": {
41                        "value": "node.ref",
42                        "variableName": "products_ref"
43                      },
44                      "exclude": [
45                        "createdon",
46                        "updatedon",
47                        "type",
48                        "gtin",
49                        "summary",
50                        "productcatalogue"
51                      ],
52                      "overrides": {
53                        "name": {
54                          "sortPrefix": 1
55                        },
56                        "ref": {
57                          "sortPrefix": 2
58                        },
59                        "status": {
60                          "component": "select",
61                          "label": "Product Status",
62                          "multiple": true,
63                          "sortPrefix": 3,
64                          "extensions": {
65                            "hideDefaultValue": true,
66                            "source": "fc.oms.mystique.order.search.variantProduct.statuses"
67                          }
68                        }
69                      }
70                    }
71                  }
72                },
73                "exclude": [
74                  "createdon",
75                  "updatedOn",
76                  "quantity",
77                  "paidPrice",
78                  "currency",
79                  "retailerId",
80                  "price",
81                  "taxPrice",
82                  "taxType",
83                  "totalPrice",
84                  "totalTaxPrice",
85                  "type",
86                  "status",
87                  "ref2",
88                  "tag1",
89                  "tag2",
90                  "tag3"
91                ]
92              }
93            },

Refresh the Order List screen and play around the search: No alt provided

Step 5:Update labels with language setting.

1{
2  "component": "fc.filterPanel",
3  "props": {
4    "filtersSource": "orders",
5    "allowReadWriteUrlParams": false,
6    "overrides": {
7      "productRef": {
8        "component": "fc.field.filterComplex",
9        "label": "i18n:fc.om.orders.filterPanel.productRef.label",
10        "extensions": {
11          "query": "query products($products_ref: [String!], $products_name: [String!]) {\n  variant: variantProducts(\n    ref: $products_ref\n    name: $products_name\n   ) {\n    edges {\n      node {\n        ref\n  id       name\n    status    attributes {\n          name\n          value\n        }\n      }\n    }\n  }\n}",
12          "variables": {
13            "variant_first": 100
14          },
15          "searchItemConfig": {
16            "component": "fc.card.product",
17            "props": {
18              "title": "{{node.name}}",
19              "cardImage": {
20                "imageUrl": "{{node.attributes.byName.imageUrl}}"
21              },
22              "attributes": [
23                {
24                  "value": "{{node.ref}}"
25                },
26                {
27                  "label": "i18n:fc.om.orders.filterPanel.productRef.status.label",
28                  "value": "{{node.status}}"
29                }
30              ]
31            }
32          },
33          "chipItemConfig": {
34            "label": "{{node.name}}",
35            "query": "query products($products_ref: [String!], $products_name: [String!]) {\n  variant: variantProducts(ref: $products_ref, name: $products_name) {\n    edges {\n      node {\n        ref\n        name\n  status     }\n    }\n  }\n}",
36            "variables": {
37              "variant_first": 100
38            }
39          },
40          "onChangeValues": {
41            "value": "node.ref",
42            "variableName": "products_ref"
43          },
44          "exclude": [
45            "createdon",
46            "updatedon",
47            "type",
48            "gtin",
49            "summary",
50            "productcatalogue"
51          ],
52          "overrides": {
53            "name": {
54              "sortPrefix": 1
55            },
56            "ref": {
57              "sortPrefix": 2
58            },
59            "status": {
60              "component": "select",
61              "label": "i18n:fc.om.orders.filterPanel.productRef.result.status.label",
62              "multiple": true,
63              "sortPrefix": 3,
64              "extensions": {
65                "hideDefaultValue": true,
66                "source": "fc.oms.mystique.order.search.variantProduct.statuses"
67              }
68            }
69          }
70        }
71      }
72    },
73    "exclude": [
74      "createdon",
75      "updatedOn",
76      "quantity",
77      "paidPrice",
78      "currency",
79      "retailerId",
80      "price",
81      "taxPrice",
82      "taxType",
83      "totalPrice",
84      "totalTaxPrice",
85      "type",
86      "status",
87      "ref2",
88      "tag1",
89      "tag2",
90      "tag3"
91    ]
92  }
93},

Also, change the JSON Value of setting `fc.oms.mystique.order.search.variantProduct.statuses`:`[`` {`` "label": "fc.om.orders.filterPanel.productRef.status.active",`` "value": "ACTIVE"`` },`` {`` "label": "fc.om.orders.filterPanel.productRef.status.inactive",`` "value": "INACTIVE"`` },`` {`` "label": "fc.om.orders.filterPanel.productRef.status.created",`` "value": "CREATED"`` },`` {`` "label": "fc.om.orders.filterPanel.productRef.status.recalled",`` "value": "RECALLED"`` }``]`Go to Setting: LANGUAGE_EN-AU and add the label value pairs to the JSON VALUE:` "fc.om.orders.filterPanel.productRef.status.created": "CREATED",`` "fc.om.orders.filterPanel.productRef.status.active": "ACTIVE",`` "fc.om.orders.filterPanel.productRef.status.inactive": "INACTIVE",`` "fc.om.orders.filterPanel.productRef.status.recalled": "RECALLED",`` "fc.om.orders.filterPanel.productRef.label": "Product",`` "fc.om.orders.filterPanel.productRef.status.label": "Status",`` "fc.om.orders.filterPanel.productRef.result.status.label": "Status",`` "fc.om.orders.index.list.column.updatedOn.heading": "Updated Date",` No alt provided

Step 6: Refresh the Order List and test the outcome: No alt provided

Randy Chan

Fluent Commerce - Expert Services

More from this author

Randy Chan

Create a simple list page in OMS Webapp under 10 minutes

This blog is a quick and simple step to create a list page on OMS. It also contains some code templates that can be used for future reference. Here are the steps to create an OMS list page:

Define the entity query via graphQL and the fields that you want to display on the list;
create a new manifest setting;
add a `fc.list` section to the new setting;
Update language setting to display the labels;
Add a new reference in the manifest route (left navigator panel);

29 May 2025

10 min read

Randy Chan

How to enable location store user to update the location store hours with custom UI Component

At a high level, each location has an opening hours setup that can be used for store activities. One example is during the fulfilment allocation phase, the OMS will calculate the fulfilment expiry time for the store, and the store staff will have sufficient time to process the fulfilment before it expires.
So, in the real world, the opening hours can change week by week, so one of the features that can be added to the OMS Store is to allow the Store Manager to update the opening Schedule hours directly in OMS via the Fluent STORE app.
This guide makes it easier for the store user to update the opening schedule for a location.

20 May 2025

15 min read