List Component (fc.list)

Home
Essential Knowledge
By Type
Building Blocks
APIs
Releases

UI Component

Changed on:

30 May 2025

Overview

Standard table card that takes array-like content and renders it as a table. While the Material UI table is available directly, the 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

Plugin Name	Core

The standard library of components.

0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.list, shared.components.material.DynamicList (for backward compatibility with v1 manifests)

Detailed technical description

Page Size

The list's page size can be controlled by updating the page query to either set the `first` or `last` parameter if required.

As part of the filter feature, the variables are automatically generated by the OMX framework for any connection-type node, so you don't need to define them yourself. But be aware that they will be prefixed with the name (or alias if provided) of the statement that contains the connection object.

In the following example that would be `orders`, so any variables passed in to control the orders connection would begin with `orders_`.

Note: Using `first` or `last` will not affect the of items. The of items will stay the same, the only difference is whether you start the first page or the last page of items.

1{
2    "type": "page",
3    "path": "orders",
4    "component": "fc.page",
5    "data": {
6        "query": "query ($retailerId: [Int!], $orders_first: Int) {\n  orders(retailerId: $retailerId, first: $orders_first) {\n    edges {\n      node {\n        id\n        ref\n        retailer {\n          id\n    ref\n      tradingName\n        }\n        type\n        status\n        retailer {\n          id\n        }\n        workflowRef\n        workflowVersion\n        totalPrice\n        totalTaxPrice\n        createdOn\n   attributes {name value type}      customer {\n          id\n          firstName\n          lastName\n        }\n      }\n    }\n  }\n}",
7        "variables": {
8            "orders_first": 100,
9            "retailerId": "{{activeRetailer.id}}"
10        }
11    },
12    "descendants": [{ 
13      "component": "fc.list", 
14      "dataSource": "orders", 
15      "defaultPageSize": 100,
16      "props": {/* config options here */} 
17    }]
18}
19

Note

The usual GraphQL limitations apply, meaning that it's currently only possible to sort by primary key.

ListColumn

`ListColumn` extends `DynamicValue` and inherits all fields. In addition:

*Name*	*Type*	*Required*	*Default*	*Description*
align	`left` / `center` / `center` / `right`	No	`left`	Align column contents
hideBelow	`xs` / `sm` / `md` / `lg` / `xl`	No	none	Hide column at media breakpoints smaller than this
hideAbove	`xs` / `sm` / `md` / `lg` / `xl`	No	none	Hide column at media breakpoints larger than this
enableCopyIcon	`displayAlways` / `displayOnHover`	No	none	the visibility of the copy icon next to the column or field value. Use `'displayOnHover'` to show the icon only when hovering, or `'displayAlways'` to keep it visible at all times. Note: The copy icon is only functional for plain text values. It will not copy content rendered by non-text components such as colored indicators or expandable text (e.g., "more/less"). On mobile and tablet devices, the icon is always visible regardless of the configuration to ensure accessibility.

ListFilterConfig

*Name*	*Type*	*Required*	*Default*	*Description*
enabled	`true`	Yes	`false`	Flag to enable filters on this list
exclude	`string[]`	No	none	List of filter options to hide.

ListAction

*Name*	*Type*	*Required*	*Default*	*Description*
type	`UserAction`	Yes	none	Currently, it is the only supported value, but it is likely to be expanded in the future.
name	`string`	Yes	none	Name of the to enable on this list (as defined by the ).

Density Config

*Name*	*Type*	*Required*	*Default*	*Description*
toggle	`boolean`	No	`false`	Flag to enable toggle buttons on this list.
initial	`compressed / standard`	No	`standard`	Show list in compressed or standard mode.

RowConfig

*Name*	*Type*	*Required*	*Default*	*Description*
expansion	`MystiqueComponentInstance`	No	none	Configure a component to display after each row in a list. This component will receive the row data as its `data` . When the expansion row should be optional, the component should simply return `null` for rows that don't meet the criteria to display an expansion object.

MystiqueComponentInstance

*Name*	*Type*	*Required*	*Default*	*Description*
component	`string`	Yes	none	Component alias.
roles	`string[]`	No	none	Roles assigned to the user.
descendants	`MystiqueComponentInstance[]`	No	none	List of components that can be nested inside.
props	`Record <string, any>`	No	none	Key-value set unique to the nested component.
toggle	`boolean`	No	none	Flag to enable expansion toggle on this list

RowComponentDetailed

*Name*	*Type*	*Required*	*Default*	*Description*
mobile	`MystiqueComponentInstance`	No	none	Component that overrides the list mobile view only.
desktop	`MystiqueComponentInstance`	No	none	Component that overrides the list desktop view only.

Properties

