Index

• 概要

• 代码比较

• 使用方法

• 最后

• 注意事项

概要

本次向大家介绍新发布的库---- kintone-config-helper。

如果您做过插件开发应该深有体会。在做插件设置页面时，需要用REST API从表单中获取字段类型、字段名称、字段代码等。

比如，要在插件的设置页面放置一个下拉框，可以选择应用表单上的日期字段时，需要有以下3种信息。

1. 字段类型：使下拉框中仅显示特定字段类型的字段

2. 字段名称：用于设置选项的标签

3. 字段代码：处理选项的值时要用到

本次要介绍的 kintone-config-helper 是一个可帮您简化1~3相关处理的库。

代码比较

为了便于理解，特意准备了示范用的程序。本次以 Date Input Button Plug-in 为例，对比使用和不使用 kintone-config-helper 的代码区别。
具体看 config.js 的第71行开始的 setDropDownForDate 函数，我们对它进行改造看看。
这个函数的处理是将日期字段的信息设置给下拉框。

不使用 kintone-config-helper 工具的情况

function setDropDownForDate() {
    // Retrieve all fields from the form and extract all Date fields.
    // Create a dropdown menu containing a list of Date fields in the config.
    return kintone.api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'GET',
        {'app': kintone.app.getId()}).then(function(resp) {

        for (var key in resp.properties) {
            if (!resp.properties.hasOwnProperty(key)) {
                continue;
            }
            var prop = resp.properties[key];
            var $option = $('<option>');

            switch (prop.type) {
                // Only pick Date field
                case 'DATE':
                    $option.attr('value', prop.code);
                    $option.text(escapeHtml(prop.label));
                    $('#select_date_field').append($option.clone());
                    break;
                default:
                    break;
            }
        }
        // Set default values
        $('#select_date_field').val(CONF.date);
    }, function(resp) {
        return alert('Failed to retrieve field information of the Kintone App.');
    });
}

先是获取 fields.json ，对返回的应答进行循环处理，从字段类型为'DATE'的对象中取出信息做成下拉框。

熟练的人可能很快就能写出代码，但对于新手来说有点复杂，而且需要更长的时间来理解。

另外，本次使用的API(fields.json)还有一个问题，就是无法获取空白栏字段的信息。

使用 kintone-config-helper 的情况

让我们来做一个日期字段的下拉框，就和上面的例子一样。

function setDropDownForDate() {    
  return KintoneConfigHelper.getFields('DATE').then(function(resp) {    
    var $dateDropDown = $('#select_date_field');    
    for (var i = 0; i < resp.length; i++) {    
      var $option = $('<option></option>');    
      $option.attr('value', resp[i].code);    
      $option.text(resp[i].label);    
      $dateDropDown.append($option);    
    }    
    if (CONF.date) {    
      $dateDropDown.val(CONF.date);    
    }    
  }).catch(function(err) {    
    alert(err);    
  });    
}

使用 kintone-config-helper 的话，您只要在 getFields() 函数的参数里指定要获取的字段类型，
即可获取当前应用里的字段名称、字段代码、字段类型。

使用方法

从GitHub里下载 kintone-config-helper.js。
参考以下目录结构将下载的 kintone-config-helper.js 放在插件的文件夹内。

config_helper_sample_project
  ├── 省略
  └── src
      ├── 省略
      ├── js
      │   ├── config.js
      │   ├── desktop.js
      │   └── kintone-config-helper.js 
      └── manifest.json

manifest.json 里可以设置要加载哪些文件。

别忘了在manifest.json 的 config.js属性里，把“js/kintone-config-helper.js”添加到js/config.js的前面。

 "config": {
    "html": "html/config.html",
    "js": [
      "https://js.cybozu.com/jquery/3.3.1/jquery.min.js",
      "js/kintone-config-helper.js",
      "js/config.js"
    ],

这样，就可以在插件里使用 kintone-config-helper 了。

最后

感想如何？
使用本次的库，可以非常轻松地从应用的表单信息中仅获取插件设置页面所需要的字段信息。
和 kintone UI Compoent 结合一起使用的话，将大大提高插件设置页面的开发效率。

关于限制事项，请参考 GitHub 的 Readme。
https://github.com/kintone-labs/config-helper#limitations

注意事项

根据许可协议，可对代码进行更改、再发布、用于商业目的。

此Tips在2019年2月版的kintone中确认过。