Create Form Components with Kintone UI Component (v0)

Contents

Overview

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

What is Kintone UI Component (v0)?

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).

Note that with the release of the v1 library (External link), the v0 library is now in maintenance mode. No new functions are planned to be developed.

Example: Create Kintone-like Check boxes

Prepare the App

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

Field Type Field Name Element ID
Blank space - component-UI

Download Kintone UI Component (v0)

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 (External link)
  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 (External link).

Sample Code

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

Screenshot: Check-boxes created in a Kintone App with Kintone UI Component (v0)

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

Available Methods

render()

Handles a created component as a DOM element.

1
console.log(checkbox.render());

Screenshot: The render method is used to create check box components in an App.

addItem(item)

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

Screenshot: The addItem method is used to add options to the check box component.

getItem(index), getItems()

Gets the options from a check box component.

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

Screenshot: The getItem and getItems methods are used to get options from a check box component.

removeItem(index)

Deletes the options from a check box component.

1
checkbox.removeItem(0);

Screenshot: The removeItem method is used to remove a choice from a check box component.

getValue(), setValue(value)

Gets or sets the value of a check box option.

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

Screenshot: The getValue method is used to get values from the check box component. The setValue method is used to set a value into the check box component.

disableItem(value), enableItem(value)

Disables or enables an option in the check box component.

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

Screenshot: The disableItem and enableItem methods are used to disable and enable items in a check box component.

on(eventName, callBack)

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

Screenshot: The checkbox.on function is used print values of a check box when options are clicked.

show(), hide()

Shows or hides the component.

1
checkbox.hide();

Screenshot: The hide method is used to hide a check box component.

disable(), enable()

Disables or enables the entire check box component.

1
checkbox.disable();

Screenshot: The disable method is used to disable the check box component.

Available UI Elements

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).

Table

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

Screenshot: A Table component is created in the App.

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.

NotifyPopup

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

Screenshot: NotifyPopup is used to create pop-ups.

Pop-ups are easily implemented with NotifyPopup.

Spinner

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

Screenshot: Spinner is used to create loading spinners.

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

IconButton

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

Screenshot: IconButton is used to create buttons.

+, -, 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.

Reference