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.
GitHub: https://github.com/kintone/kintone-ui-component
Documentation: https://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.
At this point, the design of the checkbox component does not quite match the rest of the Kintone UI.
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.
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
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.
addItem(item)
Adds an option to a checkbox component.
getItem(index), getItems()
Gets the options from a checkbox component.
removeItem(index)
Deletes the options from a checkbox component.
getValue(), setValue(value)
Gets or sets the value of a checkbox option.
disableItem(value), enableItem(value)
Disables or enables an option in the checkbox component.
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.
show(), hide()
Shows or hides the component.
disable(), enable()
Disables or enables the entire checkbox component.
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
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
Pop-ups are easily implemented with NotifyPopup.
Spinner
A spinner that is displayed while the page is loading can also be implemented with Spinner.
IconButton
+, -, 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.