この記事では、従業員番号、氏名、入社日、勤続期間を一覧表示するカスタマイズ方法について説明します。
カスタマイズビューを使用し、入社日と今日の日付から勤続期間を計算し◯年-◯ヶ月のように表示します。
以下のように従業員の情報を一覧表示できます。
カスタマイズを適用するアプリ
固定リンクがコピーされました
kintoneアプリストアから人事労務パックを選択し、サンプルデータを含めるにチェックを入れ、kintoneに追加します。
従業員名簿アプリを開き、以下の画像のようにカスタマイズビューを作成します。
以下の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に表示します。
ぜひ、カスタマイズビューを使用して、より使いやすいアプリを作成してみてください。
