【kViewer】リストビューの詳細画面にタブ表示をしたい

kintone カスタマイズ
4

maruさん

すみません。細かい記述ミスがありました。

 

// 各タブで表示したいフィールドコード
const tab1Fields = ['フィールドA', 'フィールドB'];
const tab2Fields = ['フィールドC', 'フィールドD'];
const tab3Fields = ['フィールドE', 'フィールドF'];

// 各タブで表示したいフィールド要素
let tab1Elements = [];  // ★constではなくletでした
let tab2Elements = [];
let tab3Elements = [];

// フィールドコードからフィールド要素を格納（タブの数分）
tab1Elements  = tab1Fields.map(function(field) {
return kv.detail.getElementByCode(field); // ★codeではなくfieldでした
});

// 以下をタブボタンのクリックイベントで実行し、表示状態を切り替え（タブの数分）

// 表示する場合
tab1Elements.forEach(function(el, index) {
el.style.display = '';  // ★parentNode不要でした
});

// 非表示にする場合
tab1Elements.forEach(function(el, index) {
el.style.display = 'none';  // ★parentNode不要でした
});

 

ボタンは、同様の処理を3つ記載すれば良いですよ。

ボタンをappendする処理を変えています。

const kButton = document.createElement('button'); //ボタン生成
kButton.style.height = '30px'; //ボタンの高さ
kButton.style.width = '150px'; //ボタンの横幅
kButton.innerHTML = '基本情報'; //ボタンの表示名
kButton.style.borderRadius = '10px'; //ボタンのデザイン
kButton.onclick = function() {
  alert('基本情報ボタンを押下しました。')

  // 表示する
  tab1Elements.forEach(function(el, index) {
    el.style.display = '';
  });

  // 非表示にする
  tab2Elements.forEach(function(el, index) {
    el.style.display = 'none';
  });

  // 非表示にする
  tab3Elements.forEach(function(el, index) {
    el.style.display = 'none';
  });

};


// スペース「kButtonField」にボタン「kButton」を設置
kv.detail.getElementByCode('kButtonField').appendChild(kButton);