関連レコードと合計を表示するテーブルの実装（３／５）
やりたいこと
アプリにテーブル形式で関連レコードの明細表示と金額フィールドの合計を表示します。テーブル形式の表示パーツに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(",");
}ユーザー選択フィールドからJavascriptで取得できるプロパティ情報は、
ログイン名（code）とユーザー名（name）だけの様です。
プロパティ名、user.nameの部分を user.code にすると、ログイン名を取得することが出来ます。
ユーザー顔写真の情報も取得しかったのですが、残念ながら方法が分かりませんでした。
（３）テーブルに読み込むデータの変換
データを型変換する関数の用意が整いましたので、テーブルの行データ読み込み処理で、フィールド値を引数にして型変換する関数をコールします。
tripleDigitSeparator関数の引数に合計費用フィールド「relatedItem04」を、getUserValues関数の引数に商談担当者フィールド「relatedItem05」をセットして、各関数の戻り値を行データ（tblData）にセットします。
field04: tripleDigitSeparator(record[relatedItem04].value),
field05: getUserValues(record[relatedItem05].value),
修正・追加したコードの概要は以下の通りです。
// 数字を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回では、案件名列の値に案件管理アプリのレコードを開くリンクを取り付ける仕組みを実装してみます。
予定外ですが、商談担当者の名前にもリンクを付けてユーザー情報のページを表示する機能も実装してみます。
今回も、最後まで読んで頂いてありがとうございました。
もし、本記事の内容に興味があり「続きを読みたい」という方がいらっしゃいましたら「スキ」や「フォロー」を頂けると励みになります。
どうぞよろしくお願いします。
いいなと思ったら応援しよう！
