カテゴリー内の他の記事

レコードコメントをレコード一覧に表示してみよう!

Index

はじめに

レコード一覧ページでは、レコードのコメント数は見えますが、実際にコメントの内容まで見られません。
したがって、コメントの内容を見るためには、ユーザは一度レコードの詳細ページまで移動する必要があります。

今回は、レコード一覧ページ上で、特定のレコード番号上をホバーするとツールチップに最新のコメントの内容が見られるようにカスタマイズしてみます。

開発の流れ

  1. kintoneアプリの設定・変更
  2. JavaScriptによるカスタムプログラムの作成
  3. 動作の確認

1. kintoneアプリの設定・変更

このカスタマイズは、どのアプリにおいても応用が効きますが、今回は、kintone アプリストアから、案件管理アプリを選択しました。

このアプリを元にカスタマイズを行います。
create-app.png

「アプリの設定」「一覧」より、画像を参考に一覧を作成します。

  1. 一覧名に「コメント付一覧」と入力
  2. 「レコード一覧の表示形式」に「レコード番号」を追加します。このレコード番号上をホバーするとコメントが表示されるようにプログラムを作成します。

setting-view.png

設定を保存し、「アプリを更新」して、設定を反映します。

2. JavaScript によるプログラムの作成

下記サンプルコードを参考にプログラムを作成します。

11 行目の viewId は、作成した「コメント付一覧」の一覧 ID に置き換えてください。
confirm-view-id.png

今回は、以下の JavaScript ライブラリーを使用しました。

  • Tippy.js: ツールチップをカスタマイズするライブラリー(外部リンク)
  • Luxon: 日付をフォーマットするライブラリー(外部リンク)

以下の画像を参考に「アプリの設定」「JavaScript / CSS でカスタマイズ」にて、上記で作成したカスタムプログラムおよびライブラリーを設定してください。
今回、ライブラリーは、上記のライブラリーのドキュメントで案内されている CDN の URL を指定しています。
customize-settings.png

設定を保存後、「アプリの更新」をして、設定をアプリに反映させます。

3. 動作の確認

案件管理アプリにレコードを追加して、詳細画面よりいくつかコメントを投稿します。
submit-comments.png

一覧画面に戻り、上記で作成した「コメント付一覧」を選択します。
show-view.png

コメントのあるレコードのレコード番号上をホバーした時、画像のようにコメントが表示されれば成功です。
comfirm-comment.png

プログラムの解説

レコード一覧イベント

上記で作成した一覧 ID を設定して、他の一覧表示の際にプログラムが走らないようにします。

また、一覧の「レコード番号」のフィールドの全ての要素を取得します。この後、ツールチップを設定するためです。
アプリの ID も取得しています。

「レコード番号」要素のループ

一覧の「レコード番号」の要素から、各レコード番号を取得して、それぞれのレコードのコメントを取得しています。

ツールチップの設定

コメントがない場合には、ツールチップの作成をスキップして、表示しないようにしています。

複数コメントがある場合には、最新のコメントを 3 件まで表示設定しています。

また、コメントの文字数を 50 文字までに制限し、それ以降は、「...」として省略しています。

コメントの見栄えを良くするために HTML 形式で定義し、上記で設定したツールチップ用のライブラリーを使って、ツールチップに設定します。日付は Luxon で書式をフォーマットして表示しています。

まとめ

今回は、一覧表示に各レコードのコメントが一眼でわかるようにツールチップのカスタマイズを行いました。このカスタマイズは、簡単にかつ、どんなアプリにも使用でき、かなりの応用が効くカスタマイズですので、是非、お試しください。

この Tips は、2021年6月版 kintoneで確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。