Create Plug-in Setting Pages with Kintone UI Component (v0)

Contents

Introduction

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) (External link) 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 (External link) for a complete list of all elements and their settings.

Please note that with the release of the v1 library (External link) , 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 fields and radio button fields require the user to select a single value. In this example, the HTML element has an ID of singlechoice.

 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());

Radio Button

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

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.