Building Better Filters: From Reusable Components to Customer Search
How-to Guide
Authors:
Yulia Andreyanova, Alexey Kaminskiy
Changed on:
5 Sept 2025
Key Points
- This guide shows how to reuse filtering components designed for inventory management in other areas, using the Order List page as an example.
- The guide outlines integrating ready-made components such as Multi-Value Search for filtering by order references and enabling Customer Search with the new Complex Filter, backed by an extended orders query.
Prerequisites
Steps
Start with the Default Manifest
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:Configure the Filter Panel
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`.
- 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.
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`.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.
Final Step: Add the Fragment to the Main Manifest
After configuring the new fragment, add it to your main manifest.
