Docs
Changed on:
2 July 2024
Using the
`fc.repeater`
| Plugin Name | Core |
|---|
The standard library of mystique components.
Initial changelog entry.
fc.repeater
Option 1
The Repeater component enables the repetition of any UI components per record from the data source. This enhances flexibility in displaying complex nested records without needing to know their exact count in advance. The result is a more intuitive and user-friendly UI, particularly effective for managing detailed and varied data sets. This capability ensures dynamic rendering and improves the overall user experience by seamlessly accommodating diverse and intricate data structures.
Option 2
The Repeater component enhances the visualization of multi-level elements by allowing the repetition of any UI components per record from the data source. This capability is essential for rendering complex nested records dynamically, providing flexibility in displaying data in multiple tables instead of a single one. It organizes information into more user-friendly, segmented views, improving navigation and data comprehension.
Using the Repeater component, any UI component(s) can be repeated for each record from the data source. This functionality is ideal for pages containing complex nested records (like the Mixed Basket Order details page, where an order can include multiple fulfilment choices, each containing various fulfilments and order items). This approach enhances flexibility and improves the user experience by dynamically rendering complex nested records.
The component can be utilized in a drawer.
1{
2"label": "i18n:fc.om.orders.detail.list.orderItems.column.ref.heading",
3"type": "component",
4"options": {
5 "component": "fc.drawer.button",
6 "props": {
7 "label": "{{node.ref}}",
8 "color": "primary",
9 "title": "Order Item Details",
10 "descendants": [
11 {
12 "component": "fc.repeater",
13 "dataSource": "node.waves",
14 "descendants": [
15 {
16 "component": "fc.accordion",
17 "props": {
18 "defaultExpanded": true,
19 "summary": "SUMMARY",
20 "details": {
21 "components": [
22 {
23 "component": "fc.list",
24 "props": {
25 "width": "full",
26 "attributes": [
27 {
28 "label": "Name",
29 "value": "{{node.id}}"
30 },
31 {
32 "label": "Quantity",
33 "value": "{{node.quantity}}"
34 },
35 {
36 "label": "SKU",
37 "value": "{{node.orderItem.product.gtin}}"
38 }
39 ]
40 }
41 }
42 ]
43 }
44 }
45 }
46 ]
47 }
48 ]
49 }
50}
51},Language: plain_text
Name: Example
Description:
[Warning: empty required content area]Name | Type | Required | Default | Description |
| string | yes | no | A string that defines a path to GraphQL data. |
| MystiqueComponent[] | yes | no | The components to display from an array of data. |
1{
2 component: 'fc.repeater',
3 dataSource: 'fulfilments'
4 descendants: [
5 {
6 component: 'fc.list',
7 dataSource: 'items',
8 props: {
9 // standard list config props
10 },
11 },
12 ],
13},Language: json
The initial release
Page or Drawer.
Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.