*Name*	*Type*	*Required*	*Default*	*Description*
title	`string`	No	none	The Title text of the card.
highlight	`MystiqueThemeColor` / `string` (hex value)	No	none	Show a coloured highlight above the card to denote status in cases like dashboard cards.
attributes	`ListColumn[]` (extension of `DynamicValue[]`)	Yes	none	List of columns to show in the table. The label will be used as the column header and the value re-evaluated for every row within the table. Columns may be selectively shown above or below certain media breakpoints, mapping to device widths (in pixels). By default, these breakpoints are: xs, extra-small: 0px sm, small: 600px md, medium: 960px lg, large: 1280px xl, extra-large: 1920px Hide Below prevents the column appearing when the device resolution is lower than breakpoint + 1, so columns marked `hideBelow:'xs'` would not show on devices smaller than 600px. Hide Above can be useful when aggregating several columns for small screen resolutions. I.e. on mobile devices, 3 columns are marked `hideBelow:'xs'` but one column marked `hideAbove:'xs'` contains all three values with line breaks between.
rowLink	`string`	No	none	Link the entire row to the in this template string. RowLink is evaluated per line, so can use values from the row object. e.g. `"rowLink":"/orders/{{node.id}}"` on a list of orders would resolve to a link to the page for that column. Note: 1) If no rowLink is provided and the attributes object contains exactly one linked column, that link will be used by default as the rowLink template. 2) If only one rowLink is provided, clicking anywhere on the list/card will navigate to the linked page. If more than one rowLink is provided on the list/card, then clicking anywhere on the list/card will not navigate to the linked page, as there will be more than one linked page available on the list/card.
defaultPageSize	`number`	Yes	10	Sets the default number of rows per page value.
rowsPerPageOptions	`number[]`	No	[10, 25, 100]	Changes the number of rows displayed according to the selected value.
filter	`ListFilterConfig`	No	none	Enables and configures the filter bar at the top of the list. Filter options will be derived from the dataSource of the list, so if the dataSource is pointing to a connection, any parameters of that connection will be presented as options, although parameters with types that don't have a matching field implementation are excluded, along with any listed in the explicit "exclude" config option. The filter configuration modal takes its components from the FieldRegistry, so the available filter can be extended by SDK users. See FieldRegistry for more details.
actions	`ListAction[]`	No	none	Enables bulk user actions on this list. Each row will show a checkbox, and when any rows are selected a button will appear at the top of the list to open that . If the requires additional attributes, a single form will be presented and the same values will be passed in to each selected item (e.g. on a "Mark as arrived" that takes a storage area, all articles will be added to the same storage area). The actions functionality assumes that all rows in the list are eligible for the same (e.g. by subtype, status etc) so keep that in mind when configuring. The in the first row is used to look up the available user actions, so check that first if no checkboxes are appearing.
density	`DensityConfig`	No	false	Adds to configure row height. The following options are available: Compressed view with row height 28 px; Standard view with row height 52 px The row height will not be changed if the expansion is used.
row	`RowConfig`	No	none	Per-row configuration options.
responsiveness	`table` / `card` / `forcecard`	No	`table`	Mobile-responsive option for the list. When set to "card", table rows will turn into cards on mobile devices. When set to `forcecard` responsiveness to be ignored and card view to be set for both mobile and desktop devices.
vAlign	`top` / `centre` / `center` / `middle` / `bottom`	No	`middle`	Vertical alignment of of the content within the list. Content can be aligned to the following: `bottom` `middle` / `centre` / `center` `top`
rowComponent	`MystiqueComponentInstance \| RowComponentDetailed`	No	none	Component or set of components to override the default list views.
loading	`string`	No	none	The property is useful when data processing is delayed, as it helps visualize the loading state. The loading property acts as a template and, based on the provided parameters, a boolean value. If the value is true, a skeleton will appear in the cell to indicate loading, replacing the data until it's ready. Template example: `'{{ eq order.status "BOOKED" }}'`

Configuration example

1{
2  "component": "shared.components.material.DynamicList",
3  "dataSource": "orders",
4  "props": {
5    "title": "i18n:fc.om.orders.index.list.title",
6    "filter": {
7      "enabled": true,
8      "exclude": [
9        "workflowRef",
10        "workflowVersion"
11      ]
12    },
13    "row": {
14      "expansion": {
15        "toggle": true,
16        "component": "fc.button.bar",
17        "descendants": [
18          {
19            "component": "fc.button.print.download",
20            "props": {
21              "label": "Print",
22              "href": "string",
23              "filename": "string"
24            }
25          }
26        ],
27        "props": {
28          "title": "Title"
29        }
30      }
31    },
32    "density": {
33      "toggle": true,
34      "initial": "compressed"
35    },
36    "loading": "{{ eq order.status \"BOOKED\" }}",
37    "actions": [
38      {
39        "type": "UserAction",
40        "name": "FLAG_AS_URGENT"
41      }
42    ],
43    "attributes": [
44      {
45        "label": "i18n:fc.om.orders.index.list.column.orderRef.heading",
46        "value": "{{node.ref}}",
47        "link": "#/orders/{{node.id}}"
48      },
49      {
50        "label": "i18n:fc.om.orders.index.list.column.image.heading",
51        "type": "image",
52        "value": "https://fluentcommerce.com/wp-content/uploads/2019/07/fluent-commerce-logo.svg"
53      },
54      {
55        "label": "i18n:fc.om.orders.index.list.column.customer.heading",
56        "value": "{{node.customer.firstName}} {{node.customer.lastName}}",
57        "enableCopyIcon": "displayAlways"
58      },
59      {
60        "label": "i18n:fc.om.orders.index.list.column.status.heading",
61        "value": "{{node.status}}",
62        "enableCopyIcon": "displayOnHover"
63      },
64      {
65        "label": "i18n:fc.om.orders.index.list.column.orderType.heading",
66        "value": "{{node.type}}"
67      },
68      {
69        "label": "i18n:fc.om.orders.index.list.column.orderValue.heading",
70        "value": "${{node.totalPrice}}"
71      },
72      {
73        "label": "i18n:fc.om.orders.index.list.column.retailerName.heading",
74        "value": "{{node.retailer.tradingName}}"
75      }
76    ]
77  }
78}

Version History

2023-07-31

v23.7.31

N/A

2024-07-22

24.7.22

The component extension with the `rowComponentDetails`.

2024-10-08

24.10.8

The component extension with the `loading`.

2025-06-16

25.06.16

The component extension with the `enableCopyIcon`.

Recommended Placement

None