Docs
Author:
Fluent Commerce
Changed on:
17 Apr 2025
Copyright © 2024-2026 Fluent Retail Pty Ltd (trading as Fluent Commerce). Unless otherwise expressly stated in a current written agreement with Fluent Commerce or any of its affiliates or on any single page of the docs.fluentcommerce.com site, use of the materials on this site is strictly limited to viewing by individuals over 18 years old for legitimate commercially appropriate reasons; and any downloading, copying or other actions or uses of any kind or by any means of the materials on this site, including by artificial intelligence tools, is strictly prohibited. All other rights reserved.
Step 1`fc.mystique.manifest.oms.fragment.ordermanagement` and/or `fc.mystique.manifest.oms.fragment.ordermanagement.mixedbasket` manifest fragments:| Initial Manifest | Result |
 |  |
Step 2`fc.drawer.button` component in `fc.mystique.manifest.oms.fragment.ordermanagement` and/or `fc.mystique.manifest.oms.fragment.ordermanagement.mixedbasket` manifest fragments:| Initial Manifest | Result |
 |  |
1"pages": [
2 {
3 "type": "page",
4 "path": "orders",
5 "component": "fc.page",
6 "data": {
7 "query": parse(gql`query($orders_first: Int) { orders(first: $orders_first) { edges{ node { id ref retailer{id tradingName} type status retailer{id} workflowRef workflowVersion totalPrice totalTaxPrice items { edges { node { currency }}} createdOn customer{id firstName lastName }} } } }`),
8 "variables": {
9 "orders_first": 100
10 }
11 },
12 "nav": {
13 "label": "i18n:fc.om.orders.index.nav",
14 "icon": "library_books"
15 },
16 "props": {
17 "title": "i18n:fc.om.orders.index.title"
18 },
19 "descendants": [
20 {
21 "component": "fc.drawer.button",
22 "props": {
23 "label": "button label",
24 "color": "primary",
25 "title": "Drawer title",
26 "descendants": [
27 // The list of existing components to be displayed as children of drawer
28 ]
29 }
30 },
31 ]
32 },
33]1{
2 "component": "fc.drawer.button",
3 "props": {
4 "label": "button label",
5 "color": "primary",
6 "title": "Drawer title",
7 "descendants": [
8 {
9 "component": "fc.mystique.collapsible.text",
10 "props": {
11 "text": "{{orders.edges.0.node.retailer.tradingName}}",
12 "charCutoff": 50
13 }
14 }
15 ]
16 }
17}1"pages": [
2 {
3 "type": "page",
4 "path": "orders",
5 "component": "fc.page",
6 "data": {
7 "query": parse(gql`query($orders_first: Int) { orders(first: $orders_first) { edges{ node { id ref retailer{id tradingName} type status retailer{id} workflowRef workflowVersion totalPrice totalTaxPrice items { edges { node { currency }}} createdOn customer{id firstName lastName }} } } }`),
8 "variables": {
9 "orders_first": 100
10 }
11 },
12 "nav": {
13 "label": "i18n:fc.om.orders.index.nav",
14 "icon": "library_books"
15 },
16 "props": {
17 "title": "i18n:fc.om.orders.index.title"
18 },
19 "descendants": [
20 {
21 "component": "fc.drawer.button",
22 "props": {
23 "label": "button label",
24 "color": "primary",
25 "title": "Drawer title",
26 "descendants": [
27 {
28 "component": "fc.mystique.collapsible.text",
29 "props": {
30 // configurable drawer datasource is limited by Page parent component datasource (orders are available - line 7)
31 "text": "{{orders.edges.0.node.retailer.tradingName}}",
32 "charCutoff": 50
33 }
34 }
35 ]
36 }
37 },
38 {
39 "component": "fc.list",
40 "props": {
41 "defaultPageSize": 100,
42 "dataSource": "orders.edges.0.node.items",
43 "attributes": [
44 {
45 "label": "i18n:fc.om.orders.detail.list.orderItems.column.ref.heading",
46 "type": "component",
47 "options": {
48 "component": "fc.drawer.button",
49 "props": {
50 "label": "empty",
51 "color": "primary",
52 "title": "Empty drawer title",
53 "descendants": [
54 // configurable drawer datasource is limited by List parent component datasource (only items are available - line 42)
55 ]
56 }
57 }
58 },
59 ]
60 }
61 }
62 ]
63 },
64 ]1{
2 "component": "fc.list",
3 "props": {
4 "title": "i18n:fc.om.orders.detail.list.orderItems.title",
5 "dataSource": "orderById.items",
6 "responsiveness": "forcetable",
7 "attributes": [
8 {
9 "label": "i18n:fc.om.orders.detail.list.orderItems.column.ref.heading",
10 "type": "component",
11 "options": {
12 "component": "fc.drawer.button",
13 "props": {
14 "label": "{{node.ref}}",
15 "color": "primary",
16 "title": "Drawer title",
17 "query": "query ($id: ID!) { fulfilmentChoiceById(id: $id) { status fulfilments { edges { node { createdOn } } } } }",
18 "variables": {
19 "id": "{{node.id}}"
20 },
21 "descendants": [
22 {
23 "component": "fc.card.attribute",
24 "props": {
25 "title": "i18n:fc.om.orderitems.detail.card.summary.title",
26 "dataSource": "fulfilmentChoiceById",
27 "attributes": [
28 {
29 "label": "i18n:fc.om.orderitems.detail.card.summary.attribute.status.label",
30 "template": "{{status}}"
31 },
32 {
33 "label": "i18n:fc.om.orderitems.detail.card.summary.attribute.creationDate.label",
34 "template": "{{dateStringFormatter fulfilments.edges.0.node.createdOn}} ({{dateRelative fulfilments.edges.0.node.createdOn}})"
35 }
36 ]
37 }
38 },
39 ]
40 }
41 }
42 },
43 ]
44 }
45}