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 .
- 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 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 .
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 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 `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 `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 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.
Except as otherwise stated in the Extend Knowledge Content site policy, the content on this page is licensed under the Creative Commons Attribution 4.0 Licence, and any code samples that appear on this page are licensed under the Apache 2.0 Licence, unless any code sample forms part of the Fluent Order Management Platform code. Neither of these licences apply to any content on any other page that can be reached via a link on this page unless otherwise specified on that other page. If you wish to use any of the Extend Knowledge Content, you must do so in compliance with the licenses referred to above and the Extend Knowledge Content site policy, including attribution in the manner set out on this page.
