Colourful Dots Statuses Configuration Guide

How-to Guide

Author:

Fluent Commerce

Changed on:

20 May 2025

Key Points

Setting Example
Defining the Dot for Each Value in the Cell
Setting Naming Convention - fc.order.list.status.column

Steps

Overview

The attribute Column component (`fc.attribute.column`) is a content component that allows displaying configured coloured dots in the cell depending on incoming values.Coloured dots can be added to any cell in the table. The possibility to display coloured dots near the order status is available out of the box for the Order List page. By default, dots are not shown, but after adding the setting `fc.order.list.status.column` on the Account level, they will appear.

Setting Example

This is an example for `fc.order.list.status.column`.

1[
2  {
3    "name": "ASSIGNED",
4    "color": "#552AA8"
5  },
6  {
7    "name": "BOOKED",
8    "color": "#552AA8"
9  },
10  {
11    "name": "CREATED",
12    "color": "#552AA8"
13  },
14  {
15    "name": "PROCESSING",
16    "color": "#552AA8"
17  },
18  {
19    "name": "PICK_PACK",
20    "color": "#552AA8"
21  },
22  {
23    "name": "ESCALATED",
24    "color": "#552AA8"
25  },
26  {
27    "name": "AWAITING_WAVE",
28    "color": "#82BBFF"
29  },
30  {
31    "name": "AWAITING_ARRIVAL",
32    "color": "#82BBFF"
33  },
34  {
35    "name": "AWAITING_COURIER_COLLECTION",
36    "color": "#82BBFF"
37  },
38  {
39    "name": "AWAITING_CUSTOMER_COLLECTION",
40    "color": "#82BBFF"
41  },
42  {
43    "name": "FULFILLED",
44    "color": "#82BBFF"
45  },
46  {
47    "name": "PARTIALLY_FULFILLED",
48    "color": "#82BBFF"
49  },
50  {
51    "name": "COMPLETE",
52    "color": "#16782C"
53  },
54  {
55    "name": "RECIEVED",
56    "color": "#16782C"
57  },
58  {
59    "name": "PENDING_CONSIGNMENT",
60    "color": "#EE6F10"
61  },
62  {
63    "name": "EXPIRED",
64    "color": "#D23B3B"
65  },
66  {
67    "name": "UNCOLLECTED",
68    "color": "#D23B3B"
69  },
70  {
71    "name": "REJECTED",
72    "color": "#D23B3B"
73  },
74  {
75    "name": "CANCELLED",
76    "color": "#D23B3B"
77  },
78  {
79    "name": "UNDEFINED",
80    "color": "#999999"
81  }
82]

Defining the Dot for Each Value in the Cell

It is possible to define the dot colour for each value in the cell. The default Grey colour will be applied for values not defined in the setting. You can find available colours with their code values in the Status Colour Palette.As was mentioned above, it is also possible to display coloured dots in a table other than on the Order List page.Example:We would like to display coloured dots in the Status column on the Billing Account List page.

Step 1: Go Admin → Settings and search for fc.mystique.manifest.oms.fragment.ordermanagement setting.

Open the fragment and click edit.

Step 2: Add the following text below "manifestVersion":"2.0", as it is displayed in the example below:

1{
2"manifestVersion": "2.0",
3"settings":[
4  {
5    "name":"fc.order.list.status.column"
6  },
7  {
8    "name":"fc.billingaccount.list.status.column"
9  }
10]
11}

This configuration allows preloading settings in the cache to prevent making more and more queries as more of these settings are added.

Step 3: While in edit mode, search the page to find the billing path and column Status: (See below)

Step 4. Replace code in lines 1603-1604 in the example above with:

Note The text `"fc.billingaccount.list.status.column"` below denotes the new setting which contains the colour settings.

1{
2  "label": "i18n:fc.om.billing.index.list.column.status.heading",
3  "type": "component",
4  "options": {
5    "component": "fc.attribute.column",
6    "props": {
7      "contentColumnSetting": "fc.billingaccount.list.status.column",
8      "value": "{{status}}"
9    },
10    "dataSource": "node"
11  }
12}

Step 5: Create a new setting fc.billingaccount.list.status.column on the Account level and define colors for statuses like on the example below:

1[
2  {
3    "name": "ACTIVE",
4    "color": "#16782C"
5  },
6  {
7    "name": "INACTIVE",
8    "color": "#D23B3B"
9  }
10]

Step 6 (Optional). While in edit mode of fc.mystique.manifest.oms.fragment.ordermanagement setting, search the page to find the orders path and column Status: (See below)

