Fluent Commerce Logo
Docs
Sign In

OMS Web App: Search order by ID using the fc.filterPanel

How-to Guide

Author:

Randy Chan

Changed on:

10 June 2025

Key Points

  • This use case is where users can look up OMS orders using order ID.
  • Typically, the graphQL query orderById is used to look up an order by ID. However, it can only look up one order at a time without a wildcard search.
  • This article provides an alternative approach that allows users to search for orders by ID or even with a wildcard. 
  • This approach utilises the new UI component fc.filterPanel, which does not require custom
    `rules`
    .
  • An alternative way to achieve the outcome is to use
    `order.ref2`
    . Click here for the how-to guide.

Steps

Step arrow right iconImplementation Steps

For this feature, all changes will be made in settings. Hence, no custom rule is required. Anyone who has access to settings can implement this feature.

  • Create a new Setting: fc.mystique.manifest.oms.fragment.searchOrderByIDFilter
  • Update Language setting
  • Add the new reference to fc.mystique.manifest.oms
  • Testing the outcome

Step arrow right iconCreate a new Setting: fc.mystique.manifest.oms.fragment.searchOrderByIDFilter

Name: fc.mystique.manifest.oms.fragment.searchOrderByIDFilter

Context: ACCOUNT

Context ID: 0

Value Type: JSON

JSON Value:

1{
2    "manifestVersion": "2.0",
3    "routes": [
4        {
5            "type": "section",
6            "nav": {
7                "label": "i18n:fc.om.searchOrderByIdFilter.detail.navHeading.title",
8                "icon": "insert_chart"
9            },
10            "pages": [
11                {
12                    "path": "feature/searchOrderByIdFilter",
13                    "type": "page",
14                    "component": "fc.page",
15                    "data": {
16                        "query": "query($id: ID!)  {orderById(id: $id){id ref retailer { id } totalPrice type status items { edges { node { currency quantity } } } createdOn customer { id firstName lastName } } }"
17                    },
18                    "nav": {
19                        "label": "i18n:fc.om.searchOrderByIdFilter.detail.pageHeading.title",
20                        "icon": "info"
21                    },
22                    "props": {
23                        "title": "i18n:fc.om.searchOrderByIdFilter.detail.pageHeading.title"
24                    },
25                    "descendants": [
26                        {
27                            "component": "fc.filterPanel",
28                            "props": {
29                                "allowReadWriteUrlParams": true,
30                                "additionalFields": [
31                                    {
32                                        "component": "input",
33                                        "props": {
34                                            "label": "ID",
35                                            "defaultValue": "",
36                                            "variableName": "id"
37                                        }
38                                    }
39                                ],
40                                "exclude": [
41                                    "createdon",
42                                    "updatedOn",
43                                    "ref",
44                                    "type",
45                                    "status",
46                                    "quantity",
47                                    "paidPrice",
48                                    "currency",
49                                    "price",
50                                    "taxPrice",
51                                    "taxType",
52                                    "totalPrice",
53                                    "totalTaxPrice"
54                                ]
55                            }
56                        },
57                        {
58                            "component": "fc.card.attribute",
59                            "props": {
60                                "title": "i18n:fc.om.searchOrderByIdFilter.detail.card.title",
61                                "width": "full",
62                                "dataSource": "orderById",
63                                "attributes": [
64                                    {
65                                        "label": "i18n:fc.om.searchOrderByIdFilter.index.list.column.orderRef.heading",
66                                        "template": "{{ref}}",
67                                        "link": "#/orders/{{id}}/{{retailer.id}}/{{ref}}"
68                                    },
69                                    {
70                                        "label": "i18n:fc.om.searchOrderByIdFilter.index.list.column.retailerId.heading",
71                                        "template": "{{retailer.id}}"
72                                    },
73                                    {
74                                        "label": "i18n:fc.om.searchOrderByIdFilter.index.list.column.id.heading",
75                                        "template": "{{id}}"
76                                    },
77                                    {
78                                        "label": "i18n:fc.om.searchOrderByIdFilter.index.list.column.customer.heading",
79                                        "template": "{{{customer.firstName}}} {{{customer.lastName}}}"
80                                    },
81                                    {
82                                        "label": "i18n:fc.om.searchOrderByIdFilter.index.list.column.type.heading",
83                                        "template": "{{type}}"
84                                    },
85                                    {
86                                        "label": "i18n:fc.om.searchOrderByIdFilter.index.list.column.status.heading",
87                                        "template": "{{status}}"
88                                    },
89                                    {
90                                        "label": "i18n:fc.om.searchOrderByIdFilter.index.list.column.NoOfLines.heading",
91                                        "template": "{{items.edges.length}}"
92                                    },
93                                    {
94                                        "label": "i18n:fc.om.searchOrderByIdFilter.index.list.column.orderValue.heading",
95                                        "template": "{{currency totalPrice items.edges.0.node.currency}}"
96                                    }
97                                ]
98                            }
99                        }
100                    ]
101                }
102            ]
103        }
104    ]
105}

Language: json

Name: fc.mystique.manifest.oms.fragment.searchOrderByIDFilter

Description:

This setting includes the nav section and page that will be added to the fc.mystique.manifest.oms later.

At the high level, the page contains fc.filterPanel, which has an additionalField of ID, upon searching, the result will then populate onto the fc.card.attribute

Step arrow right iconUpdate Language setting

Add the following name value pairs to the language setting. In this example, I will be using LANGUAGE_EN-AU:

1"fc.om.searchOrderByIdFilter.detail.navHeading.title": "Search Order by ID (filter)",
2"fc.om.searchOrderByIdFilter.detail.pageHeading.title": "Search Order By ID",
3"fc.om.searchOrderByIdFilter.detail.card.title": "Search Result",
4"fc.om.searchOrderByIdFilter.index.list.column.orderRef.heading": "Order Ref",
5"fc.om.searchOrderByIdFilter.index.list.column.retailerId.heading": "Retailer ID",
6"fc.om.searchOrderByIdFilter.index.list.column.id.heading": "Order ID",
7"fc.om.searchOrderByIdFilter.index.list.column.customer.heading": "Customer Name",
8"fc.om.searchOrderByIdFilter.index.list.column.type.heading": "Order Type",
9"fc.om.searchOrderByIdFilter.index.list.column.status.heading": "Status",
10"fc.om.searchOrderByIdFilter.index.list.column.NoOfLines.heading": "Number of Line items",
11"fc.om.searchOrderByIdFilter.index.list.column.orderValue.heading": "Order Value",

Language: json

Name: language setting

Description:

[Warning: empty required content area]
No alt provided

Step arrow right iconAdd the new reference to fc.mystique.manifest.oms

Add the reference link to fc.mystique.manifest.oms

1{
2    "type": "reference",
3    "settingName": "fc.mystique.manifest.oms.fragment.searchOrderByIDFilter"
4},

Language: json

Name: Code snippet of searchOrderByIDFilter

Description:

[Warning: empty required content area]
No alt provided

Step arrow right iconTesting the outcome

Go to Fluent OMS and refresh the screen:

No alt providedNo alt provided