JavaScript
kintone

kintone での簡易タブ運用 改善版(JavaScriptのみ使用)


はじめに

以前書いたkintoneでの簡易タブ運用(JavaScript使用)で書いたコードを毎回書くのは面倒くさくなったので、for文とaddEventListener()を利用して書き直した。


フォーム

form.png


コード


tab.js

(function() {

"use strict";

const tab_name = ['Test1', 'Test2', 'Test3'];
const field_code = ['a', 'i', 'u'];
const tabs = [];
for(let i = 0; i < tab_name.length; i++){
tabs[i] = document.createElement('button');
tabs[i].id = field_code[i];
tabs[i].innerHTML = tab_name[i];
tabs[i].className = 'tab';
tabs[i].addEventListener("click", setView, false);
}
const events = ['app.record.detail.show',
'app.record.edit.show',
'app.record.create.show'];

kintone.events.on(events, function(e) {
const record_json = e.record;
for(let j = 0; j < tabs.length; j++){
kintone.app.record.getSpaceElement('tab_button').appendChild(tabs[j]);
}
setView(tabs[0]);

return e;
});

function setView(value){
// addEventListenerでsetする場合はtoelementからのid
value = value.toElement || value;

for(let k = 0; k < tabs.length; k++){
tabs[k].style.background = '#E6E6E6';
console.log(k);
kintone.app.record.setFieldShown(tabs[k].id, false);
}

const matchData = tabs.filter(function(item, index){
if(item.id === value.id)
return true;
});
const search_result = matchData[0];
value.style.background = '#ffb6c1';
kintone.app.record.setFieldShown(search_result.id, true);
return;
}

})();



結果

開いたとき

tab_a.png

ボタンを押したとき

tab_b.png


少し解説

前半はfor文でタブを作成

field codeとidを合わせることでコードの節約?

後半はタブを押したときと表示イベントで得られるvalueが少し違うため

赤枠が表示イベント, 青枠がマウスイベント

idはtoElement下にある

console_log.png


追加要素


言語ごとにタブ名変更


  1. tab_nameを言語ごとのオブジェクトリテラルの配列を作る


  2. kintone.getLoginUser()からlanguageを取得

  3. 比較する


sample.js

    const tab_name = [{"en":, "Sample", "ja": "サンプル", "zh": "样品"}];



ステータスごとにタブ初期表示変更

作成画面→event.type = 'app.record.create.show'の時の処理

それ以外→event.record."ステータス".valueのそれぞれを処理

"ステータス"はアプリ作成者の作成時の言語のため注意(Reference errorなりがち)


sample.js

    if(e.type === 'app.record.create.show'){

setView(tab[0]);
}else{
//
const status = record.Status.value;
const status_list = [ {"status": 'Preparation', "select_tab": tabs[0]},
{"status": 'Confirmation', "select_tab": tabs[1]},
{"status": 'Approval', "select_tab": tabs[2]}];
const matchData = status_list.filter(function(item){
if(item.status === status)
return true;
});
const search_result = matchData[0];
setView(search_result.select_tab);
}

その他複数fieldとかもあるが、自分で考えてね(力尽きた)


最後に

自身が理解していくほどコードが短くなっていく

それに合わせて可読性も高めていかないとなあと感じます。(ただの感想)