Dropdown
Overview
| Number | Description |
|---|---|
| 1 | Main area |
| 2 | Content area |
| 3 | Selected item |
| 4 | Not selected item |
| 5 | Disabled item |
| 6 | Hover 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
Javascript
var dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'Orange',
isDisabled: true
},
{
label: 'Banana',
value: 'Banana',
isDisabled: false
}
],
value: 'Banana'
});
React
import { Dropdown } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
const 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})}} />
);
}
}
Methods
render()
Get dom element of component.
Parameter
None
Returns
Dom element
Sample
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());
React
import { Dropdown } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
const 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})}} />
);
}
}
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
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});
React
import { Dropdown } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
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]
}))
};
}
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
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);
React
import { Dropdown } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
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;
});
};
}
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
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);
});
React
import { Dropdown } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
const 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);
});
}
}
getValue()
Get value of the selected item
Parameter
None
Returns
| Name | Type | Description |
|---|---|---|
| value | String | The value of the selected item |
Sample
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);
React
import { Dropdown } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
const 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);
}
}
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
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');
React
import { Dropdown } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
const 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'});
}
}
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
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');
React
import { Dropdown } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
const 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 });
}
}
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
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');
React
import { Dropdown } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
const 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 });
}
}
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
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');
});
React
import { Dropdown } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
const 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);
}
}
show()
Display the dropdown.
Parameter
None
Returns
None
Sample
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();
React
import { Dropdown } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
const 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});
}
}
hide()
Hide the dropdown.
Parameter
None
Returns
None
Sample
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();
React
import { Dropdown } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
const 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});
}
}
disable()
Disabled the dropdown.
Parameter
None
Returns
None
Sample
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();
React
import { Dropdown } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
const 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});
}
}
enable()
Enabled the dropdown.
Parameter
None
Returns
None
Sample
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();
React
import { Dropdown } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
const 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});
}
}