Dropdown
Overview
Number | Description |
---|---|
1 | Main area |
2 | Content area |
3 | Selected item |
4 | Not selected item |
5 | 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 will be displayed on dropdown. |
options.items[].value | String | Yes | The value of an item. If the value is duplicate, the error will be displayed |
options.items[].label | String | No | The label of an item. |
options.items[].isDisabled | Boolean | No | Indicate item will be disabled when display. Default value is false. |
options.value | String | No | Default selected value. If the 'options.value' is nonexistent value, the error will be displayed |
options.isDisabled | Boolean | No | The dropdown will be disabled. Default value: 'false' |
options.isVisible | Boolean | No | The dropdown will be visible. Default value: 'true' |
Sample
React
import { Dropdown } 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 (
<Dropdown items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
);
}
}
Javascript
var dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'Orange',
isDisabled: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
],
value: 'Banana'
});
Methods
render()
Get dom element of component.
Parameter
None
Returns
Dom element
Sample
React
import { Dropdown } 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 (
<Dropdown items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
);
}
}
Javascript
var dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'Orange',
isDisabled: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
],
value: 'Banana'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dropdown.render());
addItem(item)
Add an item to dropdown list.
Parameter
Name | Type | Required | Description |
---|---|---|---|
item | Object | Yes | The item will be added to dropdown list. |
item.value | String | Yes | The value of an item. |
item.label | String | Yes | Display string. |
item.isDisabled | Boolean | Yes | Indicate item will be disabled when display. Default value: 'false' |
Returns
None
Sample
React
import { Dropdown } from 'kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(opts) {
super(opts);
this.state = {
items: [],
value: undefined
}
}
render() {
return (
<div>
<Dropdown 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 dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'Orange',
isDisabled: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
],
value: 'Banana'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dropdown.render());
dropdown.addItem({label: 'Lemon', value: 'Lemon', isDisabled: true});
removeItem(index)
Remove an item at specific position in dropdown's list.
Parameter
Name | Type | Required | Description |
---|---|---|---|
index | Integer | Yes | The index of remove item. |
Returns
None
Sample
React
import { Dropdown } 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: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
]
}
}
render() {
return (
<div>
<Dropdown 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.items[0].value) {
prevState.value = undefined;
}
prevState.items.splice(0, 1)
return prevState;
}
return prevState;
});
};
}
Javascript
var dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'Orange',
isDisabled: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
],
value: 'Banana'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dropdown.render());
var firstItem = dropdown.getItems()[0];
dropdown.removeItem(0);
console.log(firstItem);
getItems()
Get all items of the dropdown.
Parameter
None
Returns
The list contains all items of dropdown.
Name | Type | Description |
---|---|---|
items | List<Object> | List of items objects in dropdown. |
items[].label | String | Display string. |
items[].value | String | The value of an item. |
items[].isDisabled | Boolean | Indicate item was disabled. |
Sample
React
import { Dropdown } 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>
<Dropdown 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 dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'Orange',
isDisabled: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
],
value: 'Banana'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dropdown.render());
var list = dropdown.getItems();
list.forEach(function(item) {
console.log(item);
});
getValue()
Get value of the selected item
Parameter
None
Returns
Name | Type | Description |
---|---|---|
value | String | The value of the selected item |
Sample
React
import { Dropdown } 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: 'Banana'
};
}
render() {
return (
<div>
<Dropdown 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 dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'Orange',
isDisabled: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
],
value: 'Banana'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dropdown.render());
var selectedItem = dropdown.getValue();
console.log(selectedItem);
setValue(value)
Set the selected value for dropdown.
Parameter
Name | Type | Required | Description |
---|---|---|---|
value | String | Yes | The value of an Item in dropdown. If the 'value' is nonexistent value, the error will be displayed |
Returns
None
Sample
React
import { Dropdown } 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: 'Banana'
};
}
render() {
return (
<div>
<Dropdown 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: 'Orange'});
}
}
Javascript
var dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'Orange',
isDisabled: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
],
value: 'Banana'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dropdown.render());
dropdown.setValue('Orange');
disableItem(value)
Set the disabled item for dropdown.
Parameter
Name | Type | Required | Description |
---|---|---|---|
value | String | Yes | The value of an Item in dropdown. |
Returns
None
Sample
React
import { Dropdown } 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: 'Banana'
};
}
render() {
return (
<div>
<Dropdown 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 dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'Orange',
isDisabled: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
],
value: 'Banana'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dropdown.render());
dropdown.disableItem('Orange');
enableItem(value)
Set the enabled item for dropdown.
Parameter
Name | Type | Required | Description |
---|---|---|---|
value | String | Yes | The value of an Item in dropdown. |
Returns
None
Sample
React
import { Dropdown } 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: 'Banana'
};
}
render() {
return (
<div>
<Dropdown 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 dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'Orange',
isDisabled: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
],
value: 'Banana'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dropdown.render());
dropdown.enableItem('Banana');
on(eventName, callBack)
Register callback for change event
Parameter
Name | Type | Required | Description |
---|---|---|---|
eventName | String | Yes | Name of event:
|
callback | function | Yes | callback |
Returns
None
Sample
React
import { Dropdown } 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: 'Banana'
};
}
render() {
return (
<Dropdown items={this.state.items} value={this.state.value} onChange={this.handleChange } />
);
}
handleChange = (value) => {
this.setState({value});
console.log('value: ' + value);
}
}
Javascript
var dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'Orange',
isDisabled: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
],
value: 'Banana'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dropdown.render());
dropdown.on('change', function(value) {
console.log('on change');
});
show()
Display the dropdown.
Parameter
None
Returns
None
Sample
React
import { Dropdown } 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: 'Banana'
};
}
render() {
return (
<Dropdown items={this.state.items} value={this.state.value} onChange={this.handleChange} isVisible={true} />
);
}
handleChange = (value) => {
this.setState({value});
}
}
Javascript
var dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'Orange',
isDisabled: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
],
value: 'Banana'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dropdown.render());
dropdown.show();
hide()
Hide the dropdown.
Parameter
None
Returns
None
Sample
React
import { Dropdown } 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: 'Banana'
};
}
render() {
return (
<Dropdown items={this.state.items} value={this.state.value} onChange={this.handleChange} isVisible={false} />
);
}
handleChange = (value) => {
this.setState({value});
}
}
Javascript
var dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'Orange',
isDisabled: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
],
value: 'Banana'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dropdown.render());
dropdown.hide();
disable()
Disabled the dropdown.
Parameter
None
Returns
None
Sample
React
import { Dropdown } 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: 'Banana'
};
}
render() {
return (
<Dropdown items={this.state.items} value={this.state.value} onChange={this.handleChange} isDisabled={true} />
);
}
handleChange = (value) => {
this.setState({value});
}
}
Javascript
var dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'Orange',
isDisabled: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
],
value: 'Banana'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dropdown.render());
dropdown.disable();
enable()
Enabled the dropdown.
Parameter
None
Returns
None
Sample
React
import { Dropdown } 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: 'Banana'
};
}
render() {
return (
<Dropdown items={this.state.items} value={this.state.value} onChange={this.handleChange} isDisabled={false} />
);
}
handleChange = (value) => {
this.setState({value});
}
}
Javascript
var dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'Orange',
isDisabled: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
],
value: 'Banana'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dropdown.render());
dropdown.enable();