Tips

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

目次

はじめに

固定リンクがコピーされました

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

デモ環境

固定リンクがコピーされました

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

ログイン情報は 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で動作を確認しています。