The choice Element

The choice element provides a number of options, of which the consumer can choose a specifiable amount.

{
    "type": "choice",
    "tags": array<string>,
    "version": string,
    "key": string,
    "label": ?string,
    "placeholder": ?string,
    "selected": array<string>,
    "allow_selected": ?{
            "min": ?number,
            "max": ?number
    },
    "options": array<{
            "value": string,
            "label": string,
            "description": ?string,
            "badge": ?{
                "type": "image"|"text",
                "content": "string"
            },
            "disabled": boolean
    }>
}

The label Property

since v1.0.0

The label property represents a caption for the choice element.

The placeholder Property

since v1.0.0

The placeholder property specifies a short hint that describes the expected value of the choice element.

The selected Property

since v1.0.0

The selected array holds the values of the selected options which should be selected at initialisation.

The allow_selected Property

since v1.0.0

The optional allow_selected property specifies how many options must be selected at least (allow_selected.min, default: 1) and at most (allow_selected.max, default: 1). If only min or max is specified the value of the missing attribute is set to default.

The allow_selected also indicates a styling of the element:

  • {min: <=1, max: <=1} suggests the usage of either a <select> or <radio>s (to differentiate further look out for radio or select in the tags attribute array)
  • {min: >=0, max: >1} suggests the usage of either a <select multiple> or <checkbox>es (to differentiate further look out for checkbox or select in the tags attribute array)

Example of a possible look of a Choice where the consumer can select multiple options

Example of a possible look of a choice element where the consumer can select multiple options.

Example of a possible look of a Choice where the consumer can only select one option

Example of a possible look of a choice element where the consumer can only select one option.

The options Property

since v1.0.0

{
    "value": string,
    "label": string,
    "description": ?string,
    "badge": ?{
        "type": "image"|"text",
        "content": "string"
    },
    "disabled": boolean
}

The options array contains the available options as objects that provide a value property to identify the option, a label property that can be shown to the consumer, and a disabled property that marks an option as disabled or unclickable.

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.

Possible Option Display

The returned value of the choice element

The value sent back to the server for the choice element should always be an array of strings with the values of the selected options.

Possible values for tags

  • BOX

Example of a possible look of a choice element with the BOX-tag

Example of a possible look of a choice element with the BOX tag.

  • DROPDOWN

Example of a possible look of a choice element with the DROPDOWN-tag

Example of a possible look of a choice element with the DROPDOWN tag.

  • RADIO

  • CHECKBOX

  • SELECT

  • HORIZONTAL

Example

{
    "type": "choice",
    "key": "choice",
    "tags": [],
    "version": "1.1.0",
    "label": "",
    "placeholder": "",
    "selected": ["0"],
    "allow_selected": {
        "min": 1,
        "max": 1
    },
    "options": [
        {
            "value": "0",
            "label": "example1",
            "description": "First Example",
            "disabled": false
        },
        {
            "value": "1",
            "label": "example2",
            "disabled": false
        },
        {
            "value": "2",
            "label": "example3",
            "disabled": true
        }
    ]
}

Changelog


1.1.0 - 13.05.2019

  • Added option.badge
  • Added option.description

1.0.0 - 01.02.2019

  • initial version

results matching ""

    No results matching ""