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