FieldGroup

Overview

Number	Description
1	Expanding icon.
2	Field group name.
3	Display item zone. When the width of display items is over 517px, the width of Field Group component changes according to display items. If the width of Field Group component is over the width of its parent DOM, scroll bar is shown.
4	Collapse icon.

Constructor

Parameter

Name	Type	Required	Description
options	Object	No	The object contains parameters of constructor.
options.content	DOM Element	No	Content of Field Group.
options.name	String	No	Field group name.
options.toggle	String	No	Set the toggle state. Default value: 'collapse' Following value can be set: collapse expand
options.onToggle	Function	No	Set the toggle function. ※This prop is for react. When you use pure JavaScript interface, there is no need to use this prop.

Sample

Javascript

const text = new kintoneUIComponent.Text({ value: "12345" });
const button = new kintoneUIComponent.Button({
    text: 'Submit',
    type: 'submit'
});
const attachment = new kintoneUIComponent.Attachment({files: [{name: 'test_1', size: 12345}]});
const checkbox = new kintoneUIComponent.CheckBox ({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: false
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: true
        },
        {
            label: 'Lemon',
            value: 'Lemon',
            isDisabled: true
        }
    ],
    value: ['Orange', 'Banana']
});
const dropdown = new kintoneUIComponent.Dropdown({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: true
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: false
        }
    ],
    value: 'Banana'
});
const insertBtn = new kintoneUIComponent.IconButton({type: 'insert',color:'blue', size: 'small'});
const label = new kintoneUIComponent.Label({text: 'My label', isRequired: true});
const mulChoice = new kintoneUIComponent.MultipleChoice({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: false
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: true
        },
        {
            label: 'Lemon',
            value: 'Lemon',
            isDisabled: true
        }
    ],
    value: ['Orange', 'Banana']
});
const alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
const radioBtn = new kintoneUIComponent.RadioButton({
    name: "fruit",
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: false
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: true
        },
        {
            label: 'Lemon',
            value: 'Lemon',
            isDisabled: true
        }
    ],
    value: 'Banana'
});
const textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
const customCell = function() {
    return {
        init: function({rowData, updateRowData}) {
            const span = document.createElement('span');
            const textfield1 = new kintoneUIComponent.Text({value: rowData.text1.value});
            const textfield2 = new kintoneUIComponent.Text({value: rowData.text2.value});
            span.appendChild(textfield1.render());
            span.appendChild(textfield2.render());
            textfield1.on('change', function(newValue){
                updateRowData({text1: {value: newValue}}, false);
            });
            textfield2.on('change', function(newValue){
                updateRowData({text2: {value: newValue}}, false);
            });
            this.textfield1 = textfield1;
            this.textfield2 = textfield2;
            return span;
        },
        update: function({ rowData }) {
            const text1val = rowData.text1;
            const text2val = rowData.text2;
            if (text1val && this.textfield1._reactObject) {
                this.textfield1.setValue(text1val.value);
            }
            if (text2val && this.textfield2._reactObject) {
                this.textfield2.setValue(text2val.value);
            }
        }
    }
};
const table = new kintoneUIComponent.Table({
    // initial table data
    data: [
        {
            text: { value: 'text field' },
            text1: { value: 'text field 1' },
            text2: { value: 'text field 2' }
        }
    ],
    // default row data on row add
    defaultRowData: {
        text: { value: 'text field' },
        text1: { value: 'text field 1' },
        text2: { value: 'text field 2' }
    },
    onRowAdd: function(e) {
        console.log('table.onAdd', e);
        return {
            text: {value: 'overwritten field value'},
            text1: { value: 'overwritten field1 value' },
            text2: { value: 'overwritten field2 value' }
        }
    },
    columns: [
        {
            header: 'Text',
            cell: function() { return kintoneUIComponent.createTableCell('text', 'text') }
        },
        {
            header: 'Custom cell contains 2 textfields',
            cell: function() { return customCell() }
        }
    ]
});

const fieldGroupContent = document.createElement('div')

fieldGroupContent.appendChild(alert.render())
fieldGroupContent.appendChild(attachment.render())
fieldGroupContent.appendChild(button.render())
fieldGroupContent.appendChild(checkbox.render())
fieldGroupContent.appendChild(dropdown.render())
fieldGroupContent.appendChild(insertBtn.render())
fieldGroupContent.appendChild(label.render())
fieldGroupContent.appendChild(mulChoice.render())
fieldGroupContent.appendChild(radioBtn.render())
fieldGroupContent.appendChild(table.render())
fieldGroupContent.appendChild(text.render())
fieldGroupContent.appendChild(textArea.render())

const fieldGroup = new kintoneUIComponent.FieldGroup({
    content: fieldGroupContent,
    name: 'Group',
    toggle: 'expand'
})

React

