関連レコードと合計を表示するテーブルの実装（５／５）

2024年4月23日 15:51

やりたいこと

アプリにテーブル形式で関連レコードの明細表示と金額フィールドの合計を表示します。テーブル形式の表示パーツにkintone UI Component v1の部品ReadOnlyTable利用して、Kintoneライクな外見で表示します。

※本記事では「KUC版読取り専用テーブル」と呼びます。
※サンプルとしてKintoneアプリストアの「営業支援パック」を使用します。

今回のカスタマイズは、全体で120行を超える大きなコードになりますので、手順を分割して全部で５回のシリーズで公開しています。
今回は第５回目です（過去記事は以下のリンクから参照可能です）。

第１回：KUC版読取り専用テーブルの仕組み
 第２回：他アプリのデータをKUC版読取り専用テーブルに読み込む
 第３回：金額の３桁カンマ編集とユーザー選択フィールドの編集
 第４回：案件名に案件レコードのリンクを貼り付ける
第５回：金額フィールドの合計を計算して表示する（今回）

第５回：金額フィールドの合計を計算して表示する

第５回（最終回）では、標準の関連テーブルには無い機能、テーブルデータを合計して表示する機能を実装します。
具体的には、テーブルの費用合計の列を集計して合計を表示します。

１．アプリの準備

「営業支援パック」の顧客管理アプリのフォーム設定画面を開いて、
案件一覧（標準の関連レコードフィールド）の上にスペースを追加して、
スペース要素ＩＤに「total_space」を追加して下さい。
※テーブルの表示が乱れない様にスペースは十分な幅を取ってください。
＜KUC版読取り専用テーブルの動作試験用アプリ＞
・スペース　　：要素ID：Related_space（第2回で追加済み）
・スペース　　：要素ID：total_space　（今回追加）

合計金額表示用のスペース（total_space）を別途用意する理由は、kintone UI Component v1のコンポーネントの表示領域に他のHTML要素が混在すると、予期しない不具合が起きる可能性があるためです。

実際に既存のKUC版読取り専用テーブル表示用スペース（Related_space）に合計金額のHTML要素を追加したら、KUC版読取り専用テーブルプロパティの一部（paginationの表示／非表示）が正常に作用しない現象が発生しました。

２．Javascriptコードの変更

（１）初期設定の変更

関連付けするアプリIDとフィールドの初期設定、関連レコードの出力しペースに「合計金額」の出力スペース名も追加します。
以下に初期設定部分の修正後のコードを掲載します。

//関連付けするアプリのID番号
const relAppid = 123; 

// 関連付けフィールドの初期設定
const relatedKeycode = '顧客管理レコード番号_関連レコード紐付け用';
const relatedItem01  = '案件名';
const relatedItem02  = '確度';
const relatedItem03  = '受注予定日';
const relatedItem04  = '合計費用';
const relatedItem05  = '商談担当者';

//関連レコードの出力スペース
const resultSpaceId = 'Related_space'; // KUC版テーブル表示スペース
const totalSpaceId  = 'total_space';   // 合計金額表示スペース
// <---  初期設定ここまで --->

（２）レコード取得と表示関数の変更点

関数の引数に合計金額表示スペース（totalElement）を追加
レコード数繰り返し処理前に合計金額集計用の変数の初期化
レコード数繰り返し処理中に合計の集計ロジックを追加
合計の表示ロジックを追加

上記の変更・追加箇所を赤字で表示します。
（noteでは文字色を付けられないので、画像で投稿しています）

修正後のコードは以下の通りです。

