使用插件的设置作成自定义列表的方法

cybozu发表于:2017年01月25日 15:14:55更新于:2022年04月26日 14:10:26

7月的更新,添加了可获取、设置kintone的列表视图的API。
使用这个API的话,可以复制其他域名或应用的列表视图,批量设置多个列表视图。这次将向大家介绍如何使用这个功能,在插件的设置画面作成自定义视图的方法。

用做什么?

经常会有想要显示插件的原始页面或者图表的情况。kintone里有称为自定义(自定义视图)的功能,可以使用JavaScript自由的自定义列表的视图或者动作。下面是一些参考的Tips。

自定义列表是设想在JavaScript自定义上的功能,再次之前没有对应过插件。使用获取、设置列表视图的API的话,就可以制作对应自定义列表的kintone插件了。
据此,大家就可以开发和部署各种样子的插件了。

以下对操作方法进行了说明。

作成插件的雏形

根据kintone 插件开发流程,作成manifest文件。

设置页面的编码

在这里作成只有单个保存按钮的设置页面。保存按钮的点击事件里,获取既存的列表信息,加上自定义列表的设置信息后保存。

jQuery.noConflict();
(function($) {
    "use strict";
    var $submit = $('#plugin-submit');
    var VIEW_NAME = '自定义列表范例';
    // 保存按钮的点击事件
    $submit.click(function(e) {
        kintone.api(kintone.api.url('/k/v1/preview/app/views', true), 'GET', {'app': kintone.app.getId()}).then(function(resp) {
            var req = $.extend(true, {}, resp);
            req.app = kintone.app.getId();
            // 如果不存在自定义列表,添加
            if (!req.views[VIEW_NAME]) {
                // 作为开头
                for (var key in req.views) {
                    req.views[key].index = Number(req.views[key].index) + 1;
                }
                req.views[VIEW_NAME] = {
                    "type": "CUSTOM",
                    "name": VIEW_NAME,
                    "html": "<div id='custom-view-container'></div>",
                    "filterCond": "",
                    "sort": "记录编号 asc",
                    "pager": false,
                    "index": 0
                };
            }
            kintone.api(kintone.api.url('/k/v1/preview/app/views', true), 'PUT', req).then(function(resp) {
                // 保存作成的列表ID
                var viewId = resp.views[VIEW_NAME].id;
                kintone.plugin.app.setConfig({viewId: viewId});
            });
        });
    });
})(jQuery);

列表页面的编码

判断是否为插件的设置页面保存的列表ID,然后生成自定义列表。

jQuery.noConflict();
(function($, PLUGIN_ID) {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        var config = kintone.plugin.app.getConfig(PLUGIN_ID);
        if (!config) return false;
        // 校验是否是插件作成的自定义列表
        if (event.viewId != config.viewId) {
          return;
        }
        // 设置数据到自定义列表里
        var $container = $('#custom-view-container');
        // 获取记录(由于分页显示:false,所以需要自己来获取)
        var query = kintone.app.getQuery();
        kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
            'app': kintone.app.getId(),
            query: query
        }).then(function(resp) {
            for (var i = 0; i < resp.records.length; i++) {
                var record = resp.records[i];
                $container.append($('<div></div>').text(record['单行文本框'].value));
            }
        });
    });
})(jQuery, kintone.$PLUGIN_ID);

动作的确认

点击插件的设置页面上的保存按钮,作成自定义列表。

001589ac8ce7cf76e425d93a0df0392

如图所示,点击保存按钮后,自定义列表已经作成了。

001589acb6decfcd87d20640d6bdf35

打开列表页面,就会看到使用插件生成的自定义列表了。

打包后的文件:customview_plugin.zip()

看了这个教程,忽然想再作成一些诸如使用了自定义列表的甘特图插件或者黑白棋插件!

该Tips在2015年7月版中进行过确认。


附件:customview_plugin.zip • 10.48KB • 下载