MultipleChoice

Overview

MultipleChoice

Number	Description
1	Title
2	Selected item
3	Not selected item
4	Disabled item

Constructor

Parameter

Name	Type	Required	Description
options	Object	No	The object contains params of constructor.
options.items	Array<Object>	No	List of items which will be displayed on multiple choices.
options.items[].value	String	Yes	String value of item If the value is duplicate, the error message will be displayed
options.items[].label	String	No	String label of item
options.items[].isDisabled	Boolean	No	Indicate item will be disabled when display. Default value: 'false'.
options.value	Array	No	List of checked item. If the 'options.value[]' is nonexistent value, the error will be displayed
options.isDisabled	Boolean	No	The multiple choices will be disabled. Default value: 'false'
options.isVisible	Boolean	No	The multiple choices will be visible. Default value: 'true'

Sample

React

import { MultipleChoice } from 'kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(opts) {
        super(opts);
        var items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = { items: items, value: ['Orange'] };
    }
    render() {
        return (
            <MultipleChoice items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
        );
    }
}

Javascript

var mulChoice = new kintoneUIComponent.MultipleChoice({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

Methods

render()

Get dom element of component.

Parameter

None

Returns

Dom element

Sample

React

import { MultipleChoice } from 'kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(opts) {
        super(opts);
        var items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = { items: items, value: ['Orange'] };
    }
    render() {
        return (
            <MultipleChoice items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
        );
    }
}

Javascript

var mulChoice = new kintoneUIComponent.MultipleChoice({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(mulChoice.render());

addItem(item)

Add an item to the end of multile choices list.

Parameter

Name	Type	Required	Description
item	Object	Yes	The item will be added to multile choices list.
item.value	String	Yes	The value of an item.
item.label	String	No	Display string.
item.isDisabled	Boolean	No	Indicate item will be disabled when display. Default value: 'false'

Returns

None

Sample

React

import { MultipleChoice } from 'kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(opts) {
        super(opts);
        this.state = {
            items: []
        }
    }

    render() {
        return (
        <div>
          <MultipleChoice items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Add item</button>
        </div>
      );
    }

    handleClick = () => {
      const item = {
        label: 'Lemon',
        value: 'Lemon',
        isDisabled: false
      };
      this.setState(prevState => ({
        items: prevState.items ? prevState.items.concat([item]) : [item]
      }))
    }
}

Javascript

var mulChoice = new kintoneUIComponent.MultipleChoice({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(mulChoice.render());


mulChoice.addItem({
    label: 'Grape',
    value: 'Grape',
    isDisabled: false
});

getItem(index)

Get the item of specific position in multiple choices list.

Parameter

Name	Type	Required	Description
index	Integer	Yes	The position of retrieved item.

Returns

The item at given position.

Name	Type	Description
item	Object	The item of specific position in multiple choices list.
item.value	String	The value of an item.
item.label	String	Display string.
item.isDisabled	Boolean	Indicate item will be disabled when display.

Sample

React

import { MultipleChoice } from 'kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(opts) {
        super(opts);
        let items= [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
        <div>
          <MultipleChoice items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Get Item</button>
        </div>
      );
    }

    handleClick = () => {
        console.log(this.state.items[0]);
    }
}

Javascript

var mulChoice = new kintoneUIComponent.MultipleChoice({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(mulChoice.render());

var firstItem = mulChoice.getItem(0);
console.log(firstItem);

removeItem(index)

Remove the specific item from multiple choice list.

Parameter

Name	Type	Required	Description
index	Integer	Yes	The position of retrieved item.

Returns

None

Sample

React

import { MultipleChoice } from 'kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(opts) {
        super(opts);
        this.state = {
            items: [
                {
                    label: 'Orange',
                    value: 'Orange',
                    isDisabled: false
                },
                {
                    label: 'Banana',
                    value: 'Banana',
                    isDisabled: true
                },
                {
                    label: 'Lemon',
                    value: 'Lemon',
                    isDisabled: true
                }
            ]
        }
    }

    render() {
        return (
        <div>
          <MultipleChoice items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Remove Item</button>
        </div>
      );
    }

    handleClick = () => {
   this.setState(prevState => {
       if (prevState.items[0]) {
         if (this.state.value ) {
             prevState.value = prevState.value.filter(value => value !== prevState.items[0].value)
         }
         prevState.items.splice(0, 1)
        return prevState;
       }
       return prevState;
   });
 };
}

Javascript

var mulChoice = new kintoneUIComponent.MultipleChoice({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(mulChoice.render());


mulChoice.removeItem(0);

getItems()

Get all items of the multiple choice.

Parameter

None

Returns

Multiple choice list item.

Name	Type	Description
items	Array<Object>	List items of the multiple choice
items[].value	String	The value of an item.
items[].label	String	Display string.
items[].isDisabled	Boolean	Indicate item will be disabled when display.

Sample

React

import { MultipleChoice } from 'kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(opts) {
        super(opts);
        var items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
        <div>
          <MultipleChoice items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Get Items</button>
        </div>
      );
    }

    handleClick = () => {
        this.state.items.forEach(item => {
            console.log(item);
        });
    }
}

Javascript

var mulChoice = new kintoneUIComponent.MultipleChoice({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(mulChoice.render());

var items = mulChoice.getItems();
items.forEach(function(item) {
    console.log(item.value + ':' + item.isDisabled);
});

getValue()

Get the checked values of multiple choice.

Parameter

None

Returns

List of checked items.

Name	Type	Description
value	Array<String>	List selected values of the multiple choice.

Sample

React

import { MultipleChoice } from 'kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(opts) {
        super(opts);
        var items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
        <div>
          <MultipleChoice items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Get Value</button>
        </div>
      );
    }

    handleClick = () => {
       console.log(this.state.value);
    }
}

Javascript

var mulChoice = new kintoneUIComponent.MultipleChoice({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(mulChoice.render());

var selectedItems = mulChoice.getValue();
selectedItems.forEach(function(item) {
    console.log(item);
});

setValue(value)

Set the checked value of multiple choice.

Parameter

Name	Type	Required	Description
value	Array<String>	yes	The value of an item. If the 'value[]' is nonexistent value, the error will be displayed

Returns

None

Sample

React


import { MultipleChoice } from 'kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(opts) {
        super(opts);
        var items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
        <div>
          <MultipleChoice items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Set Value</button>
        </div>
      );
    }

    handleClick = () => {
        this.setState({
            value: ['Lemon']
        });
    }
}

Javascript

var mulChoice = new kintoneUIComponent.MultipleChoice({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(mulChoice.render());

mulChoice.setValue(['Lemon']);

disableItem(value)

Set the disabled items of multiple choice.

Parameter

Name	Type	Required	Description
value	String	yes	The value of an item

Returns

None

Sample

React

import { MultipleChoice } from 'kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(opts) {
        super(opts);
        var items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
        <div>
          <MultipleChoice items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Disabled Item</button>
        </div>
      );
    }

    handleClick = () => {
        const items = [...this.state.items];

        items[0].isDisabled = true;
        this.setState({ items: items });
    }
}

Javascript

var mulChoice = new kintoneUIComponent.MultipleChoice({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(mulChoice.render());


mulChoice.disableItem('Orange');

enableItem(value)

Set the enable items of multiple choice.

Parameter

Name	Type	Required	Description
value	String	yes	The value of an item

Returns

None

Sample

React

import { MultipleChoice } from 'kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(opts) {
        super(opts);
        var items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
        <div>
          <MultipleChoice items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Enabled Item</button>
        </div>
      );
    }

    handleClick = () => {
        const items = [...this.state.items];

        items[1].isDisabled = false;
        this.setState({ items: items });
    }
}

Javascript

var mulChoice = new kintoneUIComponent.MultipleChoice({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(mulChoice.render());

mulChoice.enableItem('Banana');

on(eventName, callBack)

Register callback for change event

Parameter

Name	Type	Required	Description
eventName	String	Yes	Name of event: 'change'
callback	function	Yes	callback

Returns

None

Sample

React

import { MultipleChoice } from 'kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(opts) {
        super(opts);
        var items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
            <MultipleChoice items={this.state.items} value={this.state.value} onChange={this.handleChange} />
        );
    }

    handleChange= () => {
        const items = [...this.state.items];

        items[1].isDisabled = false;
        this.setState({ items: items });
    }
}

Javascript

var mulChoice = new kintoneUIComponent.MultipleChoice({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(mulChoice.render());

mulChoice.on('change', function(value) {
    console.log('on change');
});

show()

Display the multiple choice.

Parameter

None

Returns

None

Sample

React

import { MultipleChoice } from 'kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(opts) {
        super(opts);
        var items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
            <MultipleChoice value={this.state.value} isVisible={true} items={this.state.items} onClick={this.handleClick}/>
        );
    }

    handleClick = () => {
        const items = [...this.state.items];

        items[1].isDisabled = false;
        this.setState({ items: items });
    }
}

Javascript

var mulChoice = new kintoneUIComponent.MultipleChoice({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(mulChoice.render());

mulChoice.show();

hide()

Hide the multiple choice.

Parameter

None

Returns

None

Sample

React

import { MultipleChoice } from 'kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(opts) {
        super(opts);
        var items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
            <MultipleChoice value={this.state.value} isVisible={false} items={this.state.items} onClick={this.handleClick}/>
        );
    }

    handleClick = () => {
        const items = [...this.state.items];

        items[1].isDisabled = false;
        this.setState({ items: items });
    }
}

Javascript

var mulChoice = new kintoneUIComponent.MultipleChoice({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(mulChoice.render());

mulChoice.hide();

disable()

Disabled the multiple choice.

Parameter

None

Returns

None

Sample

React

import { MultipleChoice } from 'kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(opts) {
        super(opts);
        var items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
            <MultipleChoice value={this.state.value} isDisabled={true} items={this.state.items} onClick={this.handleClick}/>
        );
    }

    handleClick = () => {
        const items = [...this.state.items];

        items[1].isDisabled = false;
        this.setState({ items: items });
    }
}

Javascript

var mulChoice = new kintoneUIComponent.MultipleChoice({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(mulChoice.render());


mulChoice.disable();

enable()

Enabled the multiple choice.

Parameter

None

Returns

None

Sample

React

import { MultipleChoice } from 'kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(opts) {
        super(opts);
        var items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
            <MultipleChoice value={this.state.value} isDisabled={false} items={this.state.items} onClick={this.handleClick}/>
        );
    }

    handleClick = () => {
        const items = [...this.state.items];

        items[1].isDisabled = false;
        this.setState({ items: items });
    }
}

Javascript

var mulChoice = new kintoneUIComponent.MultipleChoice({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(mulChoice.render());


mulChoice.enable();