Fluent Commerce Logo
Docs
Help & Feedback

UI Component Library

The OMX UX Framework includes a ready-to-use library of UI building blocks called Components. These building blocks are available within Manifests and Reference Modules. You can build new or extend existing UI Components via the Component SDK.

Analytics Visualisation Component

UI ComponentThe Analytics Visualisation Component displays a single analytics query result from the Fluent Analytics Backend. It renders metric tiles and visualizations based on configured Analytics Queries settings.Depending the configuration, this component can be placed standalone on a page, where it will make its own GraphQL query, or it can also read data from the page level query. This is useful when analytics data is the main content on the page. 

GraphQL Data Provider Component

UI ComponentThe GraphQL Data Provider component is a wrapper component that changes the data context for its descendants. It is useful when you want to display a separate set of data that is different from the page query. Additionally, it provides more control options on how data is queried, including the ability to paginate and fetch data in bulk. Note that the maximum amount of data retrieved with the component is restricted.

List Component (fc.list)

UI ComponentStandard table card that takes array-like content and renders it as a table. While the Material UI table is available directly, the Mystique Table component adds several enhancements, including:
  • mapping, transforming, and translating values from the GraphQL API
  • pagination automatically hooked up to the page-level query
  • per-row and bulk user action support driven by the workflow

Fulfilment List Field Component

UI Component
  • The Fulfilment List Field Component allows users to select and filter Fulfilments. In the reference solution, these are then used to create Waves.
  • Readers will understand the functionality of this component, how it can be configured and extended in order to implement different Store Fulfilment use cases.

Page Component

UI ComponentThe Page component is the basic top-level layout component, that renders a header bar (with user actions) and a set of children in a Material UI Grid.

Order Item Details Drawer Component

UI Component`fc.order.itemDetails` is a custom content component that allows displaying order item details on a drawer.

USB Barcode Scanner Component

UI ComponentAn invisible component that accepts input from a USB scanner in HID mode (keyboard simulation) and performs an action on a scan. This component activates when nothing on the screen is currently selected and enables efficient scanning of parcel labels to perform various functions, like marking a customer order as collected.Most commonly, the Barcode Scanner component is included in Fluent Store manifests centered around collections.

Complex Filter Component

UI ComponentThe Complex Filter Component dynamically fetches and filters data based on a configurable GraphQL request. Depending on the configuration, it enables users to search for entities using tailored filters and displays results in either Standard Card or Product Card formats. This adaptability ensures precise data retrieval and a consistent, user-friendly presentation.

Multi-Value Search Component

UI ComponentThe Multi-Value Search Component enables flexible entry and management of multiple values in a single field by converting inputs into chips while removing duplicates and ignoring invalid entries. It supports two search modes: Context Search (default, partial matches) and Exact Search (`exactSearch: true`, strict case-sensitive matching). The output format is configurable via the `type` property, returning either an array of strings (`text`, default) or an array of numbers (`number`).

Sortable List

UI ComponentThe Sortable List component provides an intuitive, drag-and-drop interface for reordering items where the sequence has functional or business significance. It enhances user experience by allowing direct manipulation of list order, eliminating the need for manual priority inputs or complex form controls.

Nullable Field Component

UI ComponentThe Nullable Field Component provides a simple way to handle fields that need to support both `null` and explicit overrides. It combines a toggle and an input into one reusable component, making it ideal for input types that do not natively support empty values (e.g., 'number', 'integer', 'int', 'select', 'boolean').When the toggle is OFF, the field is treated as `null`. When the toggle is ON, the field accepts and sends an explicit value.

Profile Modal Component

UI ComponentThe Profile Modal is a custom UI component that confirms profile actions to make sure changes are applied intentionally.

Sourcing Modal Component

UI ComponentThe Sourcing Modal is a custom UI component designed to support confirmation workflows for sensitive strategy-related actions, specifically activation, inactivation, and removal of sourcing strategies. 

Date-Time Field Component

