詳細画面タブ表示

[kintonekintone]

【教えてください】
初めて投稿いたします。
レコード詳細画面でツールバー部分にタブを表示させたいのですが、レコード編集画面のみタブが表示されず・・・
レコード追加画面、レコード閲覧画面では表示できています。
また、プラグインは使わず、JavaScriptのみで実装予定です。
原因が分かる方がいらっしゃいましたら教えていただけると幸いです。
よろしくお願いいたします。

(function() {
‘use strict’;

kintone.events.on([
‘app.record.detail.show’,
‘app.record.create.show’,
‘app.record.edit.show’
], function(event) {

if (document.getElementById('custom-tabs-container')) {
  return event;
}

const tabContainer = document.createElement('div');
tabContainer.id = 'custom-tabs-container';
tabContainer.style.display = 'flex';
tabContainer.style.justifyContent = 'flex-start';

const tabWidth = '150px';

const tabsInfo = [
  { label: 'TOP', color: '#3CAFE1', borderTopLeftRadius: '5px', borderTopRightRadius: '0', scrollTarget: 'top' },
  { label: タブ１', color: '#3CAFE1', borderTopLeftRadius: '0', borderTopRightRadius: '0', scrollTarget: 'top' },
  { label: 'タブ２', color: '#3CAFE1', borderTopLeftRadius: '0', borderTopRightRadius: '0', scrollTarget: 'customerDetailInfo' },
  { label: 'タブ３', color: '#3CAFE1', borderTopLeftRadius: '0', borderTopRightRadius: '0', scrollTarget: 'pjtInfo' },
  { label: '履歴', color: '#3CAFE1', borderTopLeftRadius: '0', borderTopRightRadius: '5px', scrollTarget: 'historyInfo' }
];

let activeTab = null;

tabsInfo.forEach(tabInfo => {
  const tab = document.createElement('div');
  tab.innerText = tabInfo.label;
  tab.style.width = tabWidth;
  tab.style.height = '40px';
  tab.style.display = 'flex';
  tab.style.alignItems = 'center';
  tab.style.justifyContent = 'center';
  tab.style.margin = '0';
  tab.style.cursor = 'pointer';
  tab.style.backgroundColor = '#C6C6C6';
  tab.style.color = '#FFFFFF';
  tab.style.fontWeight = 'bold';
  tab.style.borderRight = 'none';
  tab.style.borderBottom = '3px solid #3CAFE1';
  tab.style.borderTopLeftRadius = tabInfo.borderTopLeftRadius;
  tab.style.borderTopRightRadius = tabInfo.borderTopRightRadius;

  tab.addEventListener('click', () => {
    if (activeTab) {
      activeTab.style.backgroundColor = '#C6C6C6';
      activeTab.style.borderBottom = '3px solid #3CAFE1';
    }
    tab.style.backgroundColor = tabInfo.color;
    tab.style.borderBottom = '3px solid #3CAFE1';
    activeTab = tab;

    setTimeout(() => {
      const targetField = kintone.app.record.getSpaceElement(tabInfo.scrollTarget);
      if (targetField) {
        targetField.scrollIntoView({ behavior: 'smooth', block: 'start' });
      } else {
        console.error('指定されたスペースフィールドが見つかりません:', tabInfo.scrollTarget);
      }
    }, 300);
  });

  tabContainer.appendChild(tab);
});

tabContainer.firstChild.style.backgroundColor = tabsInfo[0].color;
tabContainer.firstChild.style.borderBottom = '3px solid #3CAFE1';
activeTab = tabContainer.firstChild;

const insertTabContainer = () => {
  const container = (event.type === 'app.record.create.show' || event.type === 'app.record.edit.show')
    ? document.querySelector('.gaia-argoui-app-edit-buttons')
    : document.querySelector('.gaia-argoui-app-toolbar');

  if (container) {
    container.style.display = 'flex';
    container.style.justifyContent = 'flex-start';
    container.insertBefore(tabContainer, container.firstChild);
  }
};

setTimeout(insertTabContainer, 500);

return event;

});
})();

[lemon_sour]

こんにちわ。
詳細画面から編集画面への遷移の際にはページの読み直しが発生しないため、詳細画面で作成したタブが、詳細画面遷移時のタイミングによっては残存してしまっているようです。

下記の部分を修正する必要があるようです。

if (document.getElementById('custom-tabs-container')) {
  return event;
}

このようにすれば、ご希望の動作になると思います。

const tab = document.getElementById('custom-tabs-container');
if (tab) {
  // タブを削除
  if(event.type === 'app.record.edit.show'){
    tab.remove();
  }
  else{
    return event;
  }
}

[kintonekintone]

期待通りにタブを表示できました！
ありがとうございました！！