kintone活动日历插件的作成范例【后篇】

aki发表于:2020年05月26日 14:52:06更新于:2020年09月09日 14:10:54

kintone活动日历插件的作成范例【前篇】的后续。

后台设置页面的JavaScript文件

创建设置页面的JavaScript文件。
在插件设置页面中,执行以下处理。

  • 准备中文和日文两个语言的页面文字,并根据用户设置的语言显示相应的语言文字。

  • 如果已经设置过,再次打开页面时获取设置值并显示。

  • 从应用的表单里获取字段信息,加入设置页面的下拉列表中。

  • 点击 “保存” 按钮时:
    - 如有空字段,会显示警告。
    - 将该画面中输入的信息保存到插件设置信 息中。
    - 检查是否存在用于显示日历的列表。第一次设置插件时会自动生成列表。

  • 点击 “取消” 按钮时,返回上一个页面。

重点

  • 使用jsrender根据用户设置的语言切换显示中文或日文。

  • 使用kintone.plugin.app.getConfig()获取插件的设置信息。

  • 使用kintone.plugin.app.setConfig()将设置页面上设置的信息保存到插件设置信息中。

  • 此插件使用了JQuery函数。

  • 为了避免和其他的插件或者其他的JavaScript自定义相冲突,我们建议写上 jQuery.noConfilict(); 

