プラグイン作家になるためメモも最後となりました。(長かった)
その9では、これまで仮で作成してきた設定画面を、アプリのフィールド情報から自動生成します。
まずは設定画面のソースを貼り付けておきます。
設定画面用HTML
config.html
<html>
<body>
<h1>ゼロ埋めプラグイン設定画面</h1>
<div id="form">
<div class="zero-fill-plugin_div">
<input type="checkbox" name="name" value="value" class="checkbox">
<label class="label" for="text">label</label>
</div>
</div>
<div class="button">
<button type="button" id="button_submit">保存</button>
<button type="button" id="button_cancel">キャンセル</button>
</div>
</body>
</html>
設定画面用JavaScript
config.js
jQuery.noConflict();
(function ($, pluginId) {
"use strict";
$(document).ready(function() {
function escapeHtml(htmlstr) {
return htmlstr
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/'/g, '"')
.replace(/'/g, ''');
}
// 設定を取得する
let conf = kintone.plugin.app.getConfig(pluginId);
let confValue = [];
if (Object.keys(conf).length !== 0) {
confValue = [
JSON.parse(conf.ZeroFillItem),
];
}
console.log(confValue);
let param = {'app': kintone.app.getId()};
let url = kintone.api.url('/k/v1/preview/app/form/fields', true);
// アプリのフォームフィールド情報を取得
kintone.api(url, 'GET', param, function(resp) {
console.log(resp);
let cloneElemCnt = 0;
// 1つ目のdiv要素のクローンを変数にセット
let $cloneElem = $('.zero-fill-plugin_div').clone();
console.log($cloneElem);
// フィールド要素ごとループ
for (let key in resp.properties) {
console.log(key);
// keyが存在しない場合は次へ
if (!resp.properties.hasOwnProperty(key)) { continue; }
// フィールド要素1つ取り出し
let prop = resp.properties[key];
// フィールドタイプごとに処理を分ける
switch (prop.type) {
case 'SUBTABLE':
case 'STATUS':
case 'STATUS_ASSIGNEE':
case 'RECORD_NUMBER':
case 'CALC':
break;
case 'NUMBER':
if (cloneElemCnt !== 0) {
// 2つ目以降は、要素をクローンして親要素に追加する
$cloneElem.clone().appendTo('#form');
}
$('.label').eq(cloneElemCnt).text(escapeHtml(prop.code));
$('.checkbox').eq(cloneElemCnt).attr('name', escapeHtml(prop.code));
$('.checkbox').eq(cloneElemCnt).attr('id', 'check_' + cloneElemCnt);
$('.checkbox').eq(cloneElemCnt).attr('value', escapeHtml(prop.code));
// 既存の設定値を反映
if ($.inArray(prop.code, confValue[0]) !== -1) {
$('.checkbox').eq(cloneElemCnt).attr('checked', 'checked');
}
cloneElemCnt++;
break;
default :
break;
}
}
});
function createConfig() {
// 項目にチェックがついているフィールドを取得
let arrayZeroFillItem = $('.checkbox:checked').map(function() {
return $(this).val();
}).get();
let config = {
'ZeroFillItem': JSON.stringify(arrayZeroFillItem),
};
return config;
}
// 保存
$('#button_submit').on('click', function() {
let config = createConfig();
console.log(config);
// 設定を保存する
kintone.plugin.app.setConfig(config);
window.alert("保存しました");
});
// キャンセル
$('#button_cancel').on('click', function() {
window.history.back();
});
});
})(jQuery, kintone.$PLUGIN_ID);
マニフェストファイル
設定画面用のconfig.js内で、jQueryを利用する為にmanifest.jsonでjQueryを読み込みます。読み込み順はconfig.jsの前にします。
manifest.json
{
"manifest_version": 1,
"version": 1,
"type": "APP",
"name": {
"ja": "ゼロ埋めプラグイン",
"en": "zero-fill plugin"
},
"description": {
"ja": "これはゼロ埋めプラグインです。",
"en": "This is zero-fill plugin."
},
"icon": "image/icon.png",
"desktop": {
"js": [
"js/customize.js"
]
},
"config": {
"html": "html/config.html",
"js": [
"https://js.cybozu.com/jquery/3.3.1/jquery.min.js",
"html/config.js"
]
}
}
説明は後ほど。