Select Component
Changed on:
9 Jan 2025
Overview
The Select Component is a field component designed for use in any form. It allows users to view a list of options as a dropdown regardless of the number of items in the list. This sets it apart from the field, which displays a dropdown only when the list contains more than three items; otherwise, it switches to a radio button group. The component supports flexible value sourcing. It can retrieve options either via a query, from a predefined setting, or from a manifest.
| Plugin Name | Core |
|---|
The standard library of mystique components.
v1.0.0
Initial changelog entry.
Alias
select
Detailed technical description
The Select Component supports three primary methods for retrieving options:
- Query: Fetches options dynamically using a GraphQL query.
1{
2 "component": "select",
3 "props": {
4 "extensions": {
5 "queryValues": {
6 "query": "...",
7 "variables": {
8 "retailerRefs": "{{activeRetailer.ref}}"
9 },
10 "label": "{{node.name}}",
11 "value": "{{node.ref}}",
12 }
13 }
14 },
15},Language: plain_text
Name: Query Method
Description:
The component's dropdown options population using a GraphQL query
- Setting: Loads options from a predefined setting.
1{
2 "component": "select",
3 "props": {
4 "extensions": {
5 "source": "fc.mystique.inventory.search.inventory.position.stock.statuses"
6 }
7 },
8},Language: plain_text
Name: Setting Method
Description:
The component's dropdown options population using a setting
- Manifest: Extracts options from the component’s manifest file.
1{
2 "component": "select",
3 "props": {
4 "options":[
5 {
6 "label":"ACTIVE",
7 "value":"ACTIVE"
8 },
9 {
10 "label":"INACTIVE",
11 "value":"INACTIVE"
12 }
13 ],
14 }
15},Language: plain_text
Name: Manifest Method
Description:
The component's dropdown options population via manifest
Additional Information
1"overrides": {
2 "status": {
3 "extensions": {
4 "hideDefaultValue": true,
5 "source": "fc.mystique.inventory.search.inventory.position.stock.statuses"
6 }
7 },
8},Language: plain_text
Name: Option of the Sample Configuration
Description:
This configuration customizes the
`status``fc.mystique.inventory.search.inventory.position.stock.statuses`Properties
Name | Type | Required | Default Value | Description |
label | | No | None | The label that will be displayed on the field. |
defaultValue | | No | None | The default value for the field. |
options | | No | None | Defines the available options for the dropdown. |
extensions | | No | None | Allows additional customization through extra properties. |
Extensions
Name | Type | Required | Default Value | Description |
hideDefaultValue | | No | | If enabled, it displays the field with no preselected options. |
source | | No | None | Defines the name of the JSON setting that specifies the available options for the component. The structure of the JSON can vary based on the required format. Example Configurations: Basic List: A simple array of values for straightforward use cases. Options with Labels: Suitable for components that need both a display label and a corresponding value. Custom Naming: Offers flexibility by using |
queryValues | | No | None | Defines parameters for retrieving options through a query. |
Options
Name | Type | Required | Default Value | Description |
name | | No | None | The display name of the option in the dropdown. Defaults to |
value | | Yes | None | The required value associated with the option. |
QueryValues
Name | Type | Required | Default Value | Description |
| string | Yes | None | The GraphQL query used to retrieve the options. |
| object | No | None | Variables used in the query. |
| string | No | None | Path to extract the labels from the query. |
| string | No | None | Path to extract the values from the query. |
Configuration example
1{
2 "component": "select",
3 "props": {
4 "label": "Product catalogue",
5 "defaultValue": "DEFAULT:1",
6 "extensions": {
7 "queryValues": {
8 "query": "query productCatalogues($retailerRefs: [[String]]) {\n productCatalogues(retailerRefs: $retailerRefs) {\n edges {\n node {\n ref\n }\n }\n }\n}\n",
9 "variables": {
10 "retailerRefs": "{{activeRetailer.ref}}"
11 },
12 "label": "{{node.name}}",
13 "value": "{{node.ref}}"
14 }
15 }
16 }
17}Language: json
Version History
v1.0.0
Initial release
Recommended Placement
The Select Component is ideal for use in forms as an additional field type. It can also be configured to replace existing radio button groups with dropdown menus for improved usability and a more compact UI.
