Begin by using the default manifest`fc.mystique.manifest.oms.fragment.ordermanagement` as your base. If you're unfamiliar with overriding a manifest or need access to the baseline manifest, refer to the 'Overriding the Default Manifest' guide.This guide will focus exclusively on the Orders menu item within the manifest, so the full fragment won’t be included here.
Refine the GraphQL Query
Use a GraphQL query tailored for this feature. Start with an existing query, but remove unnecessary fields to ensure simplicity and efficiency. Modify the query to support the customer input field. Make sure the `$customer` variable is defined and passed in the query. Here’s the adjusted version:
After refining the query, set up the Filter Panel Component to enable advanced filtering options. The configuration guide provides detailed instructions on how to do this.
Key Optimizations:
Exclude Unwanted Filters: Use the `exclude` property to remove unnecessary fields, simplifying the filtering process.
Handle Duplicate Field Names: Fields like `status` may appear in both orders and order items. Excluding `status` removes it from both. To avoid this, explicitly define filters using `additionalFields`.
Handle Duplicate Field Names
Fields like `status` may appear in both orders and order items. Excluding `status` will remove it for both. To avoid this, explicitly define filters with `additionalFields`.
Override Filters for Custom Components: Some fields, like `type`, may need custom configurations. Use the `overrides` property to define custom dropdown values. You can do this through the manifest by listing options or by creating a JSON setting at the ACCOUNT or RETAILER level. The examples below show both methods.
• To ensure filters display in the correct order: The `sortPrefix` value determines the order of fields in the filter panel and is treated as a string. This means lexicographic sorting is applied — for example, "10" comes before "2". To avoid incorrect ordering when you define more than nine fields, use consistent two-digit formatting such as "01", "02", ..., "10", "11", up to "99".• For a working example of a setting-based filter definition, check the fc.oms.mystique.inventory.search.inventory.position.stock.statusessetting.
Optimize Filters with Preloaded Settings
To improve performance, ensure client-specific filters load via settings. Add any new settings to the manifest’s settings configuration. Preloading settings into the cache is critical—it prevents redundant queries as you scale the number of filters.Why Preload? Caching settings mean fewer backend requests, leading to faster responses even as complexity grows.
Search Orders by Customer Name, Email, or Phone
Customer filtering on the Order List can be configured in two ways, depending on the level of flexibility and UX required.Option 1: Complex Filter Component (Recommended for advanced use cases)Use a Complex Filter Component to enable flexible search by customer fields such as `username`, `firstName`, `lastName`, `primaryEmail`, and `primaryPhone`. This setup provides an enhanced user experience through autocomplete, searchable cards, and chip-based selection.The component connects to the `customers` data source and maps selected values to the `customer` variable in the query using the `SearchCustomerInput` structure.It supports dynamic rendering of selected users as chips and configurable card views for search results, and hides irrelevant fields to keep the filter UI clean and focused.
Use this configuration in the `additionalFields` array of the filter panel. It complements other filters and extends customer search across the order list.Option 2: Basic Filter FieldsUse the Multi-Value Search Component to add individual input fields to target nested variables such as `customer.firstName`, `customer.lastName`, etc. These fields are configured directly in the `additionalFields` array of the `fc.filterPanel`.
The `orders`query includes a `customer`filter powered by the `SearchCustomerInput`type. This enables filtering by `ref`, `firstName`, `lastName`, `primaryEmail`, `primaryPhone`, or `username`.Each field accepts multiple values and applies OR logic within the same field — for example, filtering by first names “Alice” or “John”. Across different fields, conditions are combined using AND logic, such as matching customers with either of those names and a phone number containing “123”.
Use Multi-Value Search Component for Filtering by Order References
When users need to search for multiple order references at once, precision matters; the Multi-Value Search Component handles this well. Each input becomes a chip, duplicates are removed, and extra spaces are trimmed.Below is how to configure the `ref` field for exact, case-sensitive matching. The chip display collapses after three entries for a cleaner UI.
Use this in the `fc.filterPanel``props.overrides` section, alongside your other custom filters.
Add the Grid with the Embedded Filter Panel
Use the standard List component for the grid. Configure the row setting of the `fc.list` component to embed the filter panel into the grid.
A separate query is executed to fetch an order by its ID and associated fulfillments for the selected order.
Like the filter panel, exclude unnecessary fields and override others to match specific requirements. For fulfillment status and delivery type filters, either create JSON settings or define dropdown values through the manifest. In the example below, the options are set using ACCOUNT level JSON settings: `fc.oms.mystique.fulfilment.search.statuses` and `fc.oms.mystique.fulfilment.search.delivery.types`.
The grid itself, also a `fc.list `component, is configured with a data source and attributes similar to those used for fulfillment on the Order Details Page.
Start with the Default Manifest