List Component
Changed on:
27 Sept 2024
Overview
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
| Plugin Name | Core |
|---|
The standard library of mystique components.
v1.0.0
Initial changelog entry.
Alias
fc.list, shared.components.material.DynamicList (for backward compatibility with v1 manifests)
Detailed technical description
Sort Order and Page Size
The list page size and sort order can be controlled by updating the page query to either set the
`first``last`GraphQL 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``orders_`1{
2 "type": "page",
3 "path": "orders",
4 "component": "fc.page",
5 "data": {
6 "query": "{ orders { edges { node { id ref type status } } } }",
7 "variables": {
8 "orders_last": 100 // 'last' means newest first
9 }
10 },
11 "descendants": [{
12 "component": "fc.list",
13 "dataSource": "orders",
14 "props": {/* config options here */}
15 }]
16}Language: java
Name: Example
Description:
[Warning: empty required content area]ListColumn
`ListColumn``DynamicValue`Name | Type | Required | Default | Description |
align | | No | | Align column contents |
hideBelow | | No | none | Hide column at media breakpoints smaller than this |
hideAbove | | No | none | Hide column at media breakpoints larger than this |
ListFilterConfig
Name | Type | Required | Default | Description |
enabled | | Yes | | Flag to enable filters on this list |
exclude | | No | none | List of filter options to hide. |
ListAction
Name | Type | Required | Default | Description |
type | | Yes | n/a | Currently, it is the only supported value, but it is likely to be expanded in the future. |
name | | Yes | n/a | Name of the user action to enable on this list (as defined by the workflow User Action). |
Density Config
Name | Type | Required | Default | Description |
toggle | | No | | Flag to enable toggle buttons on this list. |
initial | | No | | Show list in compressed or standard mode. |
RowConfig
Name | Type | Required | Default | Description |
expansion | | No | n/a | Configure a component to display after each row in a list. This component will receive the row data as its When the expansion row should be optional, the component should simply return |
toggle | | No | N/A | Flag to enable expansion toggle on this list |
MystiqueComponentInstance
Name | Type | Required | Default | Description |
component | | yes | - | Component alias. |
roles | | no | none | Roles assigned to the user. |
descendants | | no | none | List of components that can be nested inside. |
props | | no | none | Key-value set unique to the nested component. |
RowComponentDetailed
Name | Type | Required | Default | Description |
mobile | | no | none | Component that overrides the list mobile view only. |
desktop | | no | none | Component that overrides the list desktop view only. |
Properties
Name | Type | Required | Default | Description |
title | | No | The Title text of the card. | |
highlight | | No | Show a coloured highlight above the card to denote status in cases like dashboard cards. | |
attributes | | Yes | 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.
Hide Below prevents the column appearing when the device resolution is lower than breakpoint + 1, so columns marked Hide Above can be useful when aggregating several columns for small screen resolutions. I.e. on mobile devices, 3 columns are marked | |
rowLink | | No | Link the entire row to the location in this template string. RowLink is evaluated per line, so can use values from the row object. 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 | | No | Enables and configures the filter bar at the top of the list. | |
actions | | No | 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 user action. | |
density | | No | false | Adds controls to configure row height. The following options are available: Compressed view with row height 28 px; Standard view with row height 52 px |
row | | No | Per-row configuration options. | |
responsiveness | | No | Mobile-responsive option for the list. When set to "card", table rows will turn into cards on mobile devices. | |
vAlign | | No | | Vertical alignment of of the content within the list. Content can be aligned to the following:
|
rowComponent | | No | Component or set of components to override the default list views. | |
loading | | No | 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, returns 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: |
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": [ "workflowRef", "workflowVersion" ]
9 },
10 "row":{
11 "expansion":{
12 "toggle":true,
13 "component": "fc.button.bar",
14 "descendants": [
15 {
16 "component": "fc.button.print.download",
17 "props": {
18 "label": "Print",
19 "href": "string",
20 "filename": "string"
21 }
22 }
23 ],
24 "props": {
25 "title": "Title"
26 }
27 }
28 },
29 "density": {
30 "toggle": true,
31 "initial": "compressed"
32 },
33 "loading": "{{ eq order.status \"BOOKED\" }}",
34 "actions": [
35 { "type": "UserAction", "name": "FLAG_AS_URGENT" }
36 ],
37 "attributes": [
38 {
39 "label": "i18n:fc.om.orders.index.list.column.orderRef.heading",
40 "value": "{{node.ref}}",
41 "link": "#/orders/{{node.id}}"
42 },
43 {
44 "label": "i18n:fc.om.orders.index.list.column.image.heading",
45 "type": "image",
46 "value": "https://fluentcommerce.com/wp-content/uploads/2019/07/fluent-commerce-logo.svg"
47 },
48 {
49 "label": "i18n:fc.om.orders.index.list.column.customer.heading",
50 "value": "{{node.customer.firstName}} {{node.customer.lastName}}"
51 },
52 {
53 "label": "i18n:fc.om.orders.index.list.column.status.heading",
54 "value": "{{node.status}}"
55 },
56 {
57 "label": "i18n:fc.om.orders.index.list.column.orderType.heading",
58 "value": "{{node.type}}"
59 },
60 {
61 "label": "i18n:fc.om.orders.index.list.column.orderValue.heading",
62 "value": "${{node.totalPrice}}"
63 },
64 {
65 "label": "i18n:fc.om.orders.index.list.column.retailerName.heading",
66 "value": "{{node.retailer.tradingName}}"
67 }
68 ]
69 }
70}Language: json
Version History
v23.7.31
N/A
24.7.22
The component extension with the
`rowComponentDetails`24.10.8
The component extension with the
`loading`Recommended Placement
None
