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:
|
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. |
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. |
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"));