Note The text `"fc.order.list.status.column"` below denotes the new setting which contains the color settings.

1{
2  "label": "i18n:fc.om.orders.index.list.column.status.heading",
3  "type": "component",
4  "options": {
5    "component": "fc.attribute.column",
6    "props": {
7      "contentColumnSetting": "fc.order.list.status.column",
8      "value": "{{status}}"
9    },
10    "dataSource": "node"
11  }
12}

Setting Naming Convention

We suggest the following template for naming settings for coloured dots configuration:`fc.{table location}.{entity}.{column name}.column``{table location}` - table location in format `{entity}.{list/details}`, e.g., return.list; billingaccount.details.`{entity}` - entity name, used in cases when coloured dots are added to the tables on the details page, e.g., tables Fulfilment or Order Items on the Order Details page.`{column name}` - name of the column to which `fc.attribute.column` component is applied.Examples:fc.order.list.status.columnfc.return.list.status.columnfc.order.details.fulfilment.status.columnfc.order.details.orderitem.status.column

Setting Example

This is an example for `fc.order.list.status.column`.

1[
2  {
3    "name": "ASSIGNED",
4    "color": "#552AA8"
5  },
6  {
7    "name": "BOOKED",
8    "color": "#552AA8"
9  },
10  {
11    "name": "CREATED",
12    "color": "#552AA8"
13  },
14  {
15    "name": "PROCESSING",
16    "color": "#552AA8"
17  },
18  {
19    "name": "PICK_PACK",
20    "color": "#552AA8"
21  },
22  {
23    "name": "ESCALATED",
24    "color": "#552AA8"
25  },
26  {
27    "name": "AWAITING_WAVE",
28    "color": "#82BBFF"
29  },
30  {
31    "name": "AWAITING_ARRIVAL",
32    "color": "#82BBFF"
33  },
34  {
35    "name": "AWAITING_COURIER_COLLECTION",
36    "color": "#82BBFF"
37  },
38  {
39    "name": "AWAITING_CUSTOMER_COLLECTION",
40    "color": "#82BBFF"
41  },
42  {
43    "name": "FULFILLED",
44    "color": "#82BBFF"
45  },
46  {
47    "name": "PARTIALLY_FULFILLED",
48    "color": "#82BBFF"
49  },
50  {
51    "name": "COMPLETE",
52    "color": "#16782C"
53  },
54  {
55    "name": "RECIEVED",
56    "color": "#16782C"
57  },
58  {
59    "name": "PENDING_CONSIGNMENT",
60    "color": "#EE6F10"
61  },
62  {
63    "name": "EXPIRED",
64    "color": "#D23B3B"
65  },
66  {
67    "name": "UNCOLLECTED",
68    "color": "#D23B3B"
69  },
70  {
71    "name": "REJECTED",
72    "color": "#D23B3B"
73  },
74  {
75    "name": "CANCELLED",
76    "color": "#D23B3B"
77  },
78  {
79    "name": "UNDEFINED",
80    "color": "#999999"
81  }
82]

Colourful Dots Statuses Configuration Guide

Key Points

Steps

Setting Example

Step 1: Go Admin → Settings and search for fc.mystique.manifest.oms.fragment.ordermanagement setting.

Step 2: Add the following text below "manifestVersion":"2.0", as it is displayed in the example below:

Step 3: While in edit mode, search the page to find the billing path and column Status: (See below)

Step 4. Replace code in lines 1603-1604 in the example above with:

Step 5: Create a new setting fc.billingaccount.list.status.column on the Account level and define colors for statuses like on the example below:

Step 6 (Optional). While in edit mode of fc.mystique.manifest.oms.fragment.ordermanagement setting, search the page to find the orders path and column Status: (See below)

Fluent Commerce

Building Blocks

By Type

Helpful Resources

Quick Links

Setting Example

Step 1: Go Admin → Settings and search for fc.mystique.manifest.oms.fragment.ordermanagement setting.

Step 2: Add the following text below "manifestVersion":"2.0", as it is displayed in the example below:

Step 3: While in edit mode, search the page to find the billing path and column Status: (See below)

Step 4. Replace code in lines 1603-1604 in the example above with:

Step 5: Create a new setting fc.billingaccount.list.status.column on the Account level and define colors for statuses like on the example below:

Step 6 (Optional). While in edit mode of fc.mystique.manifest.oms.fragment.ordermanagement setting, search the page to find the orders path and column Status: (See below)