UI Component Library

The 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.

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

The 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.

Standard 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

The 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.

Retailers configuration contains:

• Retailer List page
• Retailer Details page

The 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`.

This 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.

The 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.

• 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).

This 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.

The 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.

The 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.

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

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

• 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.

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

The 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`

Optionally 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

• 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.

The 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.

A 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.

This 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 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).

A 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.

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

The 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.

There 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.

The 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.

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

A 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.

A 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.

The 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.

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

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

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

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

This 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).

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

This 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.

`fc.attribute.column`

• 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.

The 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.

The 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.

The 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.

Google 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.

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