The switchable Element

The Switchable element allows to switch between different "groups" of XS2A Form elements.

{
    "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": ?Validator
}

The selected Property

since v1.0.0

The selected property sets the initial state of the element. At any time only one "group" of elements can be active.

The options Property

since v1.0.0

The options array contains the available options as objects. Each one of these options object provides 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 object is the one specified in Client-side Validation. As most of the validation fields work on String values, the only relevant field is the validator.required field, which requires one option to be selected if set to true.

Form elements which are in "groups" that are not active/selected should not be validated.

The returned value of the switchable Element

The switchable element returns the value of the chosen option as the switchable's value. Additionally only the values of the chosen elements have to be returned. This is especially important since we cannot guarantee unique keys between the different "groups" of form elements.

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