kintone UI Component v1

cybozu发表于:2021年03月08日 15:45:28更新于:2022年11月11日 14:33:15

Index

kintone UI Component是什么

kintone UI Component 是类似于 kintone 风格的UI组件的集成库。
可以使用在 kintone 自定义或插件的UI组件开发上。
本文将介绍 kintone UI Component v1 的功能。
在 v1 中,提供了PC版和手机版。
所支持的组件在文档网站 Components 中可供查看。

Github

文档

发行说明

发行说明中介绍了 V1 的发行背景以及版本升级的内容。

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

  • 才望子的技术支持受理 kintone UI Component的规格以及故障方面的咨询。
    关于咨询方法请参考这里

  • 其他 GitHub Issue ,疑问,或需求等也欢迎提出。

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

导入方法

请参考文档网站 Quick Start

 v0 的使用方法请参考 使用“kintone UI Component”轻松创建kintone风格的UI组件
另外如果您正在考虑升级新版本的话,可以参考 v0 和 v1 写法上的区别

特征

PC版和手机版各自对应的 UI 组件

不仅仅是PC版,我们也开发了手机版的 UI 组件。
在这里,我们来对Button 和 MobileCheckbox 来做一些介绍。

Button

(() => {
  "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

(() => {
  "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

高还原度的 kintone 组件

各组件忠实地再现了 kintone 标准组件的 UI 和动作。
在这里,我们截图比较一下 v1 组件和标准组件。

组件kintone UI Component标准组件
DropdownKUCv1_dropdown.pngkintone_dropdown.png
Mobile TextAreaKUCv1_textarea.pngkintone_TextArea.png

通过设置所需的图标显示/隐藏设置,以及设置在空白时显示为输入示例的文本等标准功能也可以实装,非常方便。

在属性中申明

用属性的方式申明并保存组件的值,可以使用 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);

ClassName、ID 的指定

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

无障碍

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

注意事项

  • v1 只提供 JavaScript 版。没有 React 版。

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

更新履历

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

本文更新履历如下:

  • 2022年8月10日
    从v1.4.0起,通过指定kintone UI Component 的版本,并用该版本的Kucs 对象生成 Kuc对象的方式,可以导入多个版本的 kintone UI Component 了。
    详情请参考:Version conflicts issue and solution
    本文中的范例代码也做了相应的修改。

结束语

使用kintone UI Component,可以让费时费力的自定义开发成为一件简单的事情。
「自己来制作 kintone 风格的按钮或下拉框之类的组件会很麻烦吧」,
或是想获得更高效率的开发人士,非常推荐使用本软件。

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

    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。