Create Form Components with Kintone UI Component (v1)
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.
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.
Refer to the Quick Start in the documentation for details on installation.
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.
Mobile Checkbox (Kuc.MobileCheckbox)
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|
|Mobile Text Area||
Field settings such as making the field required or setting default text is also possible with Kintone UI Component.
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 such as keyboard compatibility and text to speech is supported. Settings differ depending on the OS.
- 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.
This article was tested with the July 2022 edition of Kintone, and Kintone UI Component version 1.4.0.