MultiChoice
Overview
The MultiChoice component allows the user to select multiple values from multiple options.
Specification
Property
Here is a list of properties that can be used for modifying the component:
Name | Type | Default | Description | Remark |
---|---|---|---|---|
className | string | "" | Component class name | |
error | string | "" | Text to be displayed in error | Error will not be displayed if unspecified or empty |
id | string | "" | Component id name | |
label | string | "" | Label for the component | Label is not displayed if unspecified or emptied |
disabled | boolean | false | Enable/Disable the component | |
requiredIcon | boolean | false | Show/Hide the required icon | |
visible | boolean | true | Show/Hide the component | |
items | Array<Item> | [] | List of options to display | Will result an error if the value of items is not an array |
Item.label | string | null | Label text for each option | If Item.label is unspecified, the value of Item.value is displayed on the UI |
Item.value | string | null | Value of each option | Can set duplicated value in Item.value |
value *1 | Array<string> | [] | Selected value | No option will be selected if the value and selectedIndex are unspecifiedIf setting duplicated value and not setting selectedIndex , the first mapped value item in Item.value will be selected and selectedIndex will be the index numberWill result an error if the value is not an array |
selectedIndex *1 | Array<Number> | [] | List of index of selected item | It supports specifying which duplicated Item.value will be selected if there is duplicated Item.value in items If value is not set and selectedIndex is valid, item that has the index number will be selectedIf value is set with duplicated Item.value and selectedIndex value maps with duplicated Item.value specified in value , item that has the index number will be selectedWill result an error if the value of selectedIndex is not an array |
*1: You can set duplicated value in value
and Item.value
. In case setting duplicated value, you can handle selected item using value
and selectedIndex
property.
Example: When setting items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}, {label: 'Lemon', value: 'fruit'}]
-
If setting
value
and not settingselectedIndex
as follows:- value = ['fruit', 'vegetable']: The first and third items will be selected.
- value = ['meat', 'other']: No item will be selected.
-
If not setting
value
and settingselectedIndex
as follows:- selectedIndex = [0, 1]: The first and second items will be selected.
- selectedIndex = [98, 99]: No item will be selected.
-
If setting
value
andselectedIndex
as follows:- value = ['fruit', 'vegetable'], selectedIndex = [1, 3]: The second and third items will be selected.
- value = ['fruit', 'fruit', 'vegetable'], selectedIndex = [1, 3]: The second, third, and fourth items will be selected.
- value = ['fruit', 'fruit'], selectedIndex = [1, 2, 3]: The first and second items will be selected.
※ If bothvalue
andselectedIndex
are set at the same time, the priority ofvalue
will be higher. Therefore, in the first and third examples above, the item corresponding to 3 of selectedIndex will not be selected.
Event
Here is a list of events that can be specified:
Name | Type | Description | Remark |
---|---|---|---|
change | function | Event handler when the value has been changed | It will pass the event object as the argument. You can receive the following values in event.detail event.detail.oldValue : Value before the change event.detail.value : Value after changing |
Constructor
MultiChoice(options)
Here is a list of available constructors:
Parameter
Name | Type | Default | Description | Remark |
---|---|---|---|---|
options | object | {} | Object that includes component properties |
Custom CSS
Please check Custom CSS feature guide at first.
Here is a list of properties that can be used for modifying component style:
Property
Name |
---|
--kuc-multi-choice-menu-width |
--kuc-multi-choice-menu-height |
--kuc-multi-choice-menu-font-size |
--kuc-multi-choice-menu-color |
--kuc-multi-choice-menu-color-selected |
--kuc-multi-choice-menu-background-color-hover |
Sample Code
Please check the package installation method first.
Here is a sample code when all parameters are specified:
const Kuc = Kucs['1.x.x'];
const space = kintone.app.record.getSpaceElement('space');
const multiChoice = new Kuc.MultiChoice({
label: 'Fruit',
requiredIcon: true,
items: [
{
label: 'orange',
value: 'Orange'
},
{
label: 'apple',
value: 'Apple'
}
],
value: ['Orange'],
selectedIndex: [0],
error: 'Error occurred!',
className: 'options-class',
id: 'options-id',
visible: true,
disabled: false
});
space.appendChild(multiChoice);
multiChoice.addEventListener('change', event => {
console.log(event);
});