テーブルの邪魔な列を非表示にする

やりたいこと

kintoneの経費精算アプリで、科目別の集計行を計算フィールドで作成してますが、新規レコード登録と編集画面では、テーブルが横長になり過ぎて操作しづらいので、科目別の計算フィールドを非表示にしたい。

kintoneではsumif関数が使えないので、代替手段としてkintoneヘルプページの「kintoneにSUMIF関数はありますか？」で紹介されているアプリ作成例とJavascriptカスタマイズの合わせ技です。

テーブルの科目別の金額を集計するために、３つの計算フィールド（交通費計算、宿泊費計算、雑費計算）を作成し、IF関数で科目フィールド値を参照して各計算列で科目判定して金額フィールドの値を転記しています。
こうすると標準機能だけで、テーブルの外で科目別の金額集計が可能になるのですが、３つの計算フィールドが表示されたままだとテーブルが横長にり、行の追加・削除操作の邪魔なので非表示にして欲しいとの要望です。

デモ画面

デモ画面では、3つの計算フィールドが非表示ですが、テーブルの下で科目別の合計が計算されているのが分かると思います。

デモ画面

---

アプリの設定

フォームのテーブル内に以下のフィールドを設置します。
日付（日付型）、科目（ドロップダウン）、金額（数値型）、備考（文字列1行）、計算型フィールドで交通費計算、宿泊費計算、雑費計算の3つを設置します。「フィールドコード」は全てフィールド名と同じです。
テーブル内の計算型フィールドの計算式は以下の通りです。
交通費計算：IF(科目="交通費",金額,0)
宿泊費計算：IF(科目="宿泊費",金額,0)
雑費計算　：IF(科目="雑費",金額,0)

テーブル外の集計用の計算フィールドの計算式は以下の通りです。
金額合計　：SUM(金額)
交通費合計：SUM(交通費計算)
宿泊費合計：SUM(宿泊費計算)
雑費合計　：SUM(雑費計算)

ここまでは標準機能の関数だけを使っています。

フォーム設定画面

---

フィールドを非表示にするJavascriptコード

レコード編集時に邪魔なテーブル内の科目集計用のフィールドを非表示にする処理をJavasceiptで実装します。
全部で16行ほどの非常に短いコードです。
フィールドの表示と非表示は、以下の命令で指定できます。
kintone.app.record.setFieldShown(［フィールドコード］, false); // 非表示
kintone.app.record.setFieldShown(［フィールドコード］, true);  // 表示

/* テーブルで表示したくない列を非表示にする */
(function () {
  'use strict';

  // フィールドを非表示にする関数
  function hideFields(event) {
    kintone.app.record.setFieldShown('交通費計算', false);
    kintone.app.record.setFieldShown('宿泊費計算', false);
    kintone.app.record.setFieldShown('雑費計算', false);
    return event;
  }

  // 実行イベントの設定
  const eventsToShow = ['app.record.create.show', 'app.record.edit.show'];
  kintone.events.on(eventsToShow, hideFields);
})();

上記サンプルコードのフィールドコードの部分を変更すれば、色々なアプリで応用が可能です。

参考記事

以下の記事では、Javascriptだけでテーブル内の数値を科目別集計する事例を紹介しています。

---

【注意事項】

本記事でテーブルのフィールドを非表示にしているのは、レコード新規登録画面と編集画面だけです。テーブルが横長になると困るのは編集モードだけなので、あえてそうしています。
レコード詳細画面でも非表示にしたい場合は、'app.record.detail.show'を実行イベントの設定に追加して下さい。

しかし、全てのモードで非表示にすると、時間経過や担当者の交代で非表示フィールドの存在が忘れられてしまい、アプリの保守作業でミスや混乱（非表示フィールドを不要と判断して削除するとコードエラー発生等）が生じるリスクがありますので、あまりお勧めではないです。
Javascriptでカスタマイズしたアプリは、「アプリの説明」や「開発者メモ」にカスタマイズの要点を注意書きとして残しておきましょう。