// レコードの取得と表示
async function fetchAndDisplayRecords(relatedKey, tableElement, totalElement) {
    const appID = relAppid;
    const query = `${relatedKeycode} in ("${relatedKey}") order by ${relatedItem04} desc`;

    try {
        const resp = await kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
            app: appID,
            query: query
        });

        if (resp.records.length > 0) {
            let total = 0;    // 合計金額の初期化
            let tblData = []; // テーブル行プロパティの初期化
            // レコード数の繰り返し処理
            resp.records.forEach((record, index) => {                        
                tblData.push({
                    index: index,
                    field01: recordLinkset(record[relatedItem01].value,appID,record.$id.value),
                    field02: record[relatedItem02].value,
                    field03: record[relatedItem03].value,
                    field04: tripleDigitSeparator(record[relatedItem04].value),
                    field05: getUserValues(record[relatedItem05].value),
                });
                total += Number(record[relatedItem04].value); // 合計の集計
            });
            // KUC版読取り専用テーブル表示
            tableElement.innerHTML = ''; // 結果表示スペースの初期化
            createKUCReadOnlyTable(tblColumns, tblData, tableElement);
            // 合計の表示
            totalElement.innerHTML = ''; // 合計表示スペースの初期化
            const sumString = tripleDigitSeparator(total); // 3桁カンマ編集
            totalElement.innerHTML = '<b style="color: blue;">　合計金額：' + sumString + '</b>';
        } else {
            tableElement.innerHTML = '<b style="color: blue;">関連データがありません</b>';
        }
    } catch (error) {
        console.error(error);
        tableElement.textContent = `データの取得中にエラーが発生しました: ${error.message}`;
    }
}

（３）動作イベント処理の変更

合計金額表示スペース取得の処理追加
スペース要素チェックロジックの追加
レコード取得と表示関数の引数に合計表示スペースを追加

上記の１番と３番の変更・追加箇所を「赤色」で表示します。
２番は文字数が多いので「青色」で表示しています。
（noteでは文字色を付けられないので、画像で投稿しています）

修正後のコードは以下の通りです。

// 動作イベントの設定
kintone.events.on(['app.record.edit.show', 'app.record.detail.show'], function (event) {
    const tableElement = kintone.app.record.getSpaceElement(resultSpaceId); // テーブル表示スペースの取得
    const totalElement = kintone.app.record.getSpaceElement(totalSpaceId);  // 合計金額表示スペースの取得
    // スペース要素のチェック
    switch (true) {
        case !tableElement && !totalElement:
            console.error('指定スペース要素が見つかりません: ' + resultSpaceId + ' & ' + totalSpaceId);
            break;
        case !tableElement:
            console.error('指定スペース要素が見つかりません: ' + resultSpaceId);
            break;
        case !totalElement:
            console.error('指定スペース要素が見つかりません: ' + totalSpaceId);
            break;
        default:
            // エラー無しの処理
            break;
    }
    // 関連付Key（レコード番号）で検索とテーブル明細・合計表示
    const relatedKey = kintone.app.record.getId();
    fetchAndDisplayRecords(relatedKey, tableElement, totalElement);
    return event;
});

（４）実装後のデモ画面

第５回（最終回）の修正コードを実装したデモ画面です。
表示するレコードの切り替えで合計金額が集計・表示されています。

プロパティ変更のデモ画面

「KUC版読取り専用テーブル」のプロパティ変更のデモ画面です。
デモ画面では、チェックボックスがチェックされた列だけを表示する様に、チェックボックスのchangイベントで、列要素のvisibleプロパティを変更しています。Column[列番号].visible=true/false で操作可能です。

カスタマイズした感想

今回（第５回）で、kintone UI Component v1のコンポーネントReadOnlyTable（記事内では「KUC版読取り専用テーブル」と呼んでます）を利用した関連レコード表示のカスタマイズの説明は終了です。

kintone UI Component v1のコンポーネントを使わずにHTML<TABLE>タグを用いても似たような機能は実装可能ですが、KintoneライクなＵＩデザインが簡単に使えること、コンポーネントのプロパティ変更で、テーブルのタイトル、行数、列の表示／非表示を変更できる利便性があります。
テーブル列の合計以外に、平均、最大値、最小値を計算して表示することもやろうと思えば実現可能です。

本シリーズの連載を最後まで読んで頂いてありがとうございました。

よろしければサポートお願いします！いただいたサポートは、note記事制作の活動費に使わせていただきます！