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。
直接输入字段代码的话，开发人员要轻松很多。但是用户就要先确认好字段代码后才能输入，对于用户来说麻烦。
使用如下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-helper或kintone-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中确认过。