Skip to content

Button

Overview

Button

Number Description
1 Normal button
2 Submit button

Constructor

Parameter

Name Type Required Description
options Object No The object contains params of constructor.
options.text String No Text will be displayed in button.
options.type String No Style of the button:
  • 'normal'
  • 'submit'
Default value: 'normal'
options.isDisabled Boolean No The button will be disabled.
Default value: 'false'
options.isVisible Boolean No The button will be visible.
Default value: 'true'

Sample

Javascript

var button = new kintoneUIComponent.Button({
    text: 'Submit',
    type: 'submit'
});

React

import { Button } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    render() {
        return (
            <Button text='Submit' type='submit' isDisabled={false} isVisible={true} />
        );
    }
}

Methods

render()

Get dom element of component.

Parameter

None

Returns

Dom element

Sample

Javascript

var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());

React

import { Button } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    render() {
        return (
            <Button text='Submit' type='submit' isDisabled={false} isVisible={true} />
        );
    }
}

setText(text)

Set displayed text in button.

Parameter

Name Type Required Description
text String Yes Display text in button

Returns

None

Sample

Javascript

var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.setText('submit');

React

import { Button } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    render() {
        return (
            <Button text='Submit' type='normal' />
        );
    }
}

setType(type)

Set the displayed type for button.

Parameter

Name Type Required Description
type String No Style of the button:
  • 'normal'
  • 'submit'
Default value: 'normal'

Returns

None

Sample

Javascript

var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.setType('normal');

React

import { Button } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    render() {
        return (
            <Button text='Submit' type='normal' />
        );
    }
}

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 button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.on('click', function(event) {
    console.log('on click');
});

React

import { Button } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    render() {
        return (
            <Button onClick={this.handleButtonClick} />
        );
    }

    handleButtonClick(event) {
        console.log('on click');
    }
}

show()

Display button.

Parameter

None

Returns

None

Sample

Javascript

var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.show();

React

import { Button } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    render() {
        return (
            <Button text="button" isVisible={true} />
        );
    }
}

hide()

Hide button.

Parameter

None

Returns

None

Sample

Javascript

var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.hide();

React

import { Button } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    render() {
        return (
            <Button text="button" isVisible={false} />
        );
    }
}

disable()

Disable button.

Parameter

None

Returns

None

Sample

Javascript

var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.disable();

React

import { Button } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    render() {
        return (
            <Button text="button" isDisabled={true} />
        );
    }
}

enable()

Enable button.

Parameter

None

Returns

None

Sample

Javascript

var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.enable();

React

import { Button } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    render() {
        return (
            <Button text="button" isDisabled={false} />
        );
    }
}