multiple-choice-checklist

Overview

multiple-choice-checklist allows users to select multiple options from a list.

Version compatibility

multiple-choice-checklist was introduced in version 4.36.1 of the JourneyApps Container.

It was updated visually and the disabled attribute was introduced in version 4.75.0 of the JourneyApps Runtime.

Basic Example

main.view.xml

<var name="contact_methods" type="multiple-choice">
    <option key="email">Email</option>
    <option key="sms">SMS</option>
    <option key="Post">Post</option>
</var>

<multiple-choice-checklist label="Preferred Contact Method" bind="contact_methods" />

Standard Attributes

bind

pagebind

label

pagelabel

required

pagerequired

Advanced Attributes

align-content

pagealign-content

align-label

pagealign-label

checkbox-position

Version compatibility

checkbox-position was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: left | right

Default: left

Specify where the checkbox is positioned in the component (relative to the option label).

main.view.xml

<columns>
    <column>
        <info>checkbox-position="left"</info>
        <multiple-choice-checklist checkbox-position="left" bind="favorite_color" label="Favorite color" />
    </column>
    <column>
        <info>checkbox-position="right"</info>
        <multiple-choice-checklist checkbox-position="right" bind="favorite_color" label="Favorite color" />
    </column>
</columns>

disabled

Version compatibility

disabled was introduced in version 4.75.0 of the JourneyApps Runtime.

pagedisabled

id

pageid

label-case

Version compatibility

label-case was introduced in version 4.80.0 of the JourneyApps Runtime.

pagelabel-case

label-color

pagelabel-color

mode

Version compatibility

mode was introduced in version 4.83.0 of the JourneyApps Runtime.

Optional

Type: row | column

Default: column

Configure the layout of the list of check box options. row lists options horizontally; column lists options vertically.

modifier-text

pagemodifier-text

on-change

pageon-change

When using multiple-choice-integer you can omit the key attribute on options. The array passed to the function assigned to on-change will correspond to the key starting from 0. E.g. [0, 2] corresponds to first and third options.

show-if and hide-if

pageshow-ifpagehide-if

Component Methods

The following component methods are available when an id is assigned to the component and component.multipleChoiceChecklist({id:'my-id'}) is called from JS/TS:

clear

Clear the selected option(s) of the multiple-choice-checklist.

scrollIntoView

Programmatically scroll until the multiple-choice-checklist is visible in the view.

selectItem

Select an item by its label of the list of options of the multiple-choice-checklist.

main.view.xml

<var name="favorite_colors" type="multiple-choice">
    <option key="green">Green</option>
    <option key="red">Red</option>
    <option key="yellow">Yellow</option>
</var>

<multiple-choice-checklist id="my-checklist" bind="favorite_colors" label="Favorite Colors" />

main.js

function select() {
    component.multipleChoiceChecklist({id: 'my-checklist'}).selectItem('Yellow');
}

selectItemByIndex

Select an item by its index of the list of options of the multiple-choice-checklist. Note: Indexes begin at 1.

main.view.xml

<var name="favorite_colors" type="multiple-choice">
    <option key="green">Green</option>
    <option key="red">Red</option>
    <option key="yellow">Yellow</option>
</var>

<multiple-choice-checklist id="my-checklist" bind="favorite_colors" label="Favorite Colors" />

main.js

function select() {
    component.multipleChoiceChecklist({id: 'my-checklist'}).selectItemByIndex(2);
    // Selects "Red"
}