kintoneのレコード画面をタブ化する（縦長画面防止）

本記事の目的

kintoneは入力項目が多くなるとどうしても縦長の画面になりがちです。
これを防ぐため、JavaScriptによりタブでグループ毎に出し分けできるようにします。

アプリの準備

サンプルアプリである「従業員名簿（人事労務パック）」を作成します。
作成されたアプリに対し「アプリの設定」-「フォーム」から、設定変更を加えます。

#####「スペース」フィールドを一番上に追加

#####[基本情報],[業務情報],[給与]の3項目をグループ化

JavaScript記述

まずタブのボタン設定をします。

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

var ButtonA = document.createElement('button');
ButtonA.id = 'ButtonA';
ButtonA.style.height = '30px';
ButtonA.style.width = '120px';
ButtonA.innerHTML = ' 基本情報 ';
ButtonA.style.borderRadius = '10px 10px 0px 0px';

var ButtonB = document.createElement('button');
ButtonB.id = 'ButtonB';
ButtonB.style.height = '30px';
ButtonB.style.width = '120px';
ButtonB.innerHTML = ' 業務情報 ';
ButtonB.style.borderRadius = '10px 10px 0px 0px';

var ButtonC = document.createElement('button');
ButtonC.id = 'ButtonC';
ButtonC.style.height = '30px';
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_ID').appendChild(devSpace);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonAll);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonA);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonB);
  kintone.app.record.getSpaceElement('TAB_ID').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('基本情報',false);
    kintone.app.record.setFieldShown('業務情報',false);
    kintone.app.record.setFieldShown('給与',false);

    switch (setInfo) {
      case "a": ButtonA.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('基本情報',true);
        break;
      case "b": ButtonB.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('業務情報',true);
        break;
      case "c": ButtonC.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('給与',true);
        break;
      default :
        ButtonAll.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('基本情報',true);
        kintone.app.record.setFieldShown('業務情報',true);
        kintone.app.record.setFieldShown('給与',true);
        break;
    }
    return;
  }

押されたタブに応じて、対応グループの「setFieldShown」をTRUEとし、それ以外をFALSEとしています。
また、初期状態では全表示となるよう、先述のJavaScriptに追加記述します。

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_ID').appendChild(devSpace);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonAll);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonA);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonB);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonC);
  tagView("All");//追加
});

結果

タブが表示され、押下したグループのみ表示されるようになりました。

参考

WORK DESIGN GEAR：タブ制御で入力画面をすっきりさせてみた