やりたいこと

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

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

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

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

第３回：金額の３桁カンマ編集とユーザー選択フィールドの編集

第３回では、第2回で作成したKUC版読取り専用テーブルの「合計費用」列と「商談担当者」列の値が正しく表示できてない問題に対処します。

以下の画面ショットの赤枠で囲んだ部分が第2回の実行結果です。
「合計費用」列の３桁カンマ編集と、「商談担当者」列のユーザー選択フィールド（配列型）からユーザー名の値を取り出す処理を作ります。

（１）金額の３桁カンマ編集

金額を３桁カンマ編集する関数を作成します。
使用するメソッドは、toLocaleStringで、戻り値は文字列です。
操作対象は数値型なので念のためにNumber()で引数を囲っています。
関数名は「３ketakugiri」というダサイけど日本人に分かりやすい名前にしたのですが、「関数名の先頭に数字は使えません！」という英語のエラーが出て怒られてしまいましたので、「tripleDigitSeparator」にしました。

// 数字を3桁カンマ表示にする
function tripleDigitSeparator(Amount) {
    const formatNumber = Number(Amount).toLocaleString(); // 3桁区切り
    return formatNumber; 
}

（２）ユーザー選択フィールドからユーザー名を取り出す

商談担当者の列は、ユーザー選択フィールドです。
ユーザー選択フィールドは複数のユーザー情報（ログイン名、ユーザー名）を入力できる配列・オブジェクト型です。
配列・オブジェクト型のフィールド値を直接表示すると［object obuject］と表示されてしまうので、フィールド値からユーザー名だけを取り出して普通の文字列に変換します。

配列型のデータは、[配列名］.mapというメソッドで操作できます。
以下の関数は、ユーザー選択オブジェクト（配列型）からnameプロパティを取り出し、各要素を.joinメソッドでカンマ(",")で連結して1つの文字列にします（要素が1つだけの場合はカンマ(",")は付きません）。
関数の名前は「getUserValues」にしました。

    // ユーザーフィールドの値を取り出す
    function getUserValues(userArray) {
        return userArray.map(user => user.name).join(",");
    }

（３）テーブルに読み込むデータの変換

データを型変換する関数の用意が整いましたので、テーブルの行データ読み込み処理で、フィールド値を引数にして型変換する関数をコールします。

tripleDigitSeparator関数の引数に合計費用フィールド「relatedItem04」を、getUserValues関数の引数に商談担当者フィールド「relatedItem05」をセットして、各関数の戻り値を行データ（tblData）にセットします。

修正・追加したコードの概要は以下の通りです。

    // 数字を3桁カンマ表示にする
     function tripleDigitSeparator(Amount) {
        const formatNumber = Number(Amount).toLocaleString(); // 3桁区切り
        return formatNumber; 
    }

    // ユーザーフィールドの値を取り出す
    function getUserValues(userArray) {
        return userArray.map(user => user.name).join(",");
    }

    // レコードの取得と表示
    async function fetchAndDisplayRecords(relatedKey, spaceElement) {
        const appID = 123; //案件管理アプリのID番号
        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 tblData = [];
                resp.records.forEach((record, index) => {                        
                    tblData.push({
                        index: index,
                        field01: record[relatedItem01].value,
                        field02: record[relatedItem02].value,
                        field03: record[relatedItem03].value,
                        field04: tripleDigitSeparator(record[relatedItem04].value),
                        field05: getUserValues(record[relatedItem05].value),
                    });
                });
                //KUC版読取り専用テーブル表示
                createKUCReadOnlyTable(tblColumns, tblData, spaceElement);
            } else {
                spaceElement.innerHTML = '<b style="color: blue;">関連データがありません</b>';
            }
        } catch (error) {
            console.error(error);
            spaceElement.textContent = `データの取得中にエラーが発生しました: ${error.message}`;
        }
    }

修正後コードの実行結果

第３回の修正後コードで実行した結果は以下の通りです。
合計費用の列が３桁毎のカンマ区切り、商談担当者の列がユーザー名で表示される様になりました。

次回の予告

第３回で、KUC版読取り専用テーブルの表示が標準版の関連テーブルに近づいてきましたが、まだ、テーブルの行明細から案件管理アプリのレコードを開くリンク機能が未実装です。

次回の第4回では、案件名列の値に案件管理アプリのレコードを開くリンクを取り付ける仕組みを実装してみます。
予定外ですが、商談担当者の名前にもリンクを付けてユーザー情報のページを表示する機能も実装してみます。

今回も、最後まで読んで頂いてありがとうございました。

もし、本記事の内容に興味があり「続きを読みたい」という方がいらっしゃいましたら「スキ」や「フォロー」を頂けると励みになります。
どうぞよろしくお願いします。