複数のタブを設置したい

kintone カスタマイズ
1

アプリに２つのタブ（各４つの切替）を設置して動かしたいと考えていますが、

１つのタブでは希望通りに動作するものの、

２つにすると先に設置した方が動かなくなります。

それぞれ１つずつでは動作します。

何かコードに不備や不足している内容があるのでしょうか？

ご教授くださいますようお願い致します。

 

タブは下記のとおりです。

１つ目「タブ_ABC.js」

var ButtonAll = document.createElement('button');
ButtonAll.id = 'eeButton';
ButtonAll.style.height = '50px';
ButtonAll.style.width = '120px';
ButtonAll.innerHTML = ' 全表示 ';
ButtonAll.style.borderRadius = '10px 10px 0px 0px';

var ButtonA = document.createElement('button');
ButtonA.id = 'ButtonA';
ButtonA.style.height = '50px';
ButtonA.style.width = '120px';
ButtonA.innerHTML = ' ＡＡＡ ';
ButtonA.style.borderRadius = '10px 10px 0px 0px';

var ButtonB = document.createElement('button');
ButtonB.id = 'ButtonB';
ButtonB.style.height = '50px';
ButtonB.style.width = '120px';
ButtonB.innerHTML = ' ＢＢＢ ';
ButtonB.style.borderRadius = '10px 10px 0px 0px';

var ButtonC = document.createElement('button');
ButtonC.id = 'ButtonC';
ButtonC.style.height = '50px';
ButtonC.style.width = '120px';
ButtonC.innerHTML = ' ＣＣＣ ';
ButtonC.style.borderRadius = '10px 10px 0px 0px';

var devSpace = document.createElement('dev');
devSpace.innerHTML = '';//タブ位置の調整

kintone.events.on(['app.record.create.show','app.record.edit.show','app.record.detail.show'], function (e) {
  if (document.getElementById ('button') !== null) {
    return;
  }
  kintone.app.record.getSpaceElement('TAB_ABC').appendChild(devSpace);
  kintone.app.record.getSpaceElement('TAB_ABC').appendChild(ButtonAll);
  kintone.app.record.getSpaceElement('TAB_ABC').appendChild(ButtonA);
  kintone.app.record.getSpaceElement('TAB_ABC').appendChild(ButtonB);
  kintone.app.record.getSpaceElement('TAB_ABC').appendChild(ButtonC);

});
 ButtonAll.onclick = function() {
    tagView("All");
    return false;
  }
  ButtonA.onclick = function() {
    tagView("a");
    return false;
  }
  ButtonB.onclick = function() {
    tagView("b");
    return false;
  }
  ButtonC.onclick = function() {
    tagView("c");
    return false;
  }

  function tagView(setInfo){
    ButtonA.style.background = '#c0c0c0';
    ButtonB.style.background = '#c0c0c0';
    ButtonC.style.background = '#c0c0c0';
    ButtonAll.style.background = '#c0c0c0';
    kintone.app.record.setFieldShown('AAA',false);
    kintone.app.record.setFieldShown('BBB',false);
    kintone.app.record.setFieldShown('CCC',false);
    switch (setInfo) {
      case "a": ButtonA.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('AAA',true);
        break;
      case "b": ButtonB.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('BBB',true);
        break;
      case "c": ButtonC.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('CCC',true);
        break;

      default :
        ButtonAll.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('AAA',true);
        kintone.app.record.setFieldShown('BBB',true);
        kintone.app.record.setFieldShown('CCC',true);
        break;
    }
    return;
  }

 

２つ目「タブ_123.js」

var Button00 = document.createElement('button');
Button00.id = 'Button00';
Button00.style.height = '50px';
Button00.style.width = '120px';
Button00.innerHTML = ' 全表示 ';
Button00.style.borderRadius = '10px 10px 0px 0px';

var Button01 = document.createElement('button');
Button01.id = 'Button01';
Button01.style.height = '50px';
Button01.style.width = '120px';
Button01.innerHTML = ' １１１ ';
Button01.style.borderRadius = '10px 10px 0px 0px';

var Button02 = document.createElement('button');
Button02.id = 'Button02';
Button02.style.height = '50px';
Button02.style.width = '120px';
Button02.innerHTML = ' ２２２ ';
Button02.style.borderRadius = '10px 10px 0px 0px';

var Button03 = document.createElement('button');
Button03.id = 'Button03';
Button03.style.height = '50px';
Button03.style.width = '120px';
Button03.innerHTML = ' ３３３ ';
Button03.style.borderRadius = '10px 10px 0px 0px';

var devSpace = document.createElement('dev');
devSpace.innerHTML = '';//タブ位置の調整

kintone.events.on(['app.record.create.show','app.record.edit.show','app.record.detail.show'], function (e) {
  if (document.getElementById ('button') !== null) {
    return;
  }
  kintone.app.record.getSpaceElement('TAB_123').appendChild(devSpace);
  kintone.app.record.getSpaceElement('TAB_123').appendChild(Button00);
  kintone.app.record.getSpaceElement('TAB_123').appendChild(Button01);
  kintone.app.record.getSpaceElement('TAB_123').appendChild(Button02);
  kintone.app.record.getSpaceElement('TAB_123').appendChild(Button03);

});
 Button00.onclick = function() {
    tagView("00");
    return false;
  }
  Button01.onclick = function() {
    tagView("1");
    return false;
  }
  Button02.onclick = function() {
    tagView("2");
    return false;
  }
  Button03.onclick = function() {
    tagView("3");
    return false;
  }

  function tagView(setInfo){
    Button01.style.background = '#c0c0c0';
    Button02.style.background = '#c0c0c0';
    Button03.style.background = '#c0c0c0';
    Button00.style.background = '#c0c0c0';
    kintone.app.record.setFieldShown('tab01',false);
    kintone.app.record.setFieldShown('tab02',false);
    kintone.app.record.setFieldShown('tab03',false);
    switch (setInfo) {
      case "1": ButtonA.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('tab01',true);
        break;
      case "2": ButtonB.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('tab02',true);
        break;
      case "3": ButtonC.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('tab03',true);
        break;

      default :
        Button00.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('tab01',true);
        kintone.app.record.setFieldShown('tab02',true);
        kintone.app.record.setFieldShown('tab03',true);
        break;
    }
    return;
  }

 

 

「いいね！」 1
2

たぶん、devSpace がグローバル変数になっているので、スクリプト間で競合しているからだと思います。

対策としては、スクリプトを無名関数で定義して、devSpace 等の変数をローカル変数にすると同じ変数名でも競合しません。

3

rex0220様

ご連絡ありがとうございます。

ご指摘通り、関数をそれぞれ定義したところ、無事にタブを切り替えられるようになりました！

大変助かりました。ありがとうございました。