関連レコードの件数を取得するワザ

目次

はじめに

kintoneの「関連レコード一覧」は、指定した条件に当てはまるレコードを表示できるフィールドです。
関連レコード一覧 (External link)
しかし、条件に当てはまるレコードが何件あるかまでは、基本機能だけではわかりません。
今回のTipsは、関連レコードとして表示されるレコードの数を表示するカスタマイズを紹介します。

利用イメージ

たとえば、顧客リストアプリの関連レコード一覧に、顧客名で紐付けた案件情報アプリのレコードを表示しているとします。
この記事で紹介するカスタマイズを適用すると、顧客リストアプリレコードから関連する案件の数を把握できます。

毎回、関連するアプリに移動し絞り込みやグラフの確認などをすることなく関連レコードを設置したアプリからレコード数が確認できるようになるTipsです。

アプリの準備

まず、 アプリストア (External link) にある 営業支援パック (External link) を追加します。
今回のTipsでは、営業支援パック内の顧客管理(Aアプリ)と案件管理(Bアプリ)を使用します。

顧客管理(Aアプリ)

顧客管理(Aアプリ)の、次のフィールドを使用します。

フィールドタイプ フィールド名 フィールドコード 備考
文字列(1行) 顧客名 顧客名 関連レコードに表示するレコードの絞り込み用
関連レコード一覧 案件一覧 案件一覧 件数対象の関連レコード一覧

また、関連レコードの件数を表示するための、スペースフィールドを追加します。

フィールドタイプ フィールド名 フィールドコード 備考
スペース 設定なし num 関連レコードの件数を表示するためのスペース

ついでに、スペースフィールドの近くにラベルを設置し、何を示している値なのかわかりやすくしておきましょう。

この場合のラベル名は関連案件数としています。

案件管理(Bアプリ)

案件管理(Bアプリ)の、次のフィールドを使用します。

フィールドタイプ フィールド名 フィールドコード 備考
ルックアップ 顧客名 顧客名 関連レコードに表示するレコードの絞り込み用

サンプルコード

 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
/*
 * value of RelatedRecords program
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
*/
(() => {
  'use strict';

  // 関連レコードの絞り込みに利用するフィールドコード
  const FIELDNAME_A = '顧客名'; // Aアプリ
  const FIELDNAME_B = '顧客名'; // Bアプリ

  kintone.events.on('app.record.detail.show', async (event) => {
    // kintone-rest-api-clientを使う準備
    const client = new KintoneRestAPIClient();

    // 関連レコードの「表示するレコードの条件」に合わせてクエリを作成
    const clientName = event.record[FIELDNAME_A].value;
    const query = `${FIELDNAME_B}="${clientName}"`;
    const appId = kintone.app.getRelatedRecordsTargetAppId('案件一覧');

    // 関連レコードを取得
    const records = await client.record.getAllRecords({app: appId, condition: query});

    // スペースフィールドにBアプリのレコード数を反映
    const num = records.length;
    const divTotalAmount = document.createElement('div');
    divTotalAmount.style.fontWeight = 'bold';
    divTotalAmount.style.textAlign = 'center';
    divTotalAmount.style.fontSize = 12;
    divTotalAmount.textContent = num;
    kintone.app.record.getSpaceElement('num').appendChild(divTotalAmount);
    return event;
  });
})();

ソースコードの説明

次のkintone-rest-api-clientと、前述のサンプルコードを顧客管理(Aアプリ)のJavaScript / CSSでカスタマイズに追加します。

kintone-rest-api-clientは、kintone REST APIをJavaScriptで扱う際に必要な処理をまとめたライブラリです。
getAllRecordsメソッドで全レコードを一括取得できます。
このサンプルでは、関連レコードで紐づけているBアプリのレコードを全件取得しています。

詳しくは下記ページを参照ください。

getAllRecordsメソッドで取得したレコード数をスペースフィールドに表示します。

スペースフィールドの利用については、 レコード詳細画面にボタンを配置してみようで、 kintone.app.record.getSpaceElementを詳しく解説しています。

今回は「num」という要素IDで設置したスペースフィールドに値を反映させますので、関連レコードの項目を条件付きで集計と同じように関連レコードに合致するレコードの数を、フィールドの近くに設置しました。

レコードの関連フィールド一覧では一目でわからなかった、顧客に関連のある案件数が「関連案件数」に表示されます。

関連レコードのフィールド設定で「さらに絞り込む条件」を設定できます。

「さらに絞り込む条件」を設定した場合には、サンプルコードのレコードを取得するクエリにも同様の条件を追加してください。

デモ環境

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/285/ (External link)

ログイン情報は cybozu developer networkデモ環境で確認してください。

おわりに

アプリ同士の連携を図る関連レコード一覧は標準機能で利用できるためkintoneを活用するには欠かせない機能となっています。

さらに、今回のTipsで紹介したカスタマイズを加えると、より便利になると思います。
お使いのkintoneアプリ用にアレンジを加えてチーム内での情報活用にお役立てください。

information

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