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

This article uses Kintone UI Component v1 . For users using Kintone UI Component v0, it is highly recommended upgrading to Kintone UI Component v1, as Kintone UI Component v0 has reached EOL.

When migrating to v1, the customization code will need to be updated.
For more information, refer to the A commentary on the difference between v0 and v1 article.

Kintone UI Component is a library that allows Kintone developers to easily create Kintone-like user interfaces. It can be used to create form components for Kintone customizations or plug-in development. This article introduces the features of Kintone UI Component v1. Kintone UI Component v1 is available for both desktop and mobile development.

• https://github.com/kintone-labs/kintone-ui-component

• https://ui-component.kintone.dev

Release Notes

• https://ui-component.kintone.dev/docs/releases/release-notes/

The release notes introduce the background of the v1 release and the contents of the update.

• Questions and feature requests may be posted as a GitHub Issue .
• The source code may be changed, redistributed, and used for commercial use under the terms of the license. Check the GitHub repository for the license type.

Refer to the Quick Start in the documentation for details on installation.

Kintone UI Component allows the simple creation of components with either the Kintone desktop or mobile design. This section will introduce the desktop button and mobile checkbox designs.

Desktop Button (Kuc.Button)

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

(function() {
  'use strict';
  kintone.events.on('app.record.index.show', function(event) {
    const header = kintone.app.getHeaderMenuSpaceElement();

    const Kuc = Kucs['1.4.0'];
    const button = new Kuc.Button({
      text: 'sample',
      type: 'submit',
      className: 'options-class',
      id: 'options-id',
      visible: true,
      disabled: false
    });
    header.appendChild(button);

    button.addEventListener('click', function(ev) {
      console.log(ev);
    });
    return event;
  });
})();

The created button with the text sample is shown below.

Mobile Checkbox (Kuc.MobileCheckbox)

 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
28
29
30
31

(function() {
  'use strict';
  kintone.events.on('mobile.app.record.detail.show', function(event) {
    const space = kintone.mobile.app.record.getSpaceElement('mobileSpace');

    const Kuc = Kucs['1.4.0'];
    const checkbox = new Kuc.MobileCheckbox({
      label: 'Fruit',
      requiredIcon: true,
      items: [{
        label: 'orange',
        value: 'Orange'
      }, {
        label: 'apple',
        value: 'Apple'
      }],
      value: ['Orange'],
      itemLayout: 'horizontal',
      className: 'options-class',
      id: 'options-id',
      visible: true,
      disabled: false,
      borderVisible: true
    });
    space.appendChild(checkbox);
    checkbox.addEventListener('change', function(ev) {
      console.log(ev);
    });
    return event;
  });
})();

The created Fruit check box with options orange and apple is shown below.

Each component of Kintone UI Component reliably reproduces the UI and behavior of its standard Kintone fields. A drop-down and text area field created with Kintone UI Component is compared with the standard Kintone fields below.

Field settings such as making the field required or setting default text is also possible with Kintone UI Component.

Component values are saved as properties of the component. This allows changes to be made to the component using standard JavaScript. In the example below, the text property of a Button component is changed from sample to update by accessing the text property.

Sample Code

1
2
3
4
5
6
7
8

const kintoneHeaderSpace = kintone.app.getHeaderMenuSpaceElement();

const Kuc = Kucs['1.4.0'];
const button = new Kuc.Button({
  text: 'sample'
});
button.text = 'update';
kintoneHeaderSpace.appendChild(button);

Class names and IDs of each component can be specified. Detailed customizations and style changes can then be applied to each component.

Accessibility such as keyboard compatibility and text to speech is supported. Settings differ depending on the OS.

• v1 is only provided with plain JavaScript. React is currently not supported.
• For supported browsers, check the Browser support status page.
• From v1.4.0, a feature has been implemented into KUC to solve version conflict issues. Sample codes in this article have been updated to reflect this new feature. For more details on this feature, read through the Version conflicts issue and solution article on the KUC documents.
• Any troubles or issues resulted from modification of the source code are not supported.

• Kintone UI Component v0 and v1 Comparisons
• GitHub Releases
• Release Notes

This article was tested with the July 2022 edition of Kintone, and Kintone UI Component version 1.4.0.