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 the option.
• 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