Skip to content

NotifyPopup

Overview

NotifyPopup

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:
  • 'error'
  • 'success'
  • 'infor'
Default value: 'error'
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 {
    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 {
    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 {
    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:
  • 'error'
  • 'success'
  • 'infor'
Default value: 'error'

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 {
    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:
  • 'click'
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 {
    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 {
    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 {
    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 {
    state = {
        isVisible: true
    }
    render() {
        return (
            <NotifyPopup text='Submit successfully' type='success' isVisible={this.state.isVisible} onClose={()=>(this.setState({isVisible: false}))} isDisabled={false} />
        );
    }
}