A commentary on the difference between v0 and v1
Overview
Kintone UI Component v1 has been reviewed to make it easier for developers to create Kintone style components.
This section explains the differences between the code written in v0 and v1, as well as the key advantages when using v1 for customizing the Kintone app.
Completed image
For example, you can use the Kintone UI Component to create a search button on the Record List page.
Here is the image for example:
JavaScript and CSS Customization
Let's start by looking at the code.
The Kintone UI Component UMD file is used here.
You can see how to upload a file in the Quick Start.
When v0 is used
// Process to prevent component duplication bug
if (document.getElementById('my_index_text') !== null) {
return event;
}
const header = kintone.app.getHeaderMenuSpaceElement();
// Show search box
const text = new kintoneUIComponent.Text({
placeholder: 'Enter keywords'
});
const button = new kintoneUIComponent.Button({
type: 'submit',
text: 'Search'
});
// Use text and a button side by side
text.element.style.float = 'left';
button.element.style.float = 'right';
header.appendChild(text.render());
header.appendChild(button.render());
// Specified id for component duplication bug prevention
text.element.id = 'my_index_text';
When v1 is used
// Process to prevent component duplication bug
if (document.getElementById('kuc_text') !== null) {
return event;
}
const header = kintone.app.getHeaderMenuSpaceElement();
// Show search box
const text = new Kuc.Text({
placeholder: 'Enter keywords',
id: 'kuc_text'
});
const button = new Kuc.Button({
type: 'submit',
text: 'Search',
id: 'kuc_button'
});
header.appendChild(text);
header.appendChild(button);
The difference between v0 and v1
So what has changed between v0 and v1 in terms of coding?
The main difference is as follows:
- Naming space is simplified
- render() method is no longer required
- Property can now be used to update values
- Improved DOM positioning
- Restructured the component property
- Included additional properties for Alert and Label
- Auto-completion of Item.label
The following section will explain in further detail.
Naming Space is simplified
In v1, you can call the instance from new kintoneUIComponent to new Kuc in order to write a concise code.
- v0 Code
const text = new kintoneUIComponent.Text({
placeholder: 'Enter keywords'
});
- v1 Code
const text = new Kuc.Text({
placeholder: 'Enter keywords'
});
In addition, there is no risk that one of them will be overwritten when both v0 and v1 UMD are loaded in the same app.
render() method is no longer required
In v0, the element of the component must be returned by using the render() method along with appendChild() for internal implementation reasons.
In v1, render() is no longer required, and the components can be displayed easier.
- v0 Code
header.appendChild(text.render());
- v1 Code
header.appendChild(text);
Property can now be used to update values
In v0, when a value is updated, a method must be called separately.
In v1, you can use properties to update values.
- v0 Code
const button = new kintoneUIComponent.Button({
type: 'submit',
text: 'Search'
});
// Update the value by calling the method
button.setText('Register');
- v1 Code
const button = new Kuc.Button({
type: 'submit',
text: 'Search',
id: 'kuc_button'
});
// Property can be used to update values
button.text = 'Register';