Create form elements with Kintone UI Component

Introduction

Kintone UI Component is a library that allows Kintone developers to easily create Kintone-like user interfaces. Refer to the following GitHub repository and documentation for installation instructions and feature information.

 

GitHubhttps://github.com/kintone/kintone-ui-component
Documentationhttps://kintone.github.io/kintone-ui-component/

 

A Kintone-like UI can be easily created using Kintone UI Component, without the need to write extensive HTML, JavaScript, or CSS. This article compares conventional code written manually to create a Kintone-like UI, with code using Kintone UI Component. This article will also introduce some functions of Kintone UI Component.

To go straight to how to use Kintone UI Component, go to Creating Checkboxes with Kintone UI Component.

Creating Kintone-like Checkboxes without Kintone UI Component

Prerequisite

Create a new App that includes a Blank Space field in its form. Set an Element ID for the Blank Space field through the Blank Space field's settings. Save the settings, and activate the App.

Step 1: Set up regular Checkboxes

Upload the following JavaScript code to the App's JavaScript and CSS settings to create a checkbox component. Replace the string  "nativeUI" in the JavaScript code with the Element ID of the Blank Space field that was created. For help with uploading JavaScript and CSS files, refer to Customizing Kintone with JavaScript and CSS in the Kintone Help Center. 

 

At this point, the design of the checkbox component does not quite match the rest of the Kintone UI.

 

UI_001.png

Step 2: Use 51-modern-default.css

CSS is needed in order to change the visual design of the checkbox component to fit in with the Kintone UI. The CSS for designing a Kintone-like UI, 51-modern-default.css, is available on GitHub. Download the file and upload it to the App's JavaScript and CSS settings. Then, refer to the Plug-in Stylesheet Guide to reproduce the DOM structure of the checkbox component in the JavaScript code. A sample code is shown below. Replace the string "modern-default-UI" in the JavaScript code with the Element ID of the Blank Space field.

 

UI_002.png

 

The checkboxes have now been changed to a Kintone-like UI. However, the JavaScript code declares each attribute of the HTML elements in the code, making hard to read.

Step 3: Use jQuery

The jQuery library that is hosted on the Kintone CDN will be used to make the code easier to read. Upload the jQuery link to the JavaScript and CSS settings of the App. Replace the string "jquery-UI" in the JavaScript code below with the Element ID of the Blank Space field.

 

The code is simpler now, but it still requires a bit of work to specify the classes and intricate HTML elements.

Creating Kintone-like Checkboxes with Kintone UI Component

The Kintone UI Component will be used to create a similar Checkbox component. This example will work on the same App used in the previous example - before proceeding, make sure to delete any JavaScript or CSS files that were uploaded onto the JavaScript and CSS settings of the App.

Download Kintone UI Component

The Kintone UI Component allows a much simpler experience of creating a Kintone-like UI.
Go to the Kintone UI Component GitHub page to download the following files:

Apply the above files to the Kintone App from the JavaScript and CSS settings. Replace the string "component-UI" in the JavaScript code with the element ID of the Blank Space field.

Sample Code

UI_004.png

 

A similar checkbox component was created without needing to specify HTML elements or attributes.
In this example, the number of elements of the checkbox can be increased by adding elements to the items on line 6.
Additionally, the default status of the checkboxes can be changed by adding an items element to value on line 23. The element created may be handled as a DOM element by the component function render().

Kintone UI Component Functions

There are other functions besides the render() function for handling UI components.
The following section explains these component functions, using checkboxes as an example.
Refer to the documentation for functions of other UI components.

render()

Handles a created component as a DOM element.

 

UI_render.png

addItem(item)

Adds an option to a checkbox component.

 

UI_addItem.png

getItem(index), getItems()

Gets the options from a checkbox component.

 

UI_getItem.png

removeItem(index)

Deletes the options from a checkbox component.

 

UI_removeItem.png

getValue(), setValue(value)

Gets or sets the value of a checkbox option.

 

getsetValue.png

disableItem(value), enableItem(value)

Disables or enables an option in the checkbox component.

 

UI_disableItem.png

on(eventName, callBack)

A callback function that is triggered when a specific event occurs for a component.
With checkboxes, the eventName parameter is specified as 'change', which is an event that is triggered when the checkboxes are checked or unchecked.
There are also similar on(eventName, callBack) functions available for other components.
For example, with buttons the eventName parameter is specified as 'click', which is an event that is triggered when a button is clicked.
Refer to the documentation for other events provided for each component.

 

UI_on.png

show(), hide()

Shows or hides the component.

 

UI_hide.png

disable(), enable()

Disables or enables the entire checkbox component.

 

UI_disable.png

Other UI Elements

Besides checkboxes, Tables and other types of UI that cannot be implemented with 51-modern-default.css, can be added simply with Kintone UI Component.
Some examples are given below. For details on the method of implementing these examples, refer to the documentation.

Table

UI_table.png

 

There are various events available for the Table component:

rowAdd

Triggered when a row is added. The event object contains the value of the Table and the row number where the add button was clicked.

rowRemove

Triggered when a row is deleted. The event object contains the value of the Table.

cellChange

Triggered when the value of the cell is changed. The event object contains the value of the Table and the cell, as well as the position of the cell that is changed.

cellClick

Triggered when the cell is clicked. The event object contains the value of the Table and the cell, as well as the position of the cell that is clicked.

For details about data received with the callback function, refer to the documentation.
Various operations can be implemented by using the events shown above.

NotifyPopup

UI_notifypopup.png

 

Pop-ups are easily implemented with NotifyPopup.

Spinner

UI_spinner.png

 

A spinner that is displayed while the page is loading can also be implemented with Spinner.

IconButton

UI_button.png

 

+, -, and x buttons can be created with IconButton.

Since the on() function of IconButton has a click event, it's very simple to implement a function that runs when the button is clicked.

Finally

Kintone UI Component does not just help to easily create a Kintone-like UI, it also helps implement a wide variety of processes with events that support UI actions.
Refer to the documentation and take advantage of these useful features!

Important Notes

Kintone UI Component is an open source library. For questions on how to use Kintone UI Component, post a question in the Kintone Developer Community. For reporting bugs and other issues, post it as a GitHub Issue in the Kintone UI Component repository. Modification, redistribution, and commercial use of the source code is subject to the license agreement.

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!