Create Form Components with Kintone UI Component (v1)

Contents

Overview

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

information

This article uses Kintone UI Component v1 (External link) . 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 (External link) article.

What is Kintone UI Component?

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.

GitHub

Documentation

Release Notes

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

Support policy for Kintone UI Component (v1 and later)

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

Installation

Refer to the Quick Start (External link) in the documentation for details on installation.

Available Features

Desktop and mobile-specific UI components

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.

Easily reproduced Kintone components

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.

Component Kintone UI Component Standard Kintone field
Drop-down

Mobile Text Area

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

Property declaration

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

Specifying class names and IDs

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

Accessibility

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

Notes

  • v1 is only provided with plain JavaScript. React is currently not supported.
  • For supported browsers, check the Browser support status (External link) 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 (External link) article on the KUC documents.
  • Any troubles or issues resulted from modification of the source code are not supported.

Reference

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