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
Implementation Steps
For this feature, all changes will be made in settings. Hence, no custom 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...oms.fragment.searchOrderByIDFilter
Context:
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}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",
Add the new reference to fc.mystique.manifest.oms
Add the reference link to fc...oms
1{
2 "type": "reference",
3 "settingName": "fc.mystique.manifest.oms.fragment.searchOrderByIDFilter"
4},
Testing the outcome
Go to Fluent OMS and refresh the screen:
