Skip to content

Alert

Overview

Favicon

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:
  • 'error'
  • 'success'
Default value is 'error'.
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.
  • "success": success alert.
  • "error": error alert
Default value is "error".

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:
  • 'click'
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}/>
        );
    }
}