import { FieldGroup, RadioButton } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        const items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: false
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: false
            },
        ];
        this.state = {
            items: items,
            radioValue: 'Orange',
            name: 'Group',
            toggle: 'expand'
        };
    }

    render() {
        return (
            <div>
                <FieldGroup
                    name={this.state.name}
                    toggle={this.state.toggle}
                    onToggle={this._handleToggleClick}
                >
                    <RadioButton name='radio' items={this.state.items} value={this.state.radioValue} onChange={(radioValue) => {this.setState({radioValue})}} />
                </FieldGroup>
            </div>
        );
    }

    _handleToggleClick = () => {
        this.setState({
            toggle: this.state.toggle === 'expand' ? 'collapse' : 'expand'
        });
    }
}

Methods

render()

Get DOM element of component.

Parameter

None

Returns

DOM element

Sample

Javascript

const text = new kintoneUIComponent.Text({ value: "12345" });

const fieldGroup = new kintoneUIComponent.FieldGroup({
      content: text.render(),
      name: 'Group',
      toggle: 'expand'
    })
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(fieldGroup.render());

React

import { FieldGroup, RadioButton } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom"; 
export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        const items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: false
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: false
            },
        ];
        this.state = {
            items: items,
            radioValue: 'Orange',
            name: 'Group',
            toggle: 'expand'
        };
    }

    render() {
        return (
            <div>
                <FieldGroup
                    name={this.state.name}
                    toggle={this.state.toggle}
                    onToggle={this._handleToggleClick}
                >
                    <RadioButton name='radio' items={this.state.items} value={this.state.radioValue} onChange={(radioValue) => {this.setState({radioValue})}} />
                </FieldGroup>
            </div>
        );
    }

    _handleToggleClick = () => {
        this.setState({
            toggle: this.state.toggle === 'expand' ? 'collapse' : 'expand'
        });
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

setContent(content)

Add an item to end of Field Group.

Parameter

Name	Type	Required	Description
content	DOM	Yes	The content of Field Group.

Returns

None

Sample

Javascript

const radioBtn = new kintoneUIComponent.RadioButton({
    items: [{ label: 'Orange', value: 'orange' }, { label: 'Banana', value: 'banana' }],
    value: 'orange',
    name: 'Fruit'
});

const button = new kintoneUIComponent.Button({ text: 'Set content', type: 'normal' });
button.on('click', function () {
    const text = new kintoneUIComponent.Text({ value: "12345" });
    fieldGroup.setContent(text.render());
});

const fieldGroupContent = document.createElement('div')

fieldGroupContent.appendChild(radioBtn.render())
fieldGroupContent.appendChild(button.render())

const fieldGroup = new kintoneUIComponent.FieldGroup({
    content: fieldGroupContent,
    name: 'Group',
    toggle: 'expand'
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(fieldGroup.render());

React

import { FieldGroup, Label } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            content: <Label text='Field Group Content Label' textColor='#e74c3c'
            backgroundColor='yellow' isRequired={true} />,
            radioValue: 'Orange',
            name: 'Group',
            toggle: 'expand'
        };
    }
    render() {
        return (
            <div>
                <FieldGroup
                    name={this.state.name}
                    toggle={this.state.toggle}
                    onToggle={this._handleToggleClick}
                    content={this.state.content}
                >
                </FieldGroup>
                <button onClick={this.handleClick}>Set Item</button>
            </div>
        );
    }

    _handleToggleClick = () => {
        this.setState({
            toggle: this.state.toggle === 'expand' ? 'collapse' : 'expand'
        });
    }
    handleClick = () => {
      this.setState({
        content: <Label text='updated Content Label' textColor='#e74c3c' backgroundColor='yellow' isRequired={true} />
      });
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

getContent()

Get content of Field Group.

Parameter

None

Returns

Name	Type	Required	Description
content	DOM	Yes	The content of Field Group.

Sample

Javascript

const radioBtn = new kintoneUIComponent.RadioButton({
    items: [{ label: 'Orange', value: 'orange' }, { label: 'Banana', value: 'banana' }],
    value: 'orange',
    name: 'Fruit'
});

const fieldGroup = new kintoneUIComponent.FieldGroup({
    content: radioBtn.render(),
    name: 'Group',
    toggle: 'expand'
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(fieldGroup.render());

console.log(fieldGroup.getContent());

React

import { FieldGroup, Label } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            content: <Label text='Field Group Content Label' textColor='#e74c3c'
            backgroundColor='yellow' isRequired={true} />,
            radioValue: 'Orange',
            name: 'Group',
            toggle: 'expand'
        };
    }
    render() {
        return (
            <div>
                <FieldGroup
                    name={this.state.name}
                    toggle={this.state.toggle}
                    onToggle={this._handleToggleClick}
                    content={this.state.content}
                >
                </FieldGroup>
                <button onClick={this.handleClick}>Get Item</button>
            </div>
        );
    }

    _handleToggleClick = () => {
        this.setState({
            toggle: this.state.toggle === 'expand' ? 'collapse' : 'expand'
        });
    }
    handleClick = () => {
      console.log(this.state.content)
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

setName(name)

Set the name for Field Group.

Parameter

Name	Type	Required	Description
name	String	Yes	The Field Group name.

Returns

None

Sample

Javascript

const text = new kintoneUIComponent.Text({ value: "12345" });

const button = new kintoneUIComponent.Button({ text: 'Set name', type: 'normal' });
button.on('click', function () {
    fieldGroup.setName('New Group Name');
});

const fieldGroupContent = document.createElement('div')

fieldGroupContent.appendChild(text.render())
fieldGroupContent.appendChild(button.render())

const fieldGroup = new kintoneUIComponent.FieldGroup({
    content: fieldGroupContent,
    name: 'Group',
    toggle: 'expand'
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(fieldGroup.render());

React

import { FieldGroup, Label } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name: 'Group', toggle: 'expand' };
    }
    render() {
        return (
            <div>
                <FieldGroup name={this.state.name} toggle={this.state.toggle} onToggle={this._handleToggleClick} >
                    <Label text='Field Group Content Label' textColor='#e74c3c' backgroundColor='yellow' isRequired={true} />
                </FieldGroup>
                <button onClick={this.handleClick}>Set Name</button>
            </div>
        );
    }

    _handleToggleClick = () => {
        this.setState({
            toggle: this.state.toggle === 'expand' ? 'collapse' : 'expand'
        });
    }

    handleClick = () => {
        this.setState({ name: 'NEW FIELD GROUP' });
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

getName()

Get name of Field Group.

Parameter

None

Returns

Name	Type	Description
name	String	The content of Field Group.

Sample

Javascript

const text = new kintoneUIComponent.Text({ value: "12345" });

const fieldGroup = new kintoneUIComponent.FieldGroup({
    content: text.render(),
    name: 'Group',
    toggle: 'expand'
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(fieldGroup.render());

console.log(fieldGroup.getName());

React

import { FieldGroup, Label } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name: 'Group', toggle: 'expand' };
    }
    render() {
        return (
            <div>
                <FieldGroup name={this.state.name} toggle={this.state.toggle} onToggle={this._handleToggleClick} >
                    <Label text='Field Group Content Label' textColor='#e74c3c' backgroundColor='yellow' isRequired={true} />
                </FieldGroup>
                <button onClick={this.handleClick}>Get Name</button>
            </div>
        );
    }

    _handleToggleClick = () => {
        this.setState({
            toggle: this.state.toggle === 'expand' ? 'collapse' : 'expand'
        });
    }

    handleClick = () => {
        console.log(this.state.name);
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

setToggle(toggle)

Set the toggle state for Field Group.

Parameter

Name	Type	Required	Description
toggle	String	Yes	The toggle state of Field Group. collapse expand

Returns

None

Sample

Javascript

const text = new kintoneUIComponent.Text({ value: "12345" });

const button = new kintoneUIComponent.Button({ text: 'Set toggle is collapse', type: 'normal' });
button.on('click', function () {
    fieldGroup.setToggle('collapse');
});

const fieldGroupContent = document.createElement('div')

fieldGroupContent.appendChild(text.render())
fieldGroupContent.appendChild(button.render())

const fieldGroup = new kintoneUIComponent.FieldGroup({
    content: fieldGroupContent,
    name: 'Group',
    toggle: 'expand'
});

var body = document.getElementsByTagName("BODY")[0];
body.appendChild(fieldGroup.render());

React

import { FieldGroup, Label } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name: 'Group', toggle: 'expand' };
    }
    render() {
        return (
            <div>
                <FieldGroup name={this.state.name} toggle={this.state.toggle} onToggle={this._handleToggleClick} >
                    <Label text='Field Group Content Label' textColor='#e74c3c' backgroundColor='yellow' isRequired={true} />
                </FieldGroup>
                <button onClick={this.handleClick}>Set Toggle</button>
            </div>
        );
    }

    _handleToggleClick = () => {
        this.setState({
            toggle: this.state.toggle === 'expand' ? 'collapse' : 'expand'
        });
    }

    handleClick = () => {
        this.setState({ toggle: 'collapse' });
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

getToggle()

Get toggle state of Field Group.

Parameter

None

Returns

Name	Type	Description
toggle	String	The toggle state of Field Group. collapse expand

Sample

Javascript

const text = new kintoneUIComponent.Text({ value: "12345" });

const fieldGroup = new kintoneUIComponent.FieldGroup({
      content: text.render(),
      name: 'Group',
      toggle: 'expand'
    })
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(fieldGroup.render());

console.log(fieldGroup.getToggle());

React

import { FieldGroup, Label } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name: 'Group', toggle: 'expand' };
    }
    render() {
        return (
            <div>
                <FieldGroup name={this.state.name} toggle={this.state.toggle} onToggle={this._handleToggleClick} >
                    <Label text='Field Group Content Label' textColor='#e74c3c' backgroundColor='yellow' isRequired={true} />
                </FieldGroup>
                <button onClick={this.handleClick}>Get Toggle</button>
            </div>
        );
    }

    _handleToggleClick = () => {
        this.setState({
            toggle: this.state.toggle === 'expand' ? 'collapse' : 'expand'
        });
    }

    handleClick = () => {
        console.log(this.state.toggle);
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));