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.