NotifyPopup
Overview
Number | Description |
---|---|
1 | Success popup |
2 | Error popup |
3 | Icon button for closing popup |
4 | Title of popup |
5 | Information popup |
Constructor
Parameter
Name | Type | Required | Description |
---|---|---|---|
options | Object | No | The object contains params of constructor. |
options.text | String | No | Displayed text on notify popup. |
options.type | String | No | Type of notify popup:
|
options.isDisabled | Boolean | No | The notify popup will be disabled. Default value: 'false' |
options.isVisible | Boolean | No | The notify popup will be visible. Default value: 'true' |
Sample
Javascript
var notifyPopup = new kintoneUIComponent.NotifyPopup({
text: 'Submit sucessffully',
type: 'success'
});
React
import { NotifyPopup } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props){
super(props);
this.state = {isVisible: true};
}
render() {
return (
<NotifyPopup text='Submit successfully' type='success' isVisible={this.state.isVisible} onClose={()=>(this.setState({isVisible: false}))} />
);
}
}
Methods
render()
Get dom element of component.
Parameter
None
Returns
Dom element
Sample
Javascript
var notifyPopup = new kintoneUIComponent.NotifyPopup({
text: 'Submit sucessffully',
type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
React
import { NotifyPopup } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props){
super(props);
this.state = {isVisible: true};
}
render() {
return (
<NotifyPopup text='Submit successfully' type='success' isVisible={this.state.isVisible} onClose={()=>(this.setState({isVisible: false}))} />
);
}
}
setText(text)
Setting the displayed text on popup.
Parameter
Name | Type | Required | Description |
---|---|---|---|
text | String | Yes | Displayed text on notify popup. If text is undefined, null or true, The popup will be displayed blank. |
Returns
None
Sample
Javascript
var notifyPopup = new kintoneUIComponent.NotifyPopup({
text: 'Submit sucessffully',
type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
notifyPopup.setText('Submit failed');
React
import { NotifyPopup } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props){
super(props);
this.state = {isVisible: true};
}
render() {
return (
<NotifyPopup text='Submit successfully' type='success' isVisible={this.state.isVisible} onClose={()=>(this.setState({isVisible: false}))} />
);
}
}
setType(type)
Setting type for popup.
Parameter
Name | Type | Required | Description |
---|---|---|---|
type | String | No | Type of notify popup:
|
Returns
None
Sample
Javascript
var notifyPopup = new kintoneUIComponent.NotifyPopup({
text: 'Submit sucessffully',
type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
notifyPopup.setType('success');
React
import { NotifyPopup } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props){
super(props);
this.state = {isVisible: true};
}
render() {
return (
<NotifyPopup text='Submit successfully' type='success' isVisible={this.state.isVisible} onClose={()=>(this.setState({isVisible: false}))} />
);
}
}
on(eventName, callback)
Register callback for click event
Parameter
Name | Type | Required | Description |
---|---|---|---|
eventName | String | Yes | Name of event:
|
callback | function | Yes | callback |
Returns
None
Sample
Javascript
var notifyPopup = new kintoneUIComponent.NotifyPopup({
text: 'Submit sucessffully',
type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
notifyPopup.on('click', function(event) {
console.log('on click');
});
React
import { NotifyPopup } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props){
super(props);
this.state = {isVisible: true};
}
render() {
return (
<NotifyPopup text='Submit successfully' type='success' isVisible={this.state.isVisible} onClose={()=>(this.setState({isVisible: false}))} onClick={this.handleClick} />
);
}
handleClick(event) {
console.log('on click');
}
}
show()
Display the notify popup.
Parameter
None
Returns
None
Sample
Javascript
var notifyPopup = new kintoneUIComponent.NotifyPopup({
text: 'Submit sucessffully',
type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
notifyPopup.show();
React
import { NotifyPopup } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props){
super(props);
this.state = {isVisible: true};
}
render() {
return (
<NotifyPopup text='Submit successfully' type='success' isVisible={this.state.isVisible} onClose={()=>(this.setState({isVisible: false}))} />
);
}
}
hide()
Hide the notify popup.
Parameter
None
Returns
None
Sample
Javascript
var notifyPopup = new kintoneUIComponent.NotifyPopup({
text: 'Submit sucessffully',
type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
notifyPopup.hide();
React
import { NotifyPopup } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<NotifyPopup text='Submit successfully' type='success' isVisible={false} />
);
}
}
disable()
Disabled the notify popup.
Parameter
None
Returns
None
Sample
Javascript
var notifyPopup = new kintoneUIComponent.NotifyPopup({
text: 'Submit sucessffully',
type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
notifyPopup.disable();
React
import { NotifyPopup } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props){
super(props);
this.state = {isVisible: true};
}
render() {
return (
<NotifyPopup text='Submit successfully' type='success' isVisible={this.state.isVisible} onClose={()=>(this.setState({isVisible: false}))} isDisabled={true} />
);
}
}
enable()
Enabled the notify popup.
Parameter
None
Returns
None
Sample
Javascript
var notifyPopup = new kintoneUIComponent.NotifyPopup({
text: 'Submit sucessffully',
type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
notifyPopup.enable();
React
import { NotifyPopup } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props){
super(props);
this.state = {isVisible: true};
}
render() {
return (
<NotifyPopup text='Submit successfully' type='success' isVisible={this.state.isVisible} onClose={()=>(this.setState({isVisible: false}))} isDisabled={false} />
);
}
}