OMX Webapp UI - Search order by customer phone number or email
How-to Guide
Extend
Author:
Randy Chan
Changed on:
26 Mar 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.mystique.manifest.oms.fragment.customerWithOrders
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.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}Language: json
Name: fc.mystique.manifest.oms.fragment.customerWithOrders
Description:
The page uses the component fc.filterPanel to look up customer entries. Then, the FC.list has a row expansion with fc.filterPanel to look up orders. The order result has a link to the order detail page.
Add language details in setting: LANGUAGE_EN-AU
Add the following into the setting: 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",Language: json
Name: these values will be used by fc.mystique.manifest.oms.fragment.customerWithOrders
Description:
language name value pair
Add the reference link in fc.mystique.manifest.oms
Go to Setting: fc.mystique.manifest.oms and add the following:
1,
2{
3 "type": "reference",
4 "settingName": "fc.mystique.manifest.oms.fragment.customerWithOrders"
5},Language: json
Name: Add a reference to link to the new manifest
Description:
Add a reference to link to the new manifest
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 order by customer phone number or email