/*
 * eventCalendar Plug-in
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 */
jQuery.noConflict();
(function($, PLUGIN_ID) {
    'use strict';

    // 设置插件ID
    var conf = kintone.plugin.app.getConfig(PLUGIN_ID);

    $(document).ready(function() {
        var terms = {
            'ja': {
                'event_title': 'イベント名フィールド',
                'event_title_description': 'イベント名として使用する文字列フィールドのフィールド名を選択して下さい。',
                'start_dateTime':'開始日時フィールド',
                'start_dateTime_description': 'イベント開始日時として使用する日時フィールドのフィールド名を選択して下さい。',
                'end_dateTime':'終了日時フィールド',
                'terms.end_dateTime_description':'イベント終了日時として使用する日時フィールドのフィールド名を選択して下さい。',
                'background': 'ステータス(任意)',
                'background_description':'プロセス管理のステータスと対応する背景色を指定可能です。\n'
                + '
 ※背景色は英語、16進数、RGBのいずれも可。 赤:red, #ff0000, rgb(255,0,0) 緑:green, #008000, rgb(0,128,0)',
                'background_status':'ステータス',
                'background_color': '背景色',
                'save_button':'保存する',
                'cancel_button': 'キャンセル'
            },
            'zh': {
                'event_title': '活动标题',
                'event_title_description': '请选择要作为活动标题的字段。',
                'start_dateTime':'开始时间',
                'start_dateTime_description': '请选择要作为活动开始时间的字段。',
                'end_dateTime':'结束时间',
                'terms.end_dateTime_description':'请选择要作为活动结束时间的字段。',
                'background': '状态(任意)',
                'background_description':'可对流程管理的各状态设置背景色。\n'
                + '※背景色可用英语、16进制、RGB的任意一种方式来指定。红:red, #ff0000, rgb(255,0,0) 绿:green, #008000, rgb(0,128,0)',
                'background_status':'状态',
                'background_color': '背景色',
                'save_button':'保存',
                'cancel_button': '取消'
            }
        };

        //根据登录用户设置的语言来切换显示相应语言
        var lang = kintone.getLoginUser().language;
        var i18n = (lang in terms) ? terms[lang] : terms['ja'];
        var configHtml = $('#EventCalendarPlugin').html();
        var tmpl = $.templates(configHtml);
        $('div#EventCalendarPlugin').html(tmpl.render({'terms':i18n}));

        // 如已经设置过插件则将设置值赋给字段
        if (typeof (conf['name']) !== 'undefined') {
            $('#status1').val(conf['status1']);
            $('#color1').val(conf['color1']);
            $('#status2').val(conf['status2']);
            $('#color2').val(conf['color2']);
            $('#status3').val(conf['status3']);
            $('#color3').val(conf['color3']);
            $('#status4').val(conf['status4']);
            $('#color4').val(conf['color4']);
            $('#status5').val(conf['status5']);
            $('#color5').val(conf['color5']);
        }
        // 获取应用的表单信息
        kintone.api('/k/v1/preview/app/form/fields', 'GET', {
            app: kintone.app.getId()
        }, function(resp) {
            var singleLineText = [];
            var sDatetime = [];
            var eDatetime = [];
            var count = 0;

            for (var key in resp.properties) {
                if (!Object.prototype.hasOwnProperty.call(resp.properties, key)) {continue;}
                var confFlg = false;
                if (resp.properties[key].type === 'SINGLE_LINE_TEXT') {
                    singleLineText[count] = {
                        'label': resp.properties[key].label,
                        'key': resp.properties[key].code,
                        'index': String(count)
                    };
                    if (typeof (conf['name']) !== 'undefined' && resp.properties[key].code === conf['name']) {
                        confFlg = true;
                    }
                    if (confFlg) {
                        $('#name_code').prepend('<option name=' + count + ' selected>' + singleLineText[count].label + '</option>');    
                      } else {    
                        $('#name_code').append('<option name=' + count + '>' + singleLineText[count].label + '</option>');    
                    }    
                } else if (resp.properties[key].type === 'DATETIME') {
                    sDatetime[count] = {
                      'label': resp.properties[key].label,    
                      'key': resp.properties[key].code,    
                      'index': String(count)    
                    };
                    eDatetime[count] = {
                      'label': resp.properties[key].label,    
                      'key': resp.properties[key].code,    
                      'index': String(count)    
                    };    
                    if (typeof (conf['name']) !== 'undefined' && resp.properties[key].code === conf['start_datetime']) {    
                      $('#start_datetime_code').prepend('<option name=' + count + ' selected>' + sDatetime[count].label + '</option>');    
                      $('#end_datetime_code').append('<option name=' + count + '>' + eDatetime[count].label + '</option>');    
                    } else if (typeof (conf['name']) !== 'undefined' && resp.properties[key].code === conf['end_datetime']) {    
                      $('#start_datetime_code').append('<option name=' + count + '>' + sDatetime[count].label + '</option>');    
                      $('#end_datetime_code').prepend('<option name=' + count + ' selected>' + eDatetime[count].label + '</option>');    
                    } else {    
                      $('#start_datetime_code').append('<option name=' + count + '>' + sDatetime[count].label + '</option>');    
                      $('#end_datetime_code').append('<option name=' + count + '>' + eDatetime[count].label + '</option>');    
                    }    
                }    
                count++;    
            }
            // 点击[保存]按钮时设置输入信息
            $('#submit').click(function() {
                var config = [];
                var name;
                var start_datetime;
                var end_datetime;
                singleLineText.filter(function(item) {
                    if (item.label === $('#name_code :selected').text() &&
                        item.index === $('#name_code :selected').attr('name')) {
                        name = item.key;
                        return true;
                    }
                });
                sDatetime.filter(function(item) {
                    if (item.label === $('#start_datetime_code :selected').text() &&
                        item.index === $('#start_datetime_code :selected').attr('name')) {
                        start_datetime = item.key;
                        return true;
                    }
                });
                eDatetime.filter(function(item) {
                    if (item.label === $('#end_datetime_code :selected').text() &&
                        item.index === $('#end_datetime_code :selected').attr('name')) {
                        end_datetime = item.key;
                        return true;
                    }
                });
                var status1 = $('#status1').val();
                var color1 = $('#color1').val();
                var status2 = $('#status2').val();
                var color2 = $('#color2').val();
                var status3 = $('#status3').val();
                var color3 = $('#color3').val();
                var status4 = $('#status4').val();
                var color4 = $('#color4').val();
                var status5 = $('#status5').val();
                var color5 = $('#color5').val();

                if (name === '' || start_datetime === '' || end_datetime === '') {
                    alert('入力されていない必須項目があります。');
                    return;
                }
                config['name'] = name;
                config['start_datetime'] = start_datetime;
                config['end_datetime'] = end_datetime;
                config['status1'] = status1;
                config['color1'] = color1;
                config['status2'] = status2;
                config['color2'] = color2;
                config['status3'] = status3;
                config['color3'] = color3;
                config['status4'] = status4;
                config['color4'] = color4;
                config['status5'] = status5;
                config['color5'] = color5;

                // 添加自定义列表
                var VIEW_NAME = 'スケジュール';
                kintone.api(kintone.api.url('/k/v1/preview/app/views', true), 'GET', {
                    'app': kintone.app.getId()
                }).then(function(scheResp) {
                    var req = $.extend(true, {}, scheResp);
                    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 prop in req.views) {
                            if (Object.prototype.hasOwnProperty.call(req.views, prop)) {
                                req.views[prop].index = Number(req.views[prop].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 {
                        config['viewId'] = conf['viewId'];
                        kintone.plugin.app.setConfig(config);
                    }

                });
            });

            // 点击[取消]按钮时的处理
            $('#cancel').click(function() {
                history.back();
            });


        });
    });

})(jQuery, kintone.$PLUGIN_ID);

将作成的文件命名为“config.js”,文字编码设为UTF-8,保存。

后台设置页面的CSS文件

创建设置页面的CSS文件。
主要对设置状态颜色的表格的标题和边框进行修饰。
另外,按钮和标签的装饰使用的是“51-modern-default.css”里的类。详细可以参考样式表的使用

.block {
    padding: 0 0 20px 0;
}
th {
    text-align: center;
}
table {
    border-collapse: separate;    border-spacing: 5px;
}

将作成的文件命名为“config.css”,文字编码设为UTF-8,保存。

步骤2.创建资源配置清单文件

创建资源配置清单文件。

1.按如下图的目录结构保存做成的各文件。
※文件名和文件夹阶层可以自由创建。
0015eccb56a28a2caea02ae09040410

  • 51-modern-default.css的获取方法
      ・访问Github,点击“Clone or download”下载zip文件。
         解压zip文件后,使用stylesheet文件夹下的“51-modern-default.css”。

2.创建资源配置清单文件。

  • 请根据步骤1中的目录结构,在资源配置文件清单中填写各文件的目录。

  • 此插件使用了jQuery,因此请加载jQuery文件。
    本次使用的是Cybozu CDN,在资源配置清单文件的后面加上URL。

    {
        "manifest_version": 1,
        "version": 1,
        "type": "APP",
        "name": {
            "ja": "kintone イベントカレンダープラグイン",
            "en": "kintone Event Calendar plug-in",
            "zh": "kintone 活动日历插件"
        },
        "description": {
            "ja": "kintoneとFullCalendarを連携するプラグインです。",
            "en": "This plugin cooperate with FullCalendar",
            "zh": "这个插件整合了kintone和FullCalendar"
        },
        "icon": "image/icon.png",
        "desktop": {
            "js": [
                "https://js.cybozu.com/jquery/2.2.4/jquery.min.js",
                "https://js.cybozu.com/momentjs/2.13.0/moment-with-locales.min.js",
                "https://js.cybozu.com/fullcalendar/v2.7.3/fullcalendar.min.js",
                "js/customize.js"
            ],
            "css": [
                "https://js.cybozu.com/fullcalendar/v2.7.3/fullcalendar.min.css",
                "css/customize.css"
            ]
        },
        "config": {
            "html": "html/config.html",
            "js": [
                "https://js.cybozu.com/jquery/1.11.1/jquery.min.js",
                "https://js.cybozu.com/jsrender/1.0.5/jsrender.min.js",
                "js/config.js"
            ],
            "css": [
                "css/config.css",
                "css/51-modern-default.css"
            ],
            "required_params": ["name", "start_datetime", "end_datetime"]
        }
    }

3.做成的文件命名为“manifest.json”,文字编码设为UTF-8,保存。
本次保存在eventCalendar_plugin目录下。
0015eccb534f202a225259afcc457fe

步骤3.打包

使用plugin-packer进行打包。

关于plugin-packer的安装方法和工具的详情,请参考用plugin-packer打包插件文件

  1. 如未下载plugin-packer,请执行以下命令。

    $ npm install -g @kintone/plugin-packer
  2. 移到check_plugin目录的上一级目录,比如这里的上一级目录为work

    $ cd work
  3. 执行以下命令,会自动打包。成功时显示以下信息。

    $ kintone-plugin-packer eventCalendar_plugin    
    Succeeded: DIRECTORY_PATH/work/plugin.zip
  4. 将在eventCalendar_plugin目录下生成插件文件 (plugin.zip) 和密钥文件 (ppk文件) 。
    密钥文件名的“faedncapleldabbecigenhagfdiaagnn”为插件ID。该值是由插件随机生成的唯一值。

步骤4.导入和动作确认

 将生成的 "plugin.zip" 导入到步骤0中创建的应用中。

  1. 将插件文件导入到kintone。
    打开“业务云系统管理”下的“插件”

  2. 点击 “导入”。

    00158414128bb8d3de5c1272df8cfb2

  3. 选择刚才做成的 “plugin.zip”,点击“导入”按钮 。
    这样就把插件导入到kintone了。

    00158414b55a3c051ea0c8d12dccdb9

  4. 将其应用到之前的 “客户列表” 应用里。
    在“客户列表”应用中,点击“应用的设置”,然后点击“插件”。

  5. 点击“添加插件”。
    0015d9aa424b78cacc0f2dc9310615d

  6. 勾选要添加的插件,然后点击“添加”。
    这样,插件就添加到应用了。
    0015eccb7e4767e461891ce1ca929b4

  7. 在设置页面里设置插件。
    点击齿轮,将显示输入值校验插件的设置页面。
    0015eccb7ec94cb00ed23736768ecd1

  8. 设置于需要检查输入值的字段。
    设置完成后,点击“保存”按钮,设置就完成了。
    0015eccb7eb963ea7f5ba457294d2ba

  9. 来确认以下应用的运行情况吧。
    列表显示成日历形式,而且各记录可以根据您在插件中的设置显示相应颜色了吧。
    0015eccb81e6ae79e72849c3592898e

范例

这次作成的“kintone 活动日历的插件”插件有在下面的链接里公开。

kintone 活动日历的插件

最后

以上,以“kintone 活动日历的插件”为例,介绍了如何做成插件。
本次插件的要点总结如下。

  • 后台设置页面上
    ・使用jsrender根据用户设置的语言切换显示中文或日文。
    ・在此页面中设置的内容保存到插件的设置信息里,以后再次打开设置页面时需要获取设置信息,并显示到页面上。

  • 前台自定义文件
    - (本次是PC专用JavaScript文件)中获取插件的设置信息
    - 用FullCalendar并将其显示成日历形式

您不妨试着参考本文章把其他的自定义范例做成插件看看。

    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。
    您需要登录后才可以回复