OMX Webapp UI - Search order by customer phone number or email
How-to Guide
Extend
Author:
Randy Chan
Changed on:
22 May 2025
Key Points
- This is an enhanced feature that allows users (e.g., Customer Service Representatives) to look up customer orders by using either the customer's email address or phone number.
- This feature can be achieved by configuration in the setting manifest without any custom components nor custom rules.
- This article will provide the following:
- code snippet of the search Order by Customer phone/email manifest
- Language settings
- Display the page on the left panel menu by adding a code snippet in the setting:
`fc.mystique.manifest.oms`
Steps
Create a new Setting: fc.mystique.manifest.oms.fragment.customerWithOrders
Name: fc...oms.fragment.customerWithOrders
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.customerWithOrders.nav",
8 "icon": "view_list"
9 },
10 "pages": [
11 {
12 "path": "customerWithOrders",
13 "type": "page",
14 "component": "fc.page",
15 "data": {
16 "query": "query { customerWithOrders:customers{ edges{ node{ retailer {id} ref id firstName lastName primaryEmail primaryPhone status } } }}",
17 "variables": {}
18 },
19 "nav": {
20 "label": "i18n:fc.customerWithOrders.index.nav",
21 "icon": "MdTab"
22 },
23 "props": {
24 "title": "customers List"
25 },
26 "descendants": [
27 {
28 "component": "fc.filterPanel",
29 "props": {
30 "allowReadWriteUrlParams": true,
31 "overrides": {},
32 "exclude": [
33 "promotionOptIn",
34 "username",
35 "status",
36 "updatedOn",
37 "createdOn",
38 "title",
39 "department",
40 "country",
41 "timezone"
42 ]
43 }
44 },
45 {
46 "component": "fc.list",
47 "props": {
48 "dataSource": "customerWithOrders",
49 "filter": {
50 "enabled": false
51 },
52 "defaultPageSize": 10,
53 "responsiveness": "card",
54 "row": {
55 "expansion": {
56 "toggle": true,
57 "descendants": [
58 {
59 "component": "fc.filterPanel",
60 "props": {
61 "noCard": true,
62 "query": "query customerOrders ($retailerId: [Int!], $customerLink: String!, $orders_first: Int) {\n customerOrders:orders( customerLink:{ref:$customerLink}, retailerId: $retailerId, first: $orders_first) {\n edges {\n node {\n id\n ref\n retailer {\n id\n ref\n tradingName\n }\n type\n status\n retailer {\n id\n }\n workflowRef\n workflowVersion\n totalPrice\n totalTaxPrice\n updatedOn createdOn\n attributes {name value type} customer {\n ref id\n firstName\n lastName\n }\n }\n }\n }\n}",
63 "variables": {
64 "orders_first": 100,
65 "retailerId": "{{node.retailer.id}}",
66 "customerLink": "{{node.ref}}"
67 },
68 "exclude": [
69 "customerLink",
70 "Type",
71 "Ref2",
72 "Tag1",
73 "Tag2",
74 "Tag3",
75 "updatedOn",
76 "retailerId",
77 "TotalTaxPrice",
78 "TotalPrice"
79 ],
80 "descendants": [
81 {
82 "component": "fc.list",
83 "dataSource": "customerOrders",
84 "props": {
85 "attributes": [
86 {
87 "label": "i18n:fc.customerWithOrders.index.list.column.orderRef.heading",
88 "value": "{{node.ref}}",
89 "link": "#/orders/{{node.id}}/{{node.retailer.id}}/{{node.ref}}",
90 "condition": "{{and node.id node.retailer.id node.ref}}"
91 },
92 {
93 "label": "i18n:fc.customerWithOrders.index.list.column.orderStatus.heading",
94 "value": "{{node.status}}"
95 },
96 {
97 "label": "i18n:fc.customerWithOrders.index.list.column.orderRetailerID.heading",
98 "value": "{{node.retailer.id}}"
99 },
100 {
101 "label": "i18n:fc.customerWithOrders.index.list.column.orderCustomerRef.heading",
102 "value": "{{node.customer.ref}}"
103 },
104 {
105 "label": "i18n:fc.customerWithOrders.index.list.column.orderCreatedOn.heading",
106 "value": "{{node.createdOn}}"
107 }
108 ]
109 }
110 }
111 ]
112 }
113 }
114 ]
115 }
116 },
117 "attributes": [
118 {
119 "label": "i18n:fc.customerWithOrders.index.list.column.ref.heading",
120 "template": "{{node.ref}}"
121 },
122 {
123 "label": "i18n:fc.customerWithOrders.index.list.column.FirstName.heading",
124 "template": "{{node.firstName}}"
125 },
126 {
127 "label": "i18n:fc.customerWithOrders.index.list.column.lastName.heading",
128 "template": "{{node.lastName}}"
129 },
130 {
131 "label": "i18n:fc.customerWithOrders.index.list.column.primaryEmail.heading",
132 "template": "{{node.primaryEmail}}"
133 },
134 {
135 "label": "i18n:fc.customerWithOrders.index.list.column.primaryPhone.heading",
136 "template": "{{node.primaryPhone}}"
137 }
138 ]
139 }
140 }
141 ]
142 }
143 ]
144 }
145 ]
146}Add language details in setting: LANGUAGE_EN-AU
Add the following into the : LANGUAGE_EN-AU
1"fc.customerWithOrders.index.list.column.orderRef.heading": "Order Ref",
2"fc.customerWithOrders.index.list.column.orderStatus.heading": "Order Status",
3"fc.customerWithOrders.index.list.column.orderRetailerID.heading": "Retailer ID",
4"fc.customerWithOrders.index.list.column.orderCustomerRef.heading": "Customer Ref",
5"fc.customerWithOrders.index.list.column.orderCreatedOn.heading": "Order Created Date",
6"fc.customerWithOrders.nav": "Search Order by Email / Phone",
7"fc.customerWithOrders.index.nav": "customer with Orders",
8"fc.customerWithOrders.index.title": "Customers List",
9"fc.customerWithOrders.index.list.column.ref.heading": "ref",
10"fc.customerWithOrders.index.list.column.id.heading": "id",
11"fc.customerWithOrders.index.list.column.FirstName.heading": "First Name",
12"fc.customerWithOrders.index.list.column.lastName.heading": "Last Name",
13"fc.customerWithOrders.index.list.column.primaryEmail.heading": "Email",
14"fc.customerWithOrders.index.list.column.primaryPhone.heading": "Phone",
15"fc.customerWithOrders.index.list.column.status.heading": "Status",Add the reference link in fc.mystique.manifest.oms
Go to : fc...oms and add the following:
1,
2{
3 "type": "reference",
4 "settingName": "fc.mystique.manifest.oms.fragment.customerWithOrders"
5},Test the result
Refresh your browser and go to the page. The user should be able to look up customers by phone or email and see their orders.
OMX Webapp UI Search order by customer phone number or email
OMX Webapp UI Search by customer phone number or email
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.
