Configurable Drawer Component
Changed on:
1 Oct 2025
Overview
The Configurable Drawer is a Mystique content component that displays other components in the hidden by-default section. The drawer button click event expands this hidden section on the right-hand side of the screen.
The component allows you to redefine the context for its descendants.
| Plugin Name | Core |
|---|
The standard library of mystique components.
Alias
fc.drawer.button
Detailed technical description
Properties
Name | Type | Required | Default | Description |
descendants |
| Yes | None | One or more components that will be rendered inside the drawer. |
label |
| Yes | None | The label displayed on the button that opens the drawer. Templates are supported if the data source provides relevant values. |
title |
| No | None | Text shown in the drawer header. Optional and configurable. |
query |
| No | Page-level query | A GraphQL query executed when the drawer opens. |
variables |
| No | None | A list of entries that maps each GraphQL variable to its value. |
style |
| No | Defaults to link-style (blue text) if not specified. | Defines the visual type of the drawer button. |
Configuration example
1{
2 "component": "fc.list",
3 "props": {
4 "title": "i18n:fc.om.orders.detail.list.deliveryInfo.title",
5 "dataSource": "orderById.fulfilmentChoices",
6 "responsiveness": "card",
7 "attributes": [
8 {
9 "label": "i18n:fc.om.orders.detail.list.deliveryInfo.column.type.heading",
10 "type": "component",
11 "options": {
12 "component": "fc.drawer.button",
13 "props": {
14 "label": "i18n:fc.om.orders.detail.list.deliveryInfo.column.type.heading",
15 "title": "Custom Drawer",
16 "query": "query ( $id: ID! $item_first: Int) { fulfilmentChoiceById(id: $id) }",
17 "variables": {
18 "id": "{{node.id}}",
19 "item_first": 100
20 },
21 "descendants": []
22 }
23 }
24 }
25 ]
26 }
27}Version History
See previous versions
v0.0.0
Initial release
Recommended Placement
The component can be used for the configuration of read-only drawers out-of-the-box.
