【kintoneカスタマイズ】テーブルの最下行のデータを一覧に表示したい

 今回は、自分が実際に作ったカスタマイズを復習してみようと思います。 こんな感じで、前回までの記事のような「JavaScriptを触ったことのない自分」と、今回みたいな「頑張ってみてる自分」を行ったりきたりすると思います。
 大前提ですが、自分はまだ学び始めばかりなので、もっと効率の良いコードがあるかも知れません。また、要点部分を分かりやすくするために、記事では、エラー処理等は取っ払ってます。もし、参照頂く場合はご了承ください。

どんなアプリを作るの?

 kintoneを使ってて、テーブルの情報を一覧に表示したいって思ったことありませんか?例えばこんなとき……
「kintoneで会員の毎日の体調を管理したいなぁ……こんな感じで」

体調管理

「あれ?でも、これだと、一人一人テーブル開かないと内容が分からなくて面倒だなぁ……、最新の情報だけが一覧に表示されるといいのに」とか……

体調管理(一覧あり)

詳細画面だとこんな感じですね。

詳細画面

 「そっか、入力してもらう人に『測定履歴』テーブルと『最新』のフィールドに入力してもらうフローにしよう」と思ったあなた、正解です!それでみんなに周知できるなら、これでアプリは完成です。
 でも、担当者が100人を検温して1人で入力するとしたら……、同じ内容を何度も2回入力するのって大変そうです。プラグインを使えば簡単!なはずなんですが、もしプラグインが使えなかったら?という前提でカスタマイズを頑張ってみることにします。

どんな仕組みだったらいいんだろう?

 できるだけ楽なやり方で達成する方法を考えてみましょう。

  • 基本的にデータは測定履歴に追記するはずだな。
    じゃあ、テーブルが書き換わったときに、最下行の情報を「最新」にコピーするのが、楽そうかな?

  • それなら、「新規にレコードを記入するとき」「既存のデータを編集するとき」に「データの変更」をきっかけに処理しよう。

「最下行のデータを最新に代入する」

 これを元にコードに書いてみました。

(() => {
  ('use strict');
  // 最下行のデータを最新に代入する
  kintone.events.on(
    [
      'app.record.create.change.測定日',
      'app.record.edit.change.測定日',
      'app.record.create.change.体温',
      'app.record.edit.change.体温',
      'app.record.create.change.SpO2',
      'app.record.edit.change.SpO2',
    ],
    (event) => {
      const record = event.record;
      const table = record['測定履歴'].value;
      const targetRow = table[table.length - 1].value;
      record.測定日_最新.value = targetRow.測定日.value;
      record.体温_最新.value = targetRow.体温.value;
      record.SpO2_最新.value = targetRow.SpO2.value;
      return event;
    }
  );
})();

 「測定履歴」をtableに格納して、その最下行(行数-1)の情報を取得、各「最新」に代入という流れになります。
 これをファイルに保存して、JavaScriptファイルとして指定してあげれば、出来上がりです。

もう少し工夫を加えてみよう

 これで一応完成なんですが、どうせ自動入力されるのなら「最新」の各フィールドは編集禁止にしておいたほうが親切そうです。折角なので、この方法も考えてみることにしました。

  • 編集禁止にするには「フィールド.disabled」を「true」にすればいいな。

  • それなら、「新規にレコードを記入するとき」「既存のデータを編集するとき」「一覧画面でインライン編集するとき」に「編集開始」をきっかけに処理しよう。

「『最新』の各フィールドを編集禁止にする」

 コードはこんな感じになりました。

(() => {
  'use strict';
  // フィールドを編集不可にする
  kintone.events.on(
    [
      'app.record.create.show',
      'app.record.edit.show',
      'app.record.index.edit.show',
    ],
    (event) => {
      const items = [
        '測定日_最新',
        '体温_最新',
        'SpO2_最新',
      ];
      const record = event.record;
      items.forEach((item) => (record[item].disabled = true));
      return event;
    }
  );
})();

 forEachを使って処理しています。もちろん、一つ一つ処理していっても良いのですが、フィールドがもっと増えるときも想定すると、こっちのほうが見やすい気がします。
 1つ目のコードと2つ目のコードは、別々のファイルに保存して2つのファイルをJavaScriptファイルとして指定する想定です。もちろん、即時実行関数の中に一緒に収めて、1ファイルにしてしまっても構いません。

ここから色々発展

  • 万が一に備えてエラー処理を入れる。
    (特に編集禁止のほうは、フィールドコードが存在しないと処理が止まる)

  • 「測定履歴」の「測定日」が一番新しいデータを「最新」に入れるようにする。

  • 「測定履歴」のデータを「測定日」順に並べ替える。

  • 「37.5度以上」で、一番高い発熱の日は、「一番古い測定日から何日目か」をどこかに保存する。 などなど、色々できそうです。

 というわけで、短いコードでも困ったことが解決できたりするのがカスタマイズです。ただ、本番環境であれば、しっかりバグつぶしする必要がありますし、想定外のエラーを処理したり知らせる仕組みも必要になります。
 有償無償のプラグインを使うことも可能ですし、どの方法が適切なのかは、ご自身で見極めましょう。
 とはいえ、やり始めると楽しいと思った方、自分もそうですw
一緒に勉強していきましょう♪

この記事が気に入ったらサポートをしてみませんか?