kintone插件开发过程中经常遇到的问题

aki发表于:2019年09月18日 09:54:39更新于:2021年04月21日 14:54:15

Index

 

本篇介绍在kintone的插件开发过程中,容易遇到和无法避免的各种常见问题。

另外,关于基本开发步骤请参考此篇文档

①如已有设置值,要在打开插件设置页面时set设置值

用户好不容易在插件的设置页面设置了各项,再次打开插件设置页面的时候,如果不显示用户设置的内容就太不友好了吧。
(例如:在插件的设置页面选择了【上海】,再次打开插件设置页面的时候回到了默认值的【北京】)

要解决以上问题,只要在插件设置页面对应的JavaScript文件中,添加如下代码就可以解决。

jQuery.noConflict();

(function($, PLUGIN_ID) {    
    "use strict";
    
    $(document).ready(function() {    
        // 设置插件ID    
        var conf = kintone.plugin.app.getConfig(PLUGIN_ID);
        
        //如果已有设置值,在将该值设置给字段    
        if (typeof (conf['elm']) !== 'undefined') {    
            $('#element').val(conf['elm']);    
        }    
    });
    
})(jQuery, kintone.$PLUGIN_ID);

这种情况下,在保存时使用setConfig来保存conf['elm'],如果已保存有值,则表示非初次打开。

因此$('#element')要么是必填项,如果不是必填项在保存时需要给conf['elm']设置默认值。

※需要引入jQuery库。
※上面是文本框等情况,如果是下拉框或复选框,赋值的方法不太一样。

②自动添加要在插件中使用的字段

有部分插件的使用前提是要新建应用,而不是在现有的应用下使用。
这种情况,需要用户根据需要添加字段,所以不太方便。

但只要添加如下代码,就可以在插件中自动添加要使用的字段。

// 在初次设置插件时自动添加必要的字段    
kintone.api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'POST', {    
    "app": kintone.app.getId(),    
    "properties": {    
        "Name": {    
            "code": "Name",    
            "label": "名字",    
            "type": "SINGLE_LINE_TEXT"    
        },    
        "ID": {    
            "code": "ID",    
            "label": "ID",    
            "type": "NUMBER"    
        }    
    }    
}, function(resp) {    
    location.reload();    
});

这个例子中,添加了“名字”这个单行文本框和“ID”这个数值字段。

另外,添加处理结束后立刻加载的目的如下一章节所述的那样,是为了让添加的字段立刻显示到页面上。
如果“只是把字段添加进去,但并不是要在设置页面上使用的话”,那么没有必要加载。

③要在插件中使用的字段代码不是直接让用户输入,而是从下拉框中选择现有字段

这个使用的是如下图的UI。

0015d81c4e7b9a138c0bd35b0008526

直接输入字段代码的话,开发人员要轻松很多。但是用户就要先确认好字段代码后才能输入,对于用户来说麻烦。
使用如下HTML和代码的话就可以实现上图的效果。

HTML

<div>    
    <div class="block">    
        <label class="kintoneplugin-label">    
            <span id ="container_label">活动名称字段</span>    
            <span class="kintoneplugin-require">*</span>    
        </label>    
        <div class="kintoneplugin-row">选择用于显示活动名称的字段</div>    
        <div class="kintoneplugin-select-outer">    
            <div class="kintoneplugin-select">    
                <select id="name_code">    
                </select>    
            </div>    
        </div>    
    </div>    
    <div class="block">    
        <label class="kintoneplugin-label">    
            <span id ="container_label">开始时间字段</span>    
            <span class="kintoneplugin-require">*</span>    
        </label>    
        <div class="kintoneplugin-row">请选择要显示活动开始时间的字段。</div>    
        <div class="kintoneplugin-select-outer">    
            <div class="kintoneplugin-select">    
                <select id="start_datetime_code">    
                </select>    
            </div>    
        </div>    
    </div>    
    <div class="block">    
        <label class="kintoneplugin-label">    
            <span id ="container_label">结束时间字段</span>    
            <span class="kintoneplugin-require">*</span>    
        </label>    
        <div class="kintoneplugin-row">选择要显示活动结束时间的字段。</div>    
        <div class="kintoneplugin-select-outer">    
            <div class="kintoneplugin-select">    
                <select id="end_datetime_code">    
                </select>    
            </div>    
        </div>    
    </div>    
