Text

Overview

Text

Constructor

Parameter

Name	Type	Required	Description
options	Object	No	The object contains params of constructor.
options.value	String	No	The value of text field. Default value: ''
options.isDisabled	Boolean	No	The text field will be disabled. Default value: 'false'
options.isVisible	Boolean	No	The text field will be visible. Default value: 'true'

Sample

Javascript

var text= new kintoneUIComponent.Text({value: '12345'});

React

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

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: ''};
    };
    render() {
        return (
            <Text value={this.state.value} onChange={(value) => {this.setState({value})}} />
        );
    }
}

Methods

render()

Get dom element of component.

Parameter

None

Returns

Dom element

Sample

Javascript

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

React

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

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: ''};
    };
    render() {
        return (
            <Text value={this.state.value} onChange={(value) => {this.setState({value})}} />
        );
    }
}

setValue(value)

Set the value of text field.

Parameter

Name	Type	Required	Description
text	String	Yes	The value of text field.

Returns

None

Sample

Javascript

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

text.setValue('input text');

React

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

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '1'};
    };
    render() {
        return (
        <div>
          <Text value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Click</button>
        </div>
      );
    }
    handleClick= () => {
        this.setState({
            value: 'samp 1'
        });
    };
}

getValue()

Get the value of text field.

Parameter

None

Returns

Name	Type	Description
value	String	The value of text field.

Sample

Javascript

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

text.getValue();

React

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

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '1'};
    };
    render() {
        return (
        <div>
          <Text value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Click</button>
        </div>
      );
    }
    handleClick= () => {
        console.log(this.state.value);
    };
}

on(eventName, callBack)

Register callback for a event of component

Parameter

Name	Type	Required	Description
eventName	String	Yes	Name of event: 'click' 'change'
callback	function	Yes	callback

Returns

None

Sample

Javascript

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

text.on('click', function(event) {
    console.log('on click');
    console.log('value: ' + event.target.value);
});

React

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

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '1'};
    };
    render() {
        return (
            <Text value={this.state.value} onChange={this.handleChange.bind(this)} onClick={() => {console.log('click')}} />
        );
    }
    handleChange = (value) => {
            this.setState({value});
            console.log('value: ' + value);
        }
}

show()

Display the Text field.

Parameter

None

Returns

None

Sample

Javascript

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

text.show();

React

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

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '1'};
    };
    render() {
        return (
            <Text value={this.state.value} onChange={this.handleChange.bind(this)} isVisible={true} />
        );
    }
    handleChange = (value) => {
        this.setState({value});
        console.log('value: ' + value);
    }
}

hide()

Hide the Text field.

Parameter

None

Returns

None

Sample

Javascript

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

text.hide();

React

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

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '1'};
    };  
    render() {
        return (
            <Text value={this.state.value} onChange={this.handleChange.bind(this)} isVisible={false} />
        );
    }
    handleChange = (value) => {
        this.setState({value});
        console.log('value: ' + value);
    }
}

disable()

Disabled the Text field.

Parameter

None

Returns

None

Sample

Javascript

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

text.disable();

React

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

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '1'};
    };
    render() {
        return (
            <Text value={this.state.value} onChange={this.handleChange.bind(this)} isDisabled={true} />
        );
    }
    handleChange = (value) => {
        this.setState({value});
        console.log('value: ' + value);
    }
}

enable()

Enabled the Text field.

Parameter

None

Returns

None

Sample

Javascript

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

text.enable();

React

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

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '1'};
    };
    render() {
        return (
            <Text value={this.state.value} onChange={this.handleChange.bind(this)} isDisabled={false} />
        );
    }
    handleChange = (value) => {
        this.setState({value});
        console.log('value: ' + value);
    }
}