kintone UI Component v1

cybozu发表于:2021年03月08日 15:45:28更新于:2024年01月31日 17:17:30

Index

kintone UI Component是什么

kintone UI Component 是类似于 kintone 风格的UI组件的集成库。
可以使用在 kintone 自定义或插件的UI组件开发上。

另外,kintone UI Component v0 已不再维护,包括安全升级。
建议使用了kintone UI Component v0 换成 kintone UI Component v1。
改写时您可以参考 v0 和 v1 写法上的区别

Github

许可证

文档

kintone UI Component(v1以后)的支持方针

欢迎在GitHub Issue 里提问或提出您的需求。

在版权说明的允许的范围内,您可以进行改写代码,再次发行等商业活动。
版权说明的种类在客户端的库页面或 GitHub 的仓库页面里找到。
但是,因更改源代码而发生的故障不在支持范围内。

导入方法

请参考文档网站 Quick Start

kintone UI Component 特征

特征 1 :PC 版和手机版各自对应的 UI 组件

不仅仅是PC版,我们也开发了手机版的 UI 组件。
关于具体可支持哪些组件,请查看文档Components

在这里,我们来对Button 和 MobileCheckbox 来做一些介绍。

Button

下面的代码是在记录列表页面的菜单右侧的元素中,插入 kintone UI Component 的按钮。

(() => {
  "use strict";
  // 记录详情页面
  kintone.events.on("app.record.index.show", function (event) {
    const header = kintone.app.getHeaderMenuSpaceElement();
    
    //指定加载的kintone UI Component版本
    const Kuc = Kucs['1.4.0'];
    const button = new Kuc.Button({
      text: "sample",
      type: "submit",
      className: "options-class",
      id: "options-id",
      visible: true,
      disabled: false
    });
    header.appendChild(button);
    
    button.addEventListener("click", function (event) {
      console.log(event);
    });
    return event;
  });
})();


0016047362b4ef52ac03863edece64c

MobileCheckbox

下面的代码是在手机版的记录详情页面,插入 kintone UI Component 的复选框。

(() => {
  "use strict";
  kintone.events.on("mobile.app.record.detail.show", function (event) {
    const space = kintone.mobile.app.record.getSpaceElement("mobileSpace");
    
    //指定加载的kintone UI Component版本
    const Kuc = kucs['1.4.0'];
    const checkbox = new Kuc.MobileCheckbox({
      label: "Fruit",
      requiredIcon: true,
      items: [
        {
          label: "orange",
          value: "Orange"
        },
        {
          label: "apple",
          value: "Apple"
        },
      ],
      value: ["Orange"],
      itemLayout: "horizontal",
      className: "options-class",
      id: "options-id",
      visible: true,
      disabled: false,
      borderVisible: true
    });
    space.appendChild(checkbox);
    checkbox.addEventListener("change", function (event) {
      console.log(event);
    });
    return event;
  });
})();


0016047362a4b7339ba21f48d93360e

特征2 : 高还原度的 kintone 组件

各组件忠实地再现了 kintone 标准组件的 UI 和动作。
通过设置所需的图标显示/隐藏设置,以及设置在空白时显示为输入示例的文本等标准功能也可以实装,非常方便。

组件kintone UI Component标准组件
Dropdown001641aa79bd2cf8061bac034ace6d7001641aa79bd550439a947bf0b0a3bd
Mobile TextArea001641aa79bd147b373aa43d922513c001641aa79bd3635fd25f2983267e35

特征3 : 在属性中申明

用属性的方式申明并保存组件的值,可以使用 JavaScript 标准函数来编写代码。
由于和 JavaScript 的写法类似,使得开发新手和习惯开发的人都可以非常方便的使用。

代码范例

const kintoneHeaderSpace = kintone.app.getHeaderMenuSpaceElement();

//指定加载的kintone UI Component版本
const Kuc = Kucs['1.4.0'];
const button = new Kuc.Button({
  text: "sample"
});
button.text = "update";
kintoneHeaderSpace.appendChild(button);

特征4 : ClassName、ID 的指定

各组件的 ClassName 和 ID 都可以分别指定。
通过对各个件分别设置 CSS,以达到微调效果。

无障碍

我们对应了键盘操作,语音等无障碍访问功能。
由于各 OS 的设置方法不尽相同,您可以根据所使用的 OS 进行确认。

浏览器的支持情况

各个浏览器的兼容性请参考浏览器对应状况

更新履历

有关功能更新历史记录和最新信息(包括将来添加兼容组件),请参阅以下开发页面。

本文更新履历如下:

  • 2022年8月10日
    从v1.4.0起,可同时使用多个版本的 kintone UI Component 。
    通过指定kintone UI Component 的版本,并用该版本的Kucs 对象生成 Kuc对象的方式,可以导入多个版本的 kintone UI Component 了。

    本文中的范例代码也做了相应的修改。

此Tips在2022年7月版的 kintone 和 kintone UI Component v1.4.0 中确认过。