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.按如下图的目录结构保存做成的各文件。
※文件名和文件夹阶层可以自由创建。
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目录下。
步骤3.打包
使用plugin-packer进行打包。
关于plugin-packer的安装方法和工具的详情，请参考用plugin-packer打包插件文件
如未下载plugin-packer，请执行以下命令。
$ npm install -g @kintone/plugin-packer
移到check_plugin目录的上一级目录，比如这里的上一级目录为work
$ cd work
执行以下命令，会自动打包。成功时显示以下信息。
$ kintone-plugin-packer eventCalendar_plugin Succeeded: DIRECTORY_PATH/work/plugin.zip
将在eventCalendar_plugin目录下生成插件文件 (plugin.zip) 和密钥文件 (ppk文件) 。
密钥文件名的“faedncapleldabbecigenhagfdiaagnn”为插件ID。该值是由插件随机生成的唯一值。
步骤4.导入和动作确认
将生成的 "plugin.zip" 导入到步骤0中创建的应用中。
将插件文件导入到kintone。
打开“业务云系统管理”下的“插件”点击 “导入”。
选择刚才做成的 “plugin.zip”，点击“导入”按钮 。
这样就把插件导入到kintone了。将其应用到之前的 “客户列表” 应用里。
在“客户列表”应用中，点击“应用的设置”，然后点击“插件”。点击“添加插件”。
勾选要添加的插件，然后点击“添加”。
这样，插件就添加到应用了。在设置页面里设置插件。
点击齿轮，将显示输入值校验插件的设置页面。设置于需要检查输入值的字段。
设置完成后，点击“保存”按钮，设置就完成了。来确认以下应用的运行情况吧。
列表显示成日历形式，而且各记录可以根据您在插件中的设置显示相应颜色了吧。
范例
这次作成的“kintone 活动日历的插件”插件有在下面的链接里公开。
最后
以上，以“kintone 活动日历的插件”为例，介绍了如何做成插件。
本次插件的要点总结如下。
后台设置页面上
・使用jsrender根据用户设置的语言切换显示中文或日文。
・在此页面中设置的内容保存到插件的设置信息里，以后再次打开设置页面时需要获取设置信息，并显示到页面上。前台自定义文件
- （本次是PC专用JavaScript文件）中获取插件的设置信息
- 用FullCalendar并将其显示成日历形式
您不妨试着参考本文章把其他的自定义范例做成插件看看。