UI ComponentThis reusable Date-Time Field Component offers an intuitive calendar-based UI for selecting a date. Below the calendar, clearly labeled input fields allow users to enter precise date and time values. Outputs are returned in ISO 8601 format to maintain consistency across systems.

Sourcing Profile Drawer

UI ComponentThe Sourcing Profile Drawer is a side-panel UI component used to edit sourcing profiles and manage strategies within them. It displays structured form fields for profile attributes, sourcing strategies, and fallback strategies. The drawer opens alongside the main view, allowing users to add or update configuration details without navigating away from the profile details page.

Configurable Drawer Component

UI ComponentThe Configurable Drawer is a Mystique content component that displays other components in the hidden by-default section. The drawer button click event expands this hidden section on the right-hand side of the screen.The component allows you to redefine the context for its descendants.

Attribute Card Component

UI ComponentThe Attribute Card implements the basic card that maps GraphQL responses onto a two-column card with keys on the left and values on the right.

Activity Component

UI Component
  • The Activity component displays events and related entities for a lifecycle of the entity that the page represents.
  • This document describes what is an activity component, its properties, and sample usage.

Pack Field Component

UI ComponentThe Pack Component in Fluent Store is designed to organize the packing process by outlining each box's contents in multi-parcel shipments, setting parcel parameters, rejecting items, and providing detailed information for each item through the Pack Wizard.

Pick List Component

UI ComponentThe Pick list field allows for extra information to be displayed for each item within the picking step of the Wave Wizard. The purpose of this field is to enable more complex and efficient picking by providing users with more information about the item.
  • The Pick list provides an expandable table that can be configured to display information in any order.
  • Additional components can be added to an expandable row that is accessed on click.
  • The quantity selector can be configured to start with either 0 or the maximum amount required.

Wizard Component

UI ComponentThe Wizard page component is an alternative top-level layout component for displaying multi-step wizard-like flows, like the wave pick/pack process.It takes a set of "step" configurations, and chooses which user actions and other descendants to display based on the conditions provided in those steps. Describes the usage of `fc.page.wizard.action`.

Returns Component

UI ComponentThe Returns Field Component provides an end user experience for creating Returns through an OMX web application. Example usage of this component is provided as part of the Returns configuration guide

Multi-Parcel Component

UI Component
  • Multi-Parcel is an alternative Wave configuration to the Packing step for Fluent Store. The Multi-Parcel field component supports the ability to create multiple parcels per fulfilment.
  • It supports the ability to create common parcel types for a location. These parcel types can contain useful information such as dimensions and weight attributes to improve the packing process.
  • To get started with the Multi-Parcel field component in your Fluent Store configuration we recommend the following knowledge base guide.

Select Field Component

UI ComponentThe Select Component is a field component designed for use in any form. It allows users to view a list of options as a drop-down regardless of the number of items in the list. This sets it apart from the field, which displays a drop-down only when the list contains more than three items; otherwise, it switches to a radio button group. The component supports flexible value sourcing. It can retrieve options either via a query, from a predefined setting, or from a manifest.

Filter Panel Component

UI ComponentThe `fc.filterPanel` component is a versatile feature for filtering data, supporting two key use cases: standalone list filtering or as an embedded feature within the `fc.list` component for inner list filtering. It enables developers to customize filters via overrides, manage dynamic GraphQL queries, and exclude specific fields. When embedded, it enhances the user experience with dynamic, row-level filtering. Flexible configuration options ensure precise control over behavior and appearance, adapting seamlessly to various scenarios.

Page Section Component

UI ComponentThe page section is a simple component that renders all children. It is primarily used for grouping multiple components together for index-based components like the tab card.There are no properties on the page section, but standard configuration options like descendants and datasource work as usual.

Date Range Field Component

UI ComponentThis document describes the Date Range Field Component properties and sample usage. The component allows users to select a date and time range in the relevant form.

Date Range Forwarding Wrapper

UI ComponentThe `fc.daterange.wrapper.forwarder` is a wrapper designed to forward date range data to a URL. 

BPP Metrics Wrapper

UI ComponentThe `fc.list.wrapper.bppmetrics` is a wrapper for the `fc.list` component. It transforms data from the Metrics API to a list-readable format, enabling seamless visualization of batch-processing metrics.

Dashboard Threshold Component

UI ComponentThe dashboard threshold component displays a card with a number referring to the total records returned by a GraphQL query. Tiles can be configured to change colour based on configured threshold limits to indicate their status.Each tile is configurable with a high and low threshold value, allowing users to view any 'total' data records.

Conditional Component

UI ComponentOptionally render descendants only if certain criteria are met. This can be used to show different components depending on the results of the page query, for example:
  • a different location card when the order is home delivery vs customer collection
  • a completely different screen when a wave is in a given state

Link Component

UI ComponentThe Link Component is a text element with a hyperlink, designed for scenarios where a link needs to be applied. It can be used anywhere and integrates seamlessly with conditional logic when wrapped within a Conditional Component. This allows the link's display or functionality to adapt based on the conditions defined in the manifest (e.g. when the link should be active or inactive).

Integer Range Filter Component

UI ComponentThe Integer Range Filter component allows users to filter data by specifying an integer range. It provides two input fields: a minimum value and a maximum value, where users can manually enter one or both values. Once the range is set, the filter displays only the data that falls within the selected range.

Setting Form Component

UI ComponentThe Setting Form Component displays Fluent Settings as user-friendly UI elements, enabling a no-code experience for configuring Fluent web apps. By presenting settings as UI components instead of JSON, business users can directly configure Fluent, reducing their reliance on developers.This article details the capabilities of the Settings Form Component and provides a guide on how to use this component alongside related features to create a no-code experience within an Fluent Commerce web app.

Circular Progress Component

UI ComponentThe Circular Progress Component visually indicates the ongoing progress of a loading process.

Image Card Component

UI ComponentThe Image Card Component enables you to display an image alongside other components within a card.For example, you can place download buttons below an image to prompt the reader to interact with the buttons.

Print Button

UI ComponentThe Print Button combines the page query with an HTML setting to generate a document that can be printed. A user can use this component to print pick lists, packing slips, order invoices, and more.

Add Item Dialogue Component

UI Component
  • This article describes how to add Add item button (`OpenDataModalButton`) to the drawer and display the list of product items in a modal window ('Add Item' dialogue).

Add Item Dialogue Component

UI ComponentThis article describes adding the 'Add item' button (OpenDataModalButton) to a drawer and displaying the 'Add Item' dialogue in a modal window. This allows users to easily review product items in an order before submitting.

Repeater Component

UI ComponentThe Repeater component allows you to display a set of components once per item in an array or connection. For example, use the repeater to show a table of items for each article in an order.

Product Card Component

UI ComponentThe Product Card Component is a consistent way to represent product information across the applications. Alongside the typical card features it can also display an image, attributes, a count, and a close icon, while also allowing nested components for added functionality.

Attribute Input Component

UI ComponentThe Attribute Input Component is a default field component that allows you to add/edit Fluent entity Attributes in a drawer. 

IPU and IPC Report Component

UI ComponentCustom component to display a page with an IPU/IPC report chart that displays data filtered by three parameters:  report type, time period, and granularity.

Tile Metric Component

UI ComponentThe Tile Metric component can be used to display a metrics data and the title of that metric within a single tile.

Collapsible Text Component

UI ComponentThe Collapsible Text component takes a string and a maximum number of characters into its props. When the string exceeds the maximum number of characters the text is cut off. Then `More` hyperlink is displayed to allow the user to expand the label to its full length, exposing the remaining text.

JSON Viewer Component

UI Component`fc.attribute.json` is a custom content component that displays data in JSON format. If data contains a valid JSON, it will be parsed and displayed properly, while invalid data will be represented as is (raw).

Auto Refresh Page Component

UI ComponentThe Auto Refresh Page Component will automatically refresh the current page every 10 seconds. This is useful for ensuring that the information displayed to the user is as accurate as possible with new entities and status updates reflected in pages within web apps at regular intervals.

Grid Component

UI ComponentA base grid component that lays data out in a four-column format. The primary use case of this component is to display product attributes, as the data must be keys and their corresponding values.

Page Section Header Component

UI ComponentThis component allows rendering a title on top of the page (fc.page) component. In addition, this component can take "descendants" and render them on the right side of the component, this is useful for action buttons.The three common use cases for the Section Header component are:
  • render a title on top of the page.
  • render an icon + title on top of the page.
  • render an icon + title on the top left of the page, and some other component/s on the top right of the page (passed as descendants, generally a print button).

Collapsible Attributes Component

UI ComponentCollapsible Entity Attributes is a component that can be used to improve the user experience when interacting with a lot of attributes. It has the ability to:
  • Display these attributes on one line separated by commas
  • Display these attributes line by line.
  • Collapse and expand based on the number of characters (for one-line)
  • Collapse and expand based on the number of lines (for line-by-line).

Area Chart Component

UI ComponentA chart that displays graphically quantitative data. It is based on the line chart. The area between the axis and line is emphasized with colors. Commonly two or more quantities are compared with an area chart.

Area Chart Wrapper

UI ComponentAn area chart wrapper that converts data from Metrics API to chart-readable format.

Accordion Component

UI ComponentThe Accordion component is a Mystique content component that can expand to show its child components. It is useful for hiding details with the ability to pull it up when needed.

Location Id Component

UI Componentfc.attribute.locationId is a custom field component that allows to add / edit a Location on a drawer. The component’s key feature is the possibility to add a Location Id only in situations when it is necessary. Let’s consider the following situations, when a user is created
  • When new user with user type “AGENT” is created, the Location Id is a required parameter;
  • When user with other type is created, the Location Id is an optional parameter.

Retailer Id Component

UI ComponentRetailer Id (fc.attribute.retailerId) Component is a custom field component that allows to add/edit a Retailer on a drawer.

Events Search Component

UI ComponentThe Events Search is a plugin component for events:
  • filtering,
  • displaying,
  • exporting.
The component fetches events using the REST Event API based on the selected search criteria.

Download Print Button

UI ComponentThere are some Fluent APIs that directly produce HTML pack slips.These files can't be directly linked as they require authentication, so the Download Print Button exists to allow them to be downloaded directly from the page.

Bar Chart Component

UI ComponentA chart that represents categorical data with rectangular bars with heights or lengths proportional to the values that they represent.

Line Chart Component

UI ComponentA line chart visually represents data points over a continuous interval, typically along a horizontal axis. It offers a clear depiction of trends, patterns, or fluctuations in the data by connecting points with lines, aiding in easy comprehension of the data's trajectory over time or across categories. The x-axis commonly denotes time or categories, while the y-axis represents the numerical values being measured, providing a quick snapshot of data relationships.

Column Component

UI ComponentA simple component that allows you to place other components in a column. Typically used to improve the layout and accessibility of items on a page, see a sample use case and the properties of this component below.

Multi Card Component

UI ComponentThe Multi Card Component can be used to nest multiple components within the same card.

List Feed Wrapper

UI ComponentThe list feed wrapper is a wrapper for the fc.list component that converts data from the Metrics API to a list-readable format.

List Source Wrapper

UI ComponentThe list source wrapper is a wrapper for the fc.list component that converts data from the Metrics API to a list-readable format.

Bar Chart Wrapper

UI ComponentA bar chart wrapper that converts data from the Metrics API to chart-readable format.

Gauge Chart Wrapper

UI ComponentThe gauge chart wrapper will convert Metrics data to be displayed in a gauge. This is configurable for different color and fill thresholds.

