Skip to main content
Version: 1.17.1

FieldGroup

Overview

The FieldGroup component allows the user to create a content area that can be collapsed and expanded.


Specification

Property

Here is a list of properties that can be used for modifying the component:

NameTypeDefaultDescriptionRemark
classNamestring""Component class name
idstring""Component id name
labelstring""Label of the component
content *1string/HTMLElement""DOM inside contentIf a string with HTML is set, it will be automatically converted to HTML and displayed as it is
disabledbooleanfalseEnable/Disable the component
expandedbooleanfalseCollapsed/Expanded the component
visiblebooleantrueShow/Hide the component
caution

*1: [Security] Kintone UI Component does NOT sanitize this property value. It is the developer's responsibility to escape any user input when using this option so that XSS attacks would be prevented.

Event

Here is a list of events that can be specified:

NameTypeDescriptionRemark
changefunctionEvent handler when the component is collapsed or expandedIt will pass the event object as the argument

You can receive the following values when used in event.detail
event.detail.expanded : The status of "expanded" after the change (boolean)

Constructor

FieldGroup(options)
Here is a list of available constructors:

Parameter

NameTypeDefaultDescriptionRemark
optionsobject{}Object that includes component properties

Sample Code

tip

Please check the package installation method first.

Here is a sample code when all parameters are specified:

const Kuc = Kucs['1.x.x'];

const space = kintone.app.record.getSpaceElement('space');

const text = new Kuc.Text({
label: 'Text',
value: 'orange'
});
const fieldGroup = new Kuc.FieldGroup({
className: 'options-class',
id: 'options-id',
label: 'FieldGroup',
disabled: false,
expanded: false,
visible: true,
content: text
});

space.appendChild(fieldGroup);

fieldGroup.addEventListener('change', event => {
console.log(event);
});