レコード一覧ページでは、レコードのコメント数は見えますが、実際にコメントの内容まで見られません。
したがって、コメントの内容を見るためには、ユーザは一度レコードの詳細ページまで移動する必要があります。
今回は、レコード一覧ページ上で、特定のレコード番号上をホバーするとツールチップに最新のコメントの内容が見られるようにカスタマイズしてみます。
-
kintoneアプリの設定・変更
-
JavaScriptによるカスタムプログラムの作成
-
動作の確認
kintoneアプリの設定・変更
固定リンクがコピーされました
このカスタマイズはどのアプリにおいても応用が効きますが、今回は kintone アプリストアから案件管理アプリを選択しました。
このアプリを元にカスタマイズを行います。
「アプリの設定」「一覧」より、画像を参考に一覧を作成します。
- 一覧名に「コメント付一覧」と入力
- 「レコード一覧の表示形式」に「レコード番号」を追加します。このレコード番号上をホバーするとコメントが表示されるようにプログラムを作成します。
設定を保存し、「アプリを更新」して、設定を反映します。
JavaScript によるプログラムの作成
固定リンクがコピーされました
下記サンプルコードを参考にプログラムを作成します。
11 行目の viewId は、作成した「コメント付一覧」の一覧 ID に置き換えてください。
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
|
/*
* Comment tooltip sample program
* Copyright (c) 2021 Cybozu
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
*/
(function() {
'use strict';
// 一覧の ID を指定する
const viewId = 5684546;
// Luxon 日付フォーマット用のライブラリー
const DateTime = luxon.DateTime;
// レコード一覧イベント
kintone.events.on('app.record.index.show', (event) => {
if (event.viewId !== viewId) {
return event;
}
const elements = kintone.app.getFieldElements('レコード番号');
const appId = kintone.app.getId();
elements.forEach((element) => {
const id = element.innerText;
const body = {
app: appId,
record: id
};
kintone.api(kintone.api.url('/k/v1/record/comments', true), 'GET', body, (resp) => {
// success
if (resp.comments.length === 0) {
return;
}
// 表示コメント数は、最大３
let comments = '<br/>';
const maxLength = resp.comments.length < 3 ? resp.comments.length : 3;
for (let i = 0; i < maxLength; i++) {
const comment = resp.comments[i];
let commentText = comment.text;
const createdDate = new Date(comment.createdAt);
if (commentText.length > 50) {
commentText = commentText.substring(0, 50) + '...';
}
comments += '<div style="border:1px solid orange; border-radius: 5px; background-color: orange; padding: 5px;"><div>' +
comment.id + ': ' + comment.creator.name + '[' + DateTime.fromJSDate(createdDate).toLocaleString(DateTime.DATETIME_MED) + // 日付をLuxonフォーマットに変換
']' + '</div>' + '<div>' + commentText + '</div></div><br/>';
}
tippy(element, {
content: comments,
allowHTML: true,
theme: 'light',
});
}, (error) => {
// error
console.log(error);
});
});
return event;
});
})();
|
今回は、以下の JavaScript ライブラリーを使用しました。
-
Tippy.js
: ツールチップをカスタマイズするライブラリー（外部リンク）
-
Luxon
: 日付をフォーマットするライブラリー（外部リンク）
以下の画像を参考に「アプリの設定」「JavaScript / CSS でカスタマイズ」にて、上記で作成したカスタムプログラムおよびライブラリーを設定してください。
今回、ライブラリーは、上記のライブラリーのドキュメントで案内されている CDN の URL を指定しています。
設定を保存後、「アプリの更新」をして、設定をアプリに反映させます。
案件管理アプリにレコードを追加して、詳細画面よりいくつかコメントを投稿します。
一覧画面に戻り、上記で作成した「コメント付一覧」を選択します。
コメントのあるレコードのレコード番号上をホバーした時、画像のようにコメントが表示されれば成功です。
レコード一覧イベント
上記で作成した一覧 ID を設定し、他の一覧表示の際、プログラムが走らないようにします。
また、一覧の「レコード番号」のフィールドのすべての要素を取得します。この後、ツールチップを設定するためです。
アプリの ID も取得しています。
15
16
17
18
19
20
|
kintone.events.on('app.record.index.show', (event) => {
if (event.viewId !== viewId) {
return event;
}
const elements = kintone.app.getFieldElements('レコード番号');
const appId = kintone.app.getId();
|
「レコード番号」要素のループ
一覧の「レコード番号」の要素から、各レコード番号を取得して、それぞれのレコードのコメントを取得しています。
21
22
23
24
25
26
27
|
elements.forEach((element) => {
const id = element.innerText;
const body = {
app: appId,
record: id
};
kintone.api(kintone.api.url('/k/v1/record/comments', true), 'GET', body, (resp) => {
|
コメントがない場合には、ツールチップの作成をスキップして、表示しないようにしています。
複数コメントがある場合には、最新のコメントを 3 件まで表示設定しています。
また、コメントの文字数を 50 文字までに制限し、それ以降は、「...」として省略しています。
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
if (resp.comments.length === 0) {
return;
}
// 表示コメント数は、最大３
let comments = '<br/>';
const maxLength = resp.comments.length < 3 ? resp.comments.length : 3;
for (let i = 0; i < maxLength; i++) {
const comment = resp.comments[i];
let commentText = comment.text;
const createdDate = new Date(comment.createdAt);
if (commentText.length > 50) {
commentText = commentText.substring(0, 50) + '...';
}
comments += '<div style="border:1px solid orange; border-radius: 5px; background-color: orange; padding: 5px;"><div>' +
comment.id + ': ' + comment.creator.name + '[' + DateTime.fromJSDate(createdDate).toLocaleString(DateTime.DATETIME_MED) + // 日付をLuxonフォーマットに変換
']' + '</div>' + '<div>' + commentText + '</div></div><br/>';
}
tippy(element, {
content: comments,
allowHTML: true,
theme: 'light',
});
|
コメントの見栄えを良くするために HTML 形式で定義します。
上記で設定したツールチップ用のライブラリーを使って、ツールチップに設定します。
日付は Luxon で書式をフォーマットして表示しています。
今回は一覧表示に各レコードのコメントが一眼でわかるようにツールチップのカスタマイズを行いました。
このカスタマイズは簡単にかつ、どんなアプリにも使用でき、かなりの応用が効くカスタマイズですので、ぜひお試しください。