Gauge Chart Component

UI ComponentThis component is a chart that indicates progress and consists of an arc with two sectors (active and inactive) and two texts - primary (big bold one) and secondary (normal size and font weight).

Page Filter Select Component

UI ComponentThe page filter select component allows to change variables on the page-level query.

Event Details Drawer Component

UI ComponentThis new component adds a drawer functionality to event searching, when a user clicks on an event it will now open a drawer with the event details instead of navigating to another page. This allows users not to lose search results and stop waiting for page navigation while going back and forth between the list of events. Learn more about the functionality of this component below.

Attribute Column Component

UI Component`fc.attribute.column` is a content component that gives the following options:
  • apply different styles to multiline data represented in a cell of `fc.list` component;
  • display multiline data in collapsed/expanded view;
  • display configured coloured icons in the cell depending on income values;
  • display sorted data in the cell.

Tab Card Component

UI ComponentThe tab card is used to put tabs at the top of a group of card-like components (Attributes Card, List Component, etc) and allows users to switch between them. This can help to reduce the number of clicks a user takes when navigating between pages.The descendants of the Tab Card component are used as the content of the tabs, linked by index. The first descendant will be shown while the first tab is active. For cases where multiple descendants should be shown under a single tab, use the Page Section component (or similar) to group them.

User Action: Inline

UI ComponentThe inline user action generates a form from a workflow-configured user action and places it directly into the page as a card.This is useful when the main reason for a page existing is to trigger that user action, especially when coupled with the conditional component to create a wizard-like flow.

JSON Editor Component

UI Component`fc.attribute.jsoneditor` is a custom content component that allows editing data in JSON format. The component has additional editing commands which can be accessed by right mouse button click on the component editor field.

Google Map Pin Component

UI ComponentGoogle Map component is a custom content component that displays the location (put pinpoint (location identifier/pin)) according to the location latitude and longitude. The component supports multi-language.

Inline Print Button (legacy)

UI ComponentThe Print Button combines the page query with an HTML setting to generate a document that can be printed.On click, a modal preview is presented with a print button that triggers the browser's print action. From there the document may be printed directly or saved out to PDF using a print-to-pdf tool.This can be used to produce things like pick lists, packing slips, and order invoices.Note that this feature is a legacy design.  The new print component can be found here: New Print Component.

Shipment Details drawer Component

UI ComponentShipment Details drawer is a custom content component that displays detailed information about a particular shipment on a drawer.

Extended Address Input

UI Component`ExtendedAddressInput` is a Mystique component that can support the extended address in order details and a digital/e-mail shipping method. The component supports delivery addresses with lengthy street/city/company name fields (255 characters).
Building Blocks
Building Blocks
Packages & Modules
All UI Components
Workflows
Settings
Interface Contracts
All Rules
By Type
All Types
Knowledge Tracks
Extend Knowledge
Glossary
All How-to Guides
Sitemap
Topics
Use Cases
Helpful Resources
Platform Limits
Support Policy
Service Level Agreement (SLA) - Enterprise
Deprecation Policy
Extend Knowledge Content – Terms and Conditions
System and Organization Controls (SOC) 3 Report
Data Privacy Addendum
Security Policy
Quick Links
For Partners
Customer Resources
Webinars and Events
Certifications
Training Resources
Knowledge Tracks
Builders Portal
Product Update Newsletter
Industry Blogs & Events Newsletter
Trust Center Portal

Copyright © 2024-2026 Fluent Retail Pty Ltd (trading as Fluent Commerce). Unless otherwise expressly stated in a current written agreement with Fluent Commerce or any of its affiliates or on any single page of the docs.fluentcommerce.com site, use of the materials on this site is strictly limited to viewing by individuals over 18 years old for legitimate commercially appropriate reasons; and any downloading, copying or other actions or uses of any kind or by any means of the materials on this site, including by artificial intelligence tools, is strictly prohibited. All other rights reserved.

Fluent Logo