Kintone UI Component (v0) can be used to easily create Kintone-styled elements for plug-in settings pages. Refer to the
Kintone UI Component (v0)
guide for an overview of the tool and instructions for use. This guide will introduce various ways to use Kintone UI Component (v0) to create elements that would be useful for a plug-in settings page.
Note that this guide does not include a comprehensive list of all elements available. Refer to the
Kintone UI Component (v0) documentation
for a complete list of all elements and their settings.
Please note that with the release of the
v1 library
, as of
December 31 2023
, the v0 library is now in maintenance mode. No new functions are planned to be developed.
Alert Message
There are two types of alert messages that can be used. In this example, the HTML element has an ID of alert.
Success Alert
1
2
3
var alert = new kintoneUIComponent.Alert({text: 'Success!', type: 'success'});
var div = document.getElementById('alert');
div.appendChild(alert.render());
Error Alert
1
2
3
var alert = new kintoneUIComponent.Alert({text: 'Caution!', type: 'error'});
var div = document.getElementById('alert');
div.appendChild(alert.render());
Label
Labels are generally used to insert titles for fields. In this example, the HTML element has an ID of label.
Normal Label
1
2
3
var label = new kintoneUIComponent.Label({text: 'This is a label'});
var div = document.getElementById('label');
div.appendChild(label.render());
Required Label
1
2
3
var label = new kintoneUIComponent.Label({text: 'This is a label for a required field', isRequired: true});
var div = document.getElementById('label');
div.appendChild(label.render());
Text Input
Text inputs can be made as single-line or multi-line input fields. In this example, the HTML element has an ID of input.
Single-line Input
1
2
3
var text = new kintoneUIComponent.Text({placeholder: 'Text goes here'});
var div = document.getElementById('input');
div.appendChild(text.render());
Multi-line Input
1
2
3
var text = new kintoneUIComponent.TextArea({placeholder: 'Text goes here'});
var div = document.getElementById('input');
div.appendChild(text.render());
Check Box and Multiple Choice
Check box fields and multiple choice fields allow the user to select none, one, or multiple selections. In this example, the HTML element has an ID of multichoice.
Check Box
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var checkbox = new kintoneUIComponent.CheckBox({
items: [
{
label: 'Orange',
value: 'orange',
},
{
label: 'Banana',
value: 'banana',
},
{
label: 'Lemon',
value: 'lemon',
},
]
});
var div = document.getElementById('multichoice');
div.appendChild(checkbox.render());
Multiple Choice
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var mulchoice = new kintoneUIComponent.MultipleChoice({
items: [
{
label: 'Orange',
value: 'orange',
},
{
label: 'Banana',
value: 'banana',
},
{
label: 'Lemon',
value: 'lemon',
},
]
});
var div = document.getElementById('multichoice');
div.appendChild(mulchoice.render());
Dropdown and Radio Button
Dropdown fields and radio button fields require the user to select a single value. In this example, the HTML element has an ID of singlechoice.
Dropdown
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var dropdown = new kintoneUIComponent.Dropdown({
items: [
{
label: 'Orange',
value: 'orange',
},
{
label: 'Banana',
value: 'banana',
},
{
label: 'Lemon',
value: 'lemon',
}
],
value: 'banana'});
var div = document.getElementById('singlechoice');
div.appendChild(dropdown.render());
var radioBtn = new kintoneUIComponent.RadioButton({
name: 'fruit',
items: [
{
label: 'Orange',
value: 'orange',
},
{
label: 'Banana',
value: 'banana',
},
{
label: 'Lemon',
value: 'lemon',
}
],
value: 'banana'});
var div = document.getElementById('singlechoice');
div.appendChild(radioBtn.render());
Button
There are two types of button styles that can be used. In this example, the HTML element has an ID of button.
Normal Button
1
2
3
var button = new kintoneUIComponent.Button({text: 'Cancel', type: 'normal'});
var div = document.getElementById('button');
div.appendChild(button.render());
Submit Button
1
2
3
var button = new kintoneUIComponent.Button({text: 'Save', type: 'submit'});
var div = document.getElementById('button');
div.appendChild(button.render());
Note
Layouts and styles may change in the case of future updates that include a change in design.