Fluent Commerce Logo
Docs
Sign In

Configure a drawer via manifest

How-to Guide

Author:

Fluent Commerce

Changed on:

1 July 2024

Key Points

  • Drawers can be added in any mystique components by modifying the mystique manifest.
  • The drawer’s custom data source can be defined via queries and variables.

Steps

Step arrow right iconStep 1

Add the fc.drawer.button component to pages section of 

`fc.mystique.manifest.oms.fragment.ordermanagement`
 and/or 
`fc.mystique.manifest.oms.fragment.ordermanagement.mixedbasket`
 manifest fragments:

Initial Manifest

Result

No alt providedNo alt provided
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]

Language: java

Name: Code Sample

Description:

[Warning: empty required content area]

The Configurable drawer could be placed in multiple Mystique components, such as:

Step arrow right iconStep 2

Add descendants to 

`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

No alt providedNo alt provided
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}

Language: json

Name: Code Sample

Description:

[Warning: empty required content area]

Any Mystique components could be placed in the Configurable drawer, for example:

Datasource configuration:

The Configurable drawer has a parent component datasource by default.

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  ]

Language: json

Name: Code Sample

Description:

[Warning: empty required content area]
Q&A
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}

Language: json

Name: Code Sample

Description:

[Warning: empty required content area]
What will this look like in the UI?
No alt provided

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.

Fluent Logo