Introduction to Kintone UI Component v1

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.
v1 is available for both desktop and mobile development. Check the Components section in the documentation for supported components.

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

Installation

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

For developers looking for information on v0, refer to the article, Create form elements with Kintone UI Component v0. For information on migrating from v0 to v1, refer to A commentary on the difference between v0 and v1 from the official documentation.

Features

This section will introduce a number of features in Kintone UI Component v1.

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)

The created button with the text sample is shown below.

Button

Mobile Checkbox (Kuc.MobileCheckbox)

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

MobileCheckbox

Easily reproduced Kintone components

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

Component

Kintone UI Component

Standard Kintone field

Dropdown

KUC_sample03.png KUC_sample04.png

Mobile Text Area

KUC_sample05.png KUC_sample06.png

 

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

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.
  • IE11 is not supported.
    For details, check the Browser support status information from the official documentation.

Update history

Check the developer pages below for update history and the latest information on new features.

Finally

With Kintone UI Component, it is easy to create Kintone-like UIs for customizations that would have previously been time-consuming. Kintone UI Component is especially popular for recreating buttons and dropdowns, but can be used to create entire plug-in pages and other UI-intensive customizations. 

 

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

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!