Alert
Overview
Number | Description |
---|---|
1 | Success alert |
2 | Error alert |
3 | Display text |
Constructor
Parameter
Name | Type | Required | Description |
---|---|---|---|
options | Object | No | The object contains params of constructor. |
options.text | String | Yes | The content of alert. |
options.type | String | No | The type of alert:
|
options.isDisabled | Boolean | No | The alert will be disabled. Default value: 'false' |
options.isVisible | Boolean | No | The alert will be visible. Default value: 'true' |
Sample
Javascript
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
React
import { Alert } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Alert text='Network error' type='error'/>
);
}
}
Methods
render()
Get dom element of component.
Parameter
None
Returns
Dom element
Sample
Javascript
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
React
import { Alert} from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Alert text='Network error' type='error'/>
);
}
}
setText(text)
Set the content of alert.
Parameter
Name | Type | Required | Description |
---|---|---|---|
text | String | Yes | The content of alert. If text is undefined, null or true, The alert will be displayed blank. |
Returns
None
Sample
Javascript
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.setText('Network error');
React
import { Alert } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Alert text='Network error' type='error'/>
);
}
}
setType(type)
Set the type of alert.
Parameter
Name | Type | Required | Description |
---|---|---|---|
type | String | No | The type of alert.
|
Returns
None
Sample
Javascript
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.setType('success');
React
import { Alert } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Alert text='Network error' type='error'/>
);
}
}
on(eventName, callBack)
The callBack function will be execute after user click the alert.
Parameter
Name | Type | Required | Description |
---|---|---|---|
eventName | String | Yes | Name of event:
|
callback | function | Yes | callback |
Returns
None
Sample
Javascript
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.on('click', function(event) {
console.log('on click');
});
React
import { Alert } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Alert text='Network error' type='error' onClick={this.handleClick}/>
);
}
handleClick(){
console.log('click');
}
}
show()
Display the Alert.
Parameter
None
Returns
None
Sample
Javascript
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.show();
React
import { Alert } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Alert text='Network error' type='error' isVisible={true}/>
);
}
}
hide()
Hide the Alert.
Parameter
None
Returns
None
Sample
Javascript
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.hide();
React
import { Alert } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Alert text='Network error' type='error' isVisible={false}/>
);
}
}
disable()
Disable the Alert.
Parameter
None
Returns
None
Sample
Javascript
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.disable();
React
import { Alert } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Alert text='Network error' type='error' isDisabled={true}/>
);
}
}
enable()
Enable the Alert.
Parameter
None
Returns
None
Sample
Javascript
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.enable();
React
import { Alert } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Alert text='Network error' type='error' isDisabled={false}/>
);
}
}