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.

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

(function() {
  'use strict';
  kintone.events.on('app.record.index.show', function(event) {
    const header = kintone.app.getHeaderMenuSpaceElement();
    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.

Screenshot: A button component is created above the list of records.

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
(function() {
  'use strict';
  kintone.events.on('mobile.app.record.detail.show', function(event) {
    const space = kintone.mobile.app.record.getSpaceElement('mobileSpace');
    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.

Screenshot: A check box component is created in the mobile view.

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

Screenshot: Kintone UI Component's Drop-down

Screenshot: Standard Kintone's Drop-down

Mobile Text Area

Screenshot: Kintone UI Component's Mobile Text Area

Screenshot: Standard Kintone's 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
const kintoneHeaderSpace = kintone.app.getHeaderMenuSpaceElement();
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.

Reference

This article was tested with the January 2021 edition of Kintone, and Kintone UI Component version 1.0.0.