フォームのフィールド名とフィールドコードを、表形式で表示したり編集したりできるプラグインを紹介します。
サンプル
フォームのフィールド名とフィールドコードを、表形式で表示・編集できるようにします。 プラグインの設定画面で動作します。
コード
kintone プラグインを利用します。 読み込み方法は下記などを参考にしてください。
https://developer.cybozu.io/hc/ja/articles/203455680
〇ファイル構成
下記をすべて同じ階層に置いてパッケージ化します。
・manifest.json
・config.html
・config.js
・config.css
・icon.png
・manifest.json
{"manifest\_version":1,"version":1,"type":"APP","name": {"ja":"フィールドエディター","en":"Field editor","zh":"现场编辑"},"icon":"icon.png","config": {"html":"config.html","js": ["https://js.cybozu.com/lodash/4.17.11/lodash.min.js","config.js"],"css": ["config.css"]
}
}
・config.html
\<tableid="fields"\>\<thead\>\<tr\>\<th\>Field label\</th\>\<th\>Field code\</th\>\<th\>Field type\</th\>\</tr\>\</thead\>\<tbody\>\</tbody\>\</table\>\<buttonid="save-button"\>save\</button\>\<scripttype="text/html"id="lodash-template"\>\<trid="\<%= fieldCode %\>"class="\<%= parentOrChildField %\>"\>\<td\>\<inputvalue="\<%= fieldLabel %\>"class="field-label"\>\</td\>\<td\>\<inputvalue="\<%= fieldCode %\>"class="field-code"\>\</td\>\<td\>\<inputvalue="\<%= fieldType %\>"class="field-type"disabled\>\</td\>\</tr\>\</script\>
・config.js
(function() {
"use strict";
kintone.api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'GET', {app: kintone.app.getId()}).then(function(response){
var template = _.template(document.getElementById('lodash-template').innerHTML);
document.getElementById('fields').getElementsByTagName('tbody')[0].innerHTML = Object.keys(response.properties).filter(function(fieldCode){
return [
'レコード番号',
'$id',
'$revision',
'作成者',
'更新者',
'作成日時',
'更新日時',
'カテゴリー',
'作業者',
'ステータス'
].indexOf(fieldCode) === -1;
}).reduce(function(fieldsHtml, parentField){
return (
fieldsHtml +
template({
fieldLabel: response.properties[parentField].label,
fieldCode: response.properties[parentField].code,
fieldType: response.properties[parentField].type,
parentOrChildField: 'parent-field'
}) +
(
response.properties[parentField].type === 'SUBTABLE' ?
Object.keys(response.properties[parentField].fields).reduce(function(childFieldsHtml, childField){
return (
childFieldsHtml +
template({
fieldLabel: response.properties[parentField].fields[childField].label,
fieldCode: response.properties[parentField].fields[childField].code,
fieldType: response.properties[parentField].fields[childField].type,
parentOrChildField: 'child-field-of-' + parentField
})
);
}, '') : ''
)
);
}, '');
});
document.getElementById('save-button').addEventListener('click', function(){
kintone.api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'PUT', {
app: kintone.app.getId(),
properties: [].reduce.call(document.getElementsByClassName('parent-field'), function(properties, parentFieldElement){
properties[parentFieldElement.id] = {
label: parentFieldElement.getElementsByClassName('field-label')[0].value,
code: parentFieldElement.getElementsByClassName('field-code')[0].value,
type: parentFieldElement.getElementsByClassName('field-type')[0].value
};
properties[parentFieldElement.id].fields = [].reduce.call(document.getElementsByClassName('child-field-of-' + parentFieldElement.id), function(fields, childFieldElement){
fields[childFieldElement.id] = {
label: childFieldElement.getElementsByClassName('field-label')[0].value,
code: childFieldElement.getElementsByClassName('field-code')[0].value,
type: childFieldElement.getElementsByClassName('field-type')[0].value
};
return fields;
}, {});
return properties;
}, {})
}).then(function(){
alert('更新しました．');
location.reload();
}).catch(function(error){
console.log(error);
alert('更新に失敗しました．');
});
});
})();
・config.css
#fieldsth,#fieldstd{border:1px#000solid;padding:5px;
}#save-button{margin-top:10px;
}
・icon.png
プラグインのアイコンとなる画像ファイルを1つ用意します。
※コード修正しました．(2020/3/12)