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.
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
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
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
Step 3: Use jQuery
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
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:
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.
Handles a created component as a DOM element.
Adds an option to a checkbox component.
Gets the options from a checkbox component.
Deletes the options from a checkbox component.
Gets or sets the value of a checkbox option.
Disables or enables an option in the checkbox component.
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.
Shows or hides the component.
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.
There are various events available for the Table component:
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.
Triggered when a row is deleted. The event object contains the value of the Table.
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.
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.
Pop-ups are easily implemented with NotifyPopup.
A spinner that is displayed while the page is loading can also be implemented with Spinner.
+, -, 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.
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!
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.