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

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

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

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

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

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

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

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

案件管理（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アプリのレコードを全件取得しています。

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

• kintone JavaScript Client
• 全レコードの取得方法

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

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

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

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

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

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

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

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

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

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

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