</div>

插件设置页面的JavaScript

// 获取应用表单信息    
kintone.api(kintone.api.url('/k/v1/app/form/fields', true), 'GET', {
    app: kintone.app.getId()
}, function(resp) {
    for (var key in resp.properties) {
        if (!resp.properties.hasOwnProperty(key)) {continue;}
        var confFlg = false;
        var prop = resp.properties[key];
        var label = prop.label;
        var code = prop.code;
        if (prop.type === 'SINGLE_LINE_TEXT') {
            if (typeof (conf['name']) !== 'undefined' && code === conf['name']) {
                confFlg = true;
            }
            if (confFlg) {
                $('#name_code').prepend('' + label + '');
            } else {
                $('#name_code').append('' + label + '');
            }
        } else if (prop.type === 'DATETIME') {
            if (typeof (conf['name']) !== 'undefined' && code === conf['start_datetime']) {
                $('#start_datetime_code').prepend('' +
                    label + '');
                $('#end_datetime_code').append('' + label + '');
            } else if (typeof (conf['name']) !== 'undefined' && code === conf['end_datetime']) {
                $('#start_datetime_code').append('' + label + '');
                $('#end_datetime_code').prepend('' +
                    label + '');
            } else {
                $('#start_datetime_code').append('' + label + '');
                $('#end_datetime_code').append('' + label + '');
            }
        }
    }
});

看上去有点复杂,其实要做的处理大致如下。

1.获取表单信息。
2.按照字段数量循环判断。
3.仅将要显示在下拉框里的字段类型(上面例子中,是单行文本框和时间)添加到下拉框。
4.如果已有值(以前设置后保存过=conf有值)时,选中的值显示在最上方。

另外,插件设置页面上想要显示“字段名称”,因此option标签的文本插入字段名称,name属性插入字段代码。
这是为了之后的自定义中使用该字段代码。

在保存插件设置时,使用setConfig函数保存在下拉框中选择的选项的name属性。在之后的自定义中就可以使用该属性中的字段代码了。

※需要“51-modern-default.css”。

总结

 使用kintone-config-helperkintone-ui-component的话,上面的处理将更加简单。

  • 获取应用表单信息的库kintone-config-helper
    可筛选出所指定的字段类型的字段,并获取字段信息。

  • 可生成和kintone风格一致的UI的库kintone-ui-component
    在JavaScript内不需要写HTML的元素和属性就可以实现跟kintone一样风格的UI。

④自动添加要在插件中使用的自定义列表

您是否碰过要在插件中使用自定义列表的情况呢?
反正我是经常碰到这种情况。

如果能像下面那样自动准备自定义列表的话,用户用起来自然更加省心了。
关于自动添加自定义列表的方法请参考“使用插件的设置作成自定义列表的方法”。

kintone.api(kintone.api.url('/k/v1/preview/app/views', true), 'GET', {
    'app': kintone.app.getId()
}).then(function(appResp) {
    var req = $.extend(true, {}, appResp);
    req.app = kintone.app.getId();

    // 创建的列表是否存在
    var existFlg = false;
    for (var k in req.views) {
        if (req.views[k].id === conf['viewId']) {
            existFlg = true;
            break;
        }
    }

    // 如果不存在就新增
    if (!existFlg) {

        // 在最上方的列表(默认列表)上创建列表
        for (var key in req.views) {
            if (req.views.hasOwnProperty(key)) {
                req.views[key].index = Number(req.views[key].index) + 1;
            }
        }

        req.views["VIEW_NAME"] = {
            "type": "CUSTOM",
            "name": "VIEW_NAME",
            "html": '',
            "filterCond": "",
            "pager": true,
            "index": 0
        };

        kintone.api(kintone.api.url('/k/v1/preview/app/views', true), 'PUT', req).then(function(putResp) {
            // 保存创建的列表ID
            var viewId = putResp.views["VIEW_NAME"].id;
            config['viewId'] = viewId;
            kintone.plugin.app.setConfig(config);
        });

    } else {
        kintone.plugin.app.setConfig(config);
    }

});

最后

看完上面介绍的插件开发上的各种常见情况后,感想如何?
这些基本上都是在开发插件的时会遇到的问题。

如能帮助大家开发出更加出众的kintone插件,我倍感荣幸。

此Tips在2016年10月版的 kintone中确认过。