The switchable
Element
The switchable
element allows to switch between different options (groups of XS2A Form elements) that are provided in the options
property.
{
"type": "switchable",
"tags": array<string>,
"version": string,
"key": string,
"selected": string,
"options": array<{
"value": string,
"label": string,
"content": array<FormElement>,
"disabled": boolean,
"description": ?string,
"badge": ?{
"type": "image"|"text",
"content": "string"
},
}>,
"validator": {
"required": ?boolean
}
}
The selected
Property
since v1.0.0
The selected
property sets the initial state of the element.
At any time only one option (a group of elements) can be active.
The options
Property
since v1.0.0
The options
array contains the available XS2A Form element groups as objects.
Each one of these options
objects has four properties:
- The
value
property that acts as an identifier for the option - The
label
property that holds a label can be shown to the consumer - The
disabled
property that marks an option as disabled or unclickable - The
content
array that holds the group of form elements to be shown to the consumer if the option is selected
since v1.1.0
- The optional
description
property contains text which provides additional information about theoption
. - the optional property badge - depending on its type property - either holds a text or an image source. The latter can be a base64-encoded string or a URL.
The validator
Property
The validator
property may contain the required
rule for the switchable
element to be validated against.
If validator.required
is set to true
, then the switchable
element's value
cannot be empty in order to be valid. It has to contain the value
property of one of the options
.
All form elements that are part of an inactive option, hence part of a group that is not the one that is currently selected, must not be validated since these values are not submitted.
The returned value
of the switchable
Element
The switchable
element returns the value
of the chosen option
as the switchable
element's value
.
Additionally only the keys and values of the chosen option's elements have to be returned.
This is especially important since we cannot guarantee unique keys between the different groups of form elements in the options
array.
Possible values for tags
COLLAPSIBLE
Example of a possible look of a switchable element with the
COLLAPSIBLE
tag and an inner form.
TABS
Example of a possible look of a switchable element with the
TABS
tag.
DROPDOWN
Example
{
"type": "switchable",
"key": "switchable",
"tags": [],
"version": "1.1.0",
"selected": "0",
"options": [
{
"value": "0",
"label": "Form1",
"content": [...],
"description": "First form",
"disabled":false
},{
"value": "1",
"label": "Form2",
"content": [...],
"disabled":true
},{
"value": "2",
"label": "Form3",
"content": [...],
"disabled": false
}
]
}
Changelog
1.1.0 - 13.05.2019
- Added
option.badge
- Added
option.description
1.0.0 - 01.02.2019
- initial version