kintone UI Component v0 已经停止维护，包括安全更新。请替换成今后也会继续开发更新的kintone UI Component v1 。详情请参考关于kintone UI Component v0停止维护的通知。

Index

概要
kintone风格复选框的设置流程
使用kintone UI Component制作复选框
关于kintone UI component专用函数
关于复选框以外的UI（部分）
结束语

概要

2018年5月，“kintone UI Component”在以下GitHub上发布了。
“kintone UI Component”是为kintone工程师开发的程序库，使用它就可以轻松创建kintone风格的UI组件。

GitHub

https://github.com/kintone-labs/kintone-ui-component/tree/v0_dev

文档

https://kintone-labs.github.io/kintone-ui-component

通过使用“kintone UI Component”，可以在JavaScript中编写HTML元素和属性；使用 css时可以轻松创建kintone风格的UI组件，而无需更改颜色，大小等。
本文将目前使用的传统代码编写方法和使用“kintone UI Component”的代码编写方法作比较，同时介绍“kintone UI Component”的使用方法。

如果您想跳过比较，请阅读“使用kintone UI Component制作复选框”。

注意事项

关于代码的更改、再发布以及商业用途，请遵照相应的使用许可协议。

2021年3月5日添加
kintone UI Component v1 发布。有关使用的详细信息，请参阅 kintone UI Component v1。
本文中使用的 v0 版本已进入维护模式。

kintone风格复选框的设置流程

第1步：设置普通的复选框

首先，使用JavaScript制作一个复选框。

(function() {
    'use strict';
    function createCheckElemet(value, checkedflg, disabledflg) {
        var checkElm = document.createElement('div');
        var checkSpan = document.createElement('span');
        var checkInput = document.createElement('input');
        var checkLabel = document.createElement('label');
        checkInput.type = 'checkbox';
        checkInput.checked = checkedflg;
        checkInput.disabled = disabledflg;
        checkLabel.innerText = value;
        checkElm.appendChild(checkSpan);
        checkSpan.appendChild(checkInput);
        checkSpan.appendChild(checkLabel);
        return checkElm;
    }
    kintone.events.on('app.record.detail.show', function(event) {
        var orangediv = createCheckElemet('Orange', true, false);
        var bananadiv = createCheckElemet('Banana', false, false);
        var lemondiv = createCheckElemet('Lemon', false, true);
        kintone.app.record.getSpaceElement('nativeUI').appendChild(orangediv);
        kintone.app.record.getSpaceElement('nativeUI').appendChild(bananadiv);
        kintone.app.record.getSpaceElement('nativeUI').appendChild(lemondiv);
    });
})();

在这个阶段，代码并不难，但设计与kintone不匹配。
下一步，使用CSS更改设计。

0015c3bfa66df50cd9fd6baa2dd924a

第2步：使用modern default css

为了使之前制作的复选框的设计成为kintone风格的UI，需要应用css来更改设计。
kintone风格的CSS在GitHub上名为“51-modern-default.css”，需要下载此文件并将其应用于应用程序，并参考这篇文章以重现JavaScript代码中复选框的DOM结构。

(function() {
    'use strict';
    function createCheckElemet(value, checkedflg, disabledflg, id) {
        var checkElm = document.createElement('div');
        var checkSpan = document.createElement('span');
        var checkInput = document.createElement('input');
        var checkLabel = document.createElement('label');
        checkElm.className = 'kintoneplugin-input-checkbox';
        checkSpan.className = 'kintoneplugin-input-checkbox-item';
        checkInput.type = 'checkbox';
        checkInput.checked = checkedflg;
        checkInput.disabled = disabledflg;
        checkInput.id = id;
        checkLabel.innerText = value;
        checkLabel.htmlFor = id;
        checkElm.appendChild(checkSpan);
        checkSpan.appendChild(checkInput);
        checkSpan.appendChild(checkLabel);
        return checkElm;
    }
    kintone.events.on('app.record.detail.show', function(event) {
        var orangediv = createCheckElemet('Orange', true, false, 'checkbox-0');
        var bananadiv = createCheckElemet('Banana', false, false, 'checkbox-1');
        var lemondiv = createCheckElemet('Lemon', false, true, 'checkbox-2');
        kintone.app.record.getSpaceElement('modern-default-UI').appendChild(orangediv);
        kintone.app.record.getSpaceElement('modern-default-UI').appendChild(bananadiv);
        kintone.app.record.getSpaceElement('modern-default-UI').appendChild(lemondiv);
    });
})();

0015c3bfbe4333b0f6da19908ce84af
虽然我们能创建kintone风格的UI，但需要在代码中声明HTML元素的各个属性，代码就变得复杂冗长了。

第3步：使用jQuery

接下来，为了便于阅读代码，请尝试使用cybozu CDN上提供的jQuery。

jQuery.noConflict();
(function($) {
    'use strict';
    function createCheckElemet(value, checkedflg, disabledflg, id) {
        var $checkElm = $('<div>', {
            'class': 'kintoneplugin-input-checkbox'
        });
        var $checkSpan = $('<span>', {
            'class': 'kintoneplugin-input-checkbox-item'
        });
        var $checkInput = $('<input>', {
            type: 'checkbox',
            checked: checkedflg,
            disabled: disabledflg,
            id: id
        });
        var $checkLabel = $('<label>', {
            For: id,
            text: value
        });
        $checkElm.append($checkSpan);
        $checkSpan.append($checkInput);
        $checkSpan.append($checkLabel);
        return $checkElm;
    }
    kintone.events.on('app.record.detail.show', function(event) {
        var $orangediv = createCheckElemet('Orange', true, false, 'checkbox-0');
        var $bananadiv = createCheckElemet('Banana', false, false, 'checkbox-1');
        var $lemondiv = createCheckElemet('Lemon', false, true, 'checkbox-2');
        $(kintone.app.record.getSpaceElement('jQuery-UI')).append($orangediv);
        $(kintone.app.record.getSpaceElement('jQuery-UI')).append($bananadiv);
        $(kintone.app.record.getSpaceElement('jQuery-UI')).append($lemondiv);
    });
})(jQuery);

比之前更易读了，但仍然需要指定class和具体的HTML元素，这都需要花些时间。

使用kintone UI Component制作复选框

下载kintone UI Component

通过使用此次发布的kintone UI Component，可以比以往更轻松地创建kintone风格的UI组件。
按照以下步骤下载并应用于kintone应用。

打开 https://github.com/kintone-labs/kintone-ui-component/releases
从 v0.~ 目前为止的最新版本（截至2021年3月5日，最新版本为 v0.7.7）的"Assets"中下载 kintone-kintone-ui-component-0.x.tgz。
0.x是版本号。
解压缩下载的tgz文件。
将解压后的文件夹 package > dist 下的 kintone-ui-component.min.js 和 kintone-ui-component.min.css 应用于 kintone 应用。
参考：通过JavaScript或CSS自定义应用

示例代码

(function() {
    'use strict';
    kintone.events.on('app.record.detail.show', function(event) {
        var checkbox = new kintoneUIComponent.CheckBox ({
            items: [
                {
                    label: 'Orange',
                    value: 'Orange',
                    isDisabled: false
                },
                {
                    label: 'Banana',
                    value: 'Banana',
                    isDisabled: false
                },
                {
                    label: 'Lemon',
                    value: 'Lemon',
                    isDisabled: true
                },
            ],
            value: ['Orange']
        });
        kintone.app.record.getSpaceElement('component-UI').appendChild(checkbox.render());
    });
})();

0015c3bfbe4333b0f6da19908ce84af

怎么样？是不是和我们之前使用的方法完全不同？用了这个方法可以轻松创建kintone风格的UI组件，而无需指定HTML元素和属性。
简单的解释代码：
可以通过在第5行的“items”中添加元素，轻松增加复选框的元素数量。
另外，在第22行，可以将“items”里的元素添加到“value”中来改变初始状态。
可以通过kintone UI Component的函数“render()”将创建的元素转为DOM元素。

关于kintone UI component专用函数

在kintone UI component中，除了先前复选框中引入的“render()”之外，还有其他操作组件的专用函数。
以之前创建的复选框为例，我们来介绍一下组件的专用函数。
关于其他的UI请参阅文档。

render()

它是将创建的组件转为DOM元素处理的函数。

console.log(checkbox.render());

0015c3c00d5cfae5da1a59f279d27ea

addItem(item)

增加复选框中的选项数量。

var item = {
    label: 'Grape',
    value: 'Grape',
    isDisabled: false
};
checkbox.addItem(item);

0015c3c031822013f62a4f97e11ce58

getItem(index)、getItems()

获取复选框选项。

console.log(checkbox.getItem(0));
console.log(checkbox.getItems());

0015c3c043427d71405a234519cb05e

removeItem(index)

删除复选框选项。

checkbox.removeItem(0);

0015c3c04b4639736edbd69e62c1544

getValue()、setValue(value)

获取或设置已勾选的选项值。

console.log(checkbox.getValue());
checkbox.setValue(['Banana']);

0015c3c07564bbd0f80fe45e12e2db2

disableItem(value)、enableItem(value)

设置选项的禁用或启用。

checkbox.disableItem('Orange');
checkbox.enableItem('Lemon');

0015c3c259b10b238b66964432b4628

on(eventName, callBack)

callBack是指在组件发生特定事件时触发的函数。
在复选框中，“eventName”是“change”时，在更改复选框选项时触发。
在其他组建中同样也有“on(eventName, callBack)”。
例如，按钮中的“eventName”是“click”时，单击按钮会触发。
因为其他组件也有这个事件，详情请参阅文档。

checkbox.on('change', function(value) {
    console.log(value);
});

0015c3c262d23fbc00d450b59bd2522

show()、hide()

设置组件为显示或隐藏。

checkbox.hide();

0015c3c2746af2aa5b620607968292d

disable()、enable()

设置复选框整体的禁用或启用。

checkbox.disable();

0015c3c27a072579f36ca94bb16c20e

关于复选框以外的UI（部分）

除了本文中介绍的复选框，我们还可以轻松实现复杂的Table以及“51-modern-default.css”未实现的UI。
详细的实现方法请参阅文档。

Table

var table = new kintoneUIComponent.Table({
    rowTemplate: [radioBtn, dropdown],
    header: ['Fruit', 'Color']
});
kintone.app.record.getSpaceElement('component-UI').appendChild(table.render());

0015c3c358c08ce24653ed48857e2b7

Table的callBack函数，在on()上实现了各种事件。

rowAdd

添加行时触发，事件返回对象包含Table的值和按下添加按钮的行号。

rowRemove

删除行时触发，事件返回对象包含Table的值。

cellChange

更改单元格的值时触发。事件返回对象包含Table的值、单元格的值以及更改的单元格的位置。

cellClick

单击单元格时触发。事件返回对象包含Table的值、单元格的值以及单击的单元格的位置。
有关回调函数接收的数据详情，请参阅此文档。
通过使用上述事件，可以实现各种动作。

NotifyPopup

var notifyPopup = new kintoneUIComponent.NotifyPopup({
    text: 'Submitted successfully',
    type: 'success'
});
kintone.app.record.getSpaceElement('component-UI').appendChild(notifyPopup.render());

0015c3c2b97818560d8c954113e26cd

弹出窗口也能轻松实现。

Spinner

var spinner = new kintoneUIComponent.Spinner();
kintone.app.record.getSpaceElement('component-UI').appendChild(spinner.render());
spinner.show();

0015c3c2ccc58e454694937c320a9c2

使用kintone UI Componet也能轻松创建可用于加载画面的Spinner。

IconButton

var insertBtn = new kintoneUIComponent.IconButton({
    type: 'insert',
    color: 'blue', 
    size: 'large'
});
kintone.app.record.getSpaceElement('component-UI').appendChild(insertBtn.render());

0015c3c2dd94ea1777db9e5f16ec456

可以制作“+”、“ - ”、“×”按钮。
由于IconButton的on()函数具有click事件，因此按下按钮时的处理也能轻松实现。

结束语

kintone UI Componet不仅可以轻松创建kintone风格的UI控件，而且还具有与UI动作相bang'ding的事件，因此可以实现各种处理。
请在查阅文档时使用。

上一篇用Kintone Portal Designer来设计门户

下一篇一键完成批量审批

使用“kintone UI Component v0”轻松创建kintone风格的UI组件