This article introduces how to create Kintone's form components using the Kintone UI Component (v0) tool.

Attention

Kintone UI Component v0 has reached EOL. For the latest features and security support it is highly recommended upgrading to Kintone UI Component v1 .

For more details, refer to the End of Support Notice for Kintone UI Component v0 news.

Kintone UI Component (v0) is a library that allows Kintone developers to easily create Kintone-like user interfaces. Kintone-like components can be built using Kintone UI Component (v0), without the need to write extensive HTML, JavaScript, or CSS. This article goes through an example of building UI components, and also introduces some functions of Kintone UI Component (v0).

In this example, Kintone UI Component (v0) is used to create Check box components similar to Kintone's Check box field. Create an App with the following fields and settings.

Follow these steps to download and apply Kintone UI Component (v0) to a Kintone App.

1. Access https://github.com/kintone-labs/kintone-ui-component/releases
2. Search for the latest v0 release. Download kintone-kintone-ui-component-0.x.tgz from the Assets, where 0.x is the version number.
3. Unzip the downloaded tgz file.
4. Locate the files kintone-ui-component.min.js and kintone-ui-component.min.css under package dist. Apply these files to the Kintone App through the JavaScript and CSS Customization Settings .

Use the following JavaScript code to display check-boxes with Kintone UI Component (v0). "component-UI" needs to be set as the Element ID of the Blank Space field where the check-box will be displayed.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

(function() {
  'use strict';

  kintone.events.on('app.record.detail.show', function(event) {
    var checkbox = new kintoneUIComponent.CheckBox({
      items: [
        {
          label: 'Orange',
          value: 'Orange',
          isDisabled: false
        },
        {
          label: 'Banana',
          value: 'Banana',
          isDisabled: false
        },
        {
          label: 'Lemon',
          value: 'Lemon',
          isDisabled: true
        },
      ],
      value: ['Orange']
    });
    kintone.app.record.getSpaceElement('component-UI').appendChild(checkbox.render());
  });
})();

In this example, the number of elements of the check box can be increased by adding elements to the items on line 6. Additionally, the default status of the check boxes can be changed by adding an items element to value on line 23. The element created may be handled as a DOM element by the component function render().

Handles a created component as a DOM element.

1

console.log(checkbox.render());

Adds an option to a check box component.

1
2
3
4
5
6

var item = {
  label: 'Grape',
  value: 'Grape',
  isDisabled: false
};
checkbox.addItem(item);

Gets the options from a check box component.

1
2

console.log(checkbox.getItem(0));
console.log(checkbox.getItems());

Deletes the options from a check box component.

1

checkbox.removeItem(0);

Gets or sets the value of a check box option.

1
2

console.log(checkbox.getValue());
checkbox.setValue(['Banana']);

Disables or enables an option in the check box component.

1
2

checkbox.disableItem('Orange');
checkbox.enableItem('Lemon');

A callback function that is triggered when a specific event occurs for a component. With check boxes, the eventName parameter is specified as change, which is an event that is triggered when the check boxes are checked or unchecked. There are also similar on(eventName, callBack) functions available for other components. For example, with buttons the eventName parameter is specified as click, which is an event that is triggered when a button is clicked.

1
2
3

checkbox.on('change', function(value) {
  console.log(value);
});

Shows or hides the component.

1

checkbox.hide();

Disables or enables the entire check box component.

1

checkbox.disable();

Besides check boxes, Tables and other types of UI that cannot be implemented with 51-modern-default.css, can be added with Kintone UI Component (v0).

1
2
3
4
5

var table = new kintoneUIComponent.Table({
  rowTemplate: [radioBtn, dropdown],
  header: ['Fruit', 'Color']
});
kintone.app.record.getSpaceElement('component-UI').appendChild(table.render());

There are various events available for the Table component:

rowAdd

Triggered when a row is added. The event object contains the value of the Table and the row number where the add button was clicked.

rowRemove

Triggered when a row is deleted. The event object contains the value of the Table.

cellChange

Triggered when the value of the cell is changed. The event object contains the value of the Table and the cell, as well as the position of the cell that is changed.

cellClick

Triggered when the cell is clicked. The event object contains the value of the Table and the cell, as well as the position of the cell that is clicked.

1
2
3
4
5

var notifyPopup = new kintoneUIComponent.NotifyPopup({
  text: 'Submitted successfully',
  type: 'success'
});
kintone.app.record.getSpaceElement('component-UI').appendChild(notifyPopup.render());

Pop-ups are easily implemented with NotifyPopup.

1
2
3

var spinner = new kintoneUIComponent.Spinner();
kintone.app.record.getSpaceElement('component-UI').appendChild(spinner.render());
spinner.show();

A spinner that is displayed while the page is loading can also be implemented with Spinner.

1
2
3
4
5
6

var insertBtn = new kintoneUIComponent.IconButton({
  type: 'insert',
  color: 'blue',
  size: 'large'
});
kintone.app.record.getSpaceElement('component-UI').appendChild(insertBtn.render());

+, -, and x buttons can be created with IconButton.

Since the on() method of IconButton has a click event, it is very simple to implement a function that runs when the button is clicked.

• Kintone UI Component (v0) | Documentation
• Kintone UI Component (v0) | QuickStart JavaScript
• Kintone UI Component (v0) | QuickStart React
• Kintone UI Component (v1) | Documentation