kintone API

一覧画面のカスタマイズ

戻る

任意のカスタマイズビューだけにカスタマイズを適用する方法

目次

はじめに

固定リンクがコピーされました

この記事では、従業員番号、氏名、入社日、勤続期間を一覧表示するカスタマイズ方法について説明します。
カスタマイズビューを使用し、入社日と今日の日付から勤続期間を計算し◯年-◯ヶ月のように表示します。

動作イメージ

固定リンクがコピーされました

以下のように従業員の情報を一覧表示できます。

カスタマイズを適用するアプリ

固定リンクがコピーされました

kintoneアプリストアから人事労務パックを選択し、サンプルデータを含めるにチェックを入れ、kintoneに追加します。
従業員名簿アプリを開き、以下の画像のようにカスタマイズビューを作成します。

HTMLコード

固定リンクがコピーされました

以下のHTMLコードをカスタマイズビューに追加します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!--
 * display-employee-tenure-list-custom-view sample program
 * Copyright (c) 2024 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
-->

<div id="employee">
  <table>
    <thead>
      <tr>
        <th>従業員番号</th>
        <th>氏名</th>
        <th>入社日</th>
        <th>勤続期間</th>
      </tr>
    </thead>
    <tbody id="employee-tbody">
    </tbody>
  </table>
</div>

サンプルコード

固定リンクがコピーされました

次に、JavaScriptを使用して従業員情報を取得し、HTMLに表示します。
以下のコードのevent.viewIdには、カスタマイズビューの一覧IDを指定し、「employee.js」という名前で保存し、「JavaScript/CSSでカスタマイズ」に追加します。

JavaScriptコード

固定リンクがコピーされました

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

/*
 * display-employee-tenure-list-custom-view sample program
 * Copyright (c) 2024 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/

(() => {
  'use strict';

  // 勤続期間を計算する関数
  const calculateLengthOfService = (joinDate) => {
    const now = new Date();
    const startDate = new Date(joinDate);
    let years = now.getFullYear() - startDate.getFullYear();
    let months = now.getMonth() - startDate.getMonth();

    if (months < 0) {
      years--;
      months += 12;
    }

    return `${years}年-${months}ヶ月`;
  };

  kintone.events.on('app.record.index.show', (event) => {

    // 指定のビューでない場合は何もしない
    if (event.viewId !== 1234567) {
      return event;
    }

    const records = event.records;
    const tbody = document.getElementById('employee-tbody');
    tbody.innerHTML = ''; // 前の内容をクリア

    // レコードがない場合の処理
    if (records.length === 0) {
      tbody.innerHTML = '<tr><td colspan="4">表示するレコードがありません</td></tr>';
      return event;
    }

    // レコードの行をHTMLのtbodyに追加する
    for (let i = 0; i < records.length; i++) {
      const record = records[i];
      const row = tbody.insertRow(); // 新しい行を追加

      // 従業員番号のセルを作成
      const cell1 = row.insertCell(0);
      // 詳細画面へのリンクを作成
      const link = document.createElement('a');
      link.href = `${location.protocol}//${location.hostname}/k/${kintone.app.getId()}/show#record=${record.レコード番号.value}`;
      link.textContent = record.従業員番号.value;
      cell1.appendChild(link);

      // 氏名のセルを作成
      const cell2 = row.insertCell(1);
      cell2.textContent = record.氏名.value;

      // 入社日のセルを作成
      const cell3 = row.insertCell(2);
      cell3.textContent = record.入社日.value;

      // 勤続期間のセルを作成
      const cell4 = row.insertCell(3);
      cell4.textContent = calculateLengthOfService(record.入社日.value);
    }

    return event;
  });
})();

サンプルコードの解説

固定リンクがコピーされました

入社日から現在までの勤続期間を、◯年-◯ヶ月の形式で返します。

12
13
14
15
16
17
18
19
20
21
22
23
24

  // 勤続期間を計算する関数
  const calculateLengthOfService = (joinDate) => {
    const now = new Date();
    const startDate = new Date(joinDate);
    let years = now.getFullYear() - startDate.getFullYear();
    let months = now.getMonth() - startDate.getMonth();

    if (months < 0) {
      years--;
      months += 12;
    }
    return `${years}年-${months}ヶ月`;
  };

指定のビューでない場合は何もせずイベントオブジェクトを返します。

29
30
31
32

  // 指定のビューでない場合は何もしない
  if (event.viewId !== 1234567) {
    return event;
  }

指定のビューの場合は、従業員情報を取得し、HTMLに表示します。
カスタマイズビューの設定で「ページネーションを表示する」チェックを入れると、イベントオブジェクトのrecordsプロパティにレコードのデータ配列を取得できます。
レコードがない場合は、「表示するレコードがありません」と表示します。

34
35
36
37
38
39
40
41
42

    const records = event.records;
    const tbody = document.getElementById('employee-tbody');
    tbody.innerHTML = ''; // 前の内容をクリア

    // レコードがない場合の処理
    if (records.length === 0) {
      tbody.innerHTML = '<tr><td colspan="4">表示するレコードがありません</td></tr>';
      return event;
    }

レコードがある場合は、従業員番号、氏名、入社日、勤続期間を表示します。

44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

    // レコードの行をHTMLのtbodyに追加する
    for (let i = 0; i < records.length; i++) {
      const record = records[i];
      const row = tbody.insertRow(); // 新しい行を追加

      // 従業員番号のセルを作成
      const cell1 = row.insertCell(0);
      // 詳細画面へのリンクを作成
      const link = document.createElement('a');
      link.href = `${location.protocol}//${location.hostname}/k/${kintone.app.getId()}/show#record=${record.レコード番号.value}`;
      link.textContent = record.従業員番号.value;
      cell1.appendChild(link);

      // 氏名のセルを作成
      const cell2 = row.insertCell(1);
      cell2.textContent = record.氏名.value;

      // 入社日のセルを作成
      const cell3 = row.insertCell(2);
      cell3.textContent = record.入社日.value;

      // 勤続期間のセルを作成
      const cell4 = row.insertCell(3);
      cell4.textContent = calculateLengthOfService(record.入社日.value);
    }

おわりに

固定リンクがコピーされました

この記事では、カスタマイズビューを使用して、従業員の勤続期間を表示する方法を説明しました。
一覧を表示する際に、JavaScriptを使用して勤続期間を計算し、HTMLに表示します。
ぜひ、カスタマイズビューを使用して、より使いやすいアプリを作成してみてください。

information

このTipsは、2024年6月版kintoneで動作を確認しています。