Fluent OMS WebApp UI: Getting Orders by Product Status
Authors:
Randy Chan, Anita Gu
Changed on:
23 May 2025
Key Points
- A simple guide to add product status as part of the order search filter.
- This feature will utilize OOTB components, so it does not require any customer components.
Steps
What to Expect
Here is an overview of the steps to get orders by product status by configuring the UX setting.
- Create a new setting in
`fc.mystique.manifest.oms.fragment.ordermanagement` - Creating a setting to store the list of product statuses -
`fc.oms.mystique.order.search.variantProduct.statuses` - Adding the new setting to the Order Management setting
- Disabling the
`fc.list`filter - Adding a new
`fc.filterpanel`filter - Enabling searching through the Product Ref by ref, name or status using the filter
- Updating labels in language settings
- Refreshing the Order List and testing the outcome
Step 1: Creating a new setting
A new setting will be created in the Orders list, assuming it does not already exist. This list is provided in the reference UX , which can be found here.
Name: `fc.mystique.manifest.oms.fragment.ordermanagement`
Context:
Context ID: 0
Value Type: JSON
JSON Value: Copy from the available template link.
After this step, Fluent OMS will obtain the management content from your settings.
Step 2: Creating a setting to store the list of product statuses, which can then be parsed to the field
So that the product status list can be displayed as a drop-down/selectable item rather than free text entered by the user in the Product Search UI, the list of statuses should be stored in a setting.
Name: `fc.oms.mystique.order.search.variantProduct.statuses`
Context:
Context ID: 0
Value Type: JSON
JSON Value:
1[
2 "CREATED",
3 "INACTIVE",
4 "ACTIVE",
5 "RECALLED"
6]Step 3: Adding the new setting to the Order Management setting
After the new setting is added to `fc.mystique.manifest.oms.fragment.ordermanagement`, `fc.filterPanel` (found in the next step) can use it.
1,
2{
3 "name": "fc.oms.mystique.order.search.variantProduct.statuses"
4}
5
Step 4: Disabling the fc.list filter
Before a new `fc.filterpanel` filter is added, the `fc.list` filter should be disabled to avoid causing confusion. Find the `fc.list` component in the setting `fc.mystique.manifest.oms.fragment.ordermanagement` and change the `enabled` property from `true` to `false`, then click on the submit button.
Upon returning to the List page, the filter is now disabled from the list.
Step 5: Adding a new fc.filterpanel filter
This is what the List should currently look like.
A simple `fc.filterPanel` will now be added 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 `fc.filterPanel` should look like this in the List.
The filter panel will now be visible on the UI with Ref and Product Ref as free text fields.
The filter is functional when you enter a valid Product Ref.
Step 6: Enabling searching through the Product Ref by ref, name or status using the filter
The override section in `fc.filterPanel` can be utilized to enhance the filter, allowing the user to search the Product Ref by ref, name, or status in the filter rather than manually entering the Product Ref in the free text fields.
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 List screen and the search should be functional.
Step 7: Updating labels in language settings
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},Change the JSON Value of setting `fc.oms.mystique.order.search.variantProduct.statuses` to
1[
2 {
3 "label": "fc.om.orders.filterPanel.productRef.status.active",
4 "value": "ACTIVE"
5 },
6 {
7 "label": "fc.om.orders.filterPanel.productRef.status.inactive",
8 "value": "INACTIVE"
9 },
10 {
11 "label": "fc.om.orders.filterPanel.productRef.status.created",
12 "value": "CREATED"
13 },
14 {
15 "label": "fc.om.orders.filterPanel.productRef.status.recalled",
16 "value": "RECALLED"
17 }
18]Go to the setting LANGUAGE_EN-AU and add the following label value pairs to the JSON VALUE:
1"fc.om.orders.filterPanel.productRef.status.created": "CREATED",
2"fc.om.orders.filterPanel.productRef.status.active": "ACTIVE",
3"fc.om.orders.filterPanel.productRef.status.inactive": "INACTIVE",
4"fc.om.orders.filterPanel.productRef.status.recalled": "RECALLED",
5"fc.om.orders.filterPanel.productRef.label": "Product",
6"fc.om.orders.filterPanel.productRef.status.label": "Status",
7"fc.om.orders.filterPanel.productRef.result.status.label": "Status",
8"fc.om.orders.index.list.column.updatedOn.heading": "Updated Date",` `
Step 8: Refreshing the Order List and testing the outcome
The List should now be searchable using the new filters.
