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 . Click here for the how-to guide.
`order.ref2`
Steps
Implementation 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
Create 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
Update 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]
Add 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]
Testing the outcome
Go to Fluent OMS and refresh the screen:
