関連レコードの項目を条件付きで集計

目次

はじめに

今回の Tips は、 顧客ごとの自動採番 に続いて、サンプルアプリ「営業支援パック」の顧客管理アプリを利用します。
顧客管理アプリには、関連レコード一覧が設定されており、同パック内の案件管理アプリと紐付いています。
そのため、顧客管理アプリ内で顧客に関連した案件情報を参照できます。

デモ環境

デモ環境で実際に動作を確認できます。

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

概要

アプリ内に配置されたテーブルの値は標準機能で集計できますが、関連レコード一覧の項目の集計はできません。
そこでカスタマイズによって、関連レコード一覧の項目を集計します。
さらに、すべての関連レコードを集計するのではなく、「ある条件に合うもの」のみを集計します。
今回は、「A プランを提案」した案件の「合計費用」項目の値を集計します。

これでもう、参照元のアプリまで集計結果を確認しに行く必要はありませんね!

表示するフィールドの設定

「顧客管理アプリの設定 > フォーム > 関連レコードフィールド[案件一覧]の設定 > 表示するフィールド」 において、顧客管理アプリに表示する関連レコードのフィールドの項目と順序を設定します。

そして、集計結果の表示領域としてスペースフィールドを案件一覧の下に配置します。
要素 ID は、「totalAmount」とします。

関連レコード一覧の合計費用フィールドの位置に合わせるため、任意の幅のスペースフィールドと「A プラン小計」と記載したラベルフィールドも併せて配置します。

サンプルコード

フォームの詳細画面、編集画面表示のタイミングで計算するサンプルです。

 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
/*
 * total related records
 * Copyright (c) 2018 Cybozu
 *
 * Licensed under the MIT License
*/
(() => {
  'use strict';

  const events = [
    'app.record.detail.show',
    'app.record.edit.show'
  ];
  kintone.events.on(events, (event) => {
    const clientRecordId = event.recordId;
    const relatedAppId = kintone.app.getRelatedRecordsTargetAppId('案件一覧');
    const query = `顧客管理レコード番号_関連レコード紐付け用="${clientRecordId}" and 提案プラン in ("Aプラン")`;
    const outputFields = ['合計費用'];
    const appUrl = kintone.api.url('/k/v1/records');

    const params = {
      app: relatedAppId,
      query: query,
      fields: outputFields
    };

    const elementId = 'totalAmount';

    kintone.api(appUrl, 'GET', params, (resp) => {
      let amount = 0;
      for (let i = 0; i < resp.records.length; i++) {
        amount += parseFloat(resp.records[i].合計費用.value);
      }

      const divTotalAmount = document.createElement('div');
      const wString = String(amount.toFixed(0).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'));
      divTotalAmount.style.fontWeight = 'bold';
      divTotalAmount.style.textAlign = 'right';
      divTotalAmount.style.fontSize = 12;
      divTotalAmount.innerHTML = ${wString}-`;
      kintone.app.record.getSpaceElement(elementId).appendChild(divTotalAmount);
      return event;
    });
  });
})();

サンプルコードのポイント

関連レコード一覧フィールドは、参照したいアプリの中で条件に一致したレコードを取得して表示しており、現在表示しているレコード詳細画面自体には情報を持っていません。
そのため、関連レコード一覧フィールドに表示されている情報を取得するには、レコード取得の kintone REST API を使用する必要があります。
レコード取得時の条件は、関連レコード一覧フィールドの「表示するレコードの条件」を参考にします。

関連レコード一覧フィールドの「表示するレコードの条件」は、レコード取得 API 実行時の query パラメーターを記載する際に利用します。
たとえば、関連レコード一覧画面に相当するレコードを取得したい場合は、以下のようなクエリを記載します。

1
const query = `顧客管理レコード番号_関連レコード紐付け用="${clientRecordId}"`;

クエリのポイント

本記事では、関連レコード一覧フィールドに表示されているレコードの中から、さらに「A プランを提案した案件」に絞り込んでレコードを取得します。
そのため、さきほど記載したクエリに「A プラン」のみ取得できるようなクエリを書き足すと、以下のようなクエリが書けます。

17
const query = `顧客管理レコード番号_関連レコード紐付け用="${clientRecordId}" and 提案プラン in ("Aプラン")`;

集計の条件としている「提案プラン」はドロップダウンフィールドを用いているため、in 句で検索します。
詳細は、 複数のレコードを取得する を確認してください。

注意事項

  • 本記事のサンプルコードでは、100 件を超えるレコードの取得はできません。
  • 集計対象は条件に該当するすべてのレコードです。
    一度に関連レコード一覧フィールドへ表示する最大レコード数は関係しません。

変更履歴

  • 2018 年 12 月 12 日
    • 現在提供されているサンプルアプリに対応
    • 同期リクエストから非同期リクエストへコードを変更
information

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