OMS Web App: Search order by ID using the fc.filterPanel
How-to Guide
Author:
Randy Chan
Changed on:
5 Sept 2025
Key Points
This use case is for users who want to look up orders using the 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 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
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}
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",