自作した「N:N(複数対複数)の関連レコード一覧」内の文字列(複数行)フィールドとユーザー選択フィールドについて

いつも参考にさせて頂いております。

N:N(複数対複数)の関連レコード一覧を自作する

上記記事のコードを少しだけ編集して表示項目(テーブルの列)を増やし、

作りたかったN:Nの関連レコード一覧を作ることはできました。

その上で、2点ご教示頂けますと幸いです。

 

【1】

文字列(複数行)フィールドをこの関連レコード一覧に表示すると

改行が無い状態での表示になってしまいます。

(参照元フィールドで改行が入っている箇所にスペースが入っているように見えます)

これを本来の改行を反映した状態で表示することは可能でしょうか?

 

【2】

この関連レコード一覧にユーザー選択フィールドを表示しようとするとエラーが出て、何も表示されないただのスペースフィールドになってしまいます。

クロームのコンソールで見ると、

Uncaught (in promise) TypeError: str.replace is not a function
at escapeHtml

となっており、ユーザー選択フィールドの表示をやめる(コードから削除する)とこのエラーは消え、希望通り動作します。

このエラーを回避して、ユーザー選択フィールドも表示する方法はありますでしょうか?

 

もし可能でしたら、参考URLやコードをご教示頂けますと幸いです。

どうぞよろしくお願いいたします。

こんにちは!

【1】については、CSSの
white-space: pre-line
を追加すれば良いと思います。

【2】についてはエラーメッセージによると
書かれたコード内の str.replaceあたりにエラーの原因があると思うので、
その前後のコードを問題ない範囲で貼り付けてもらえると分かるかもしれません。

juridon様

コメントありがとうございます!

【1】の追加するCSSについて教えていただけますでしょうか。

ほぼそのまま転用させて頂いている参考記事の説明に沿って、

このカスタマイズを加えているアプリに読み込ませているCSSはこちらなのですが

この中にwhite-space: pre-lineを書き加えることになるのでしょうか?

 

【2】str.replaceあたりのコード

str.replaceあたりのコードについては、参考元のコードから手を加えていないので

そこでエラーが出ること自体、なぜ?という感じです…。

質問しておいて大変申し訳ないのですが、質問時のエラーが出たバージョンのコードを上書きしてしまっており

今また再現用にユーザー選択フィールドを書き足したJS作ったのですが、

それをアプリに適用すると、質問時とはまた違うエラーメッセージ

Uncaught SyntaxError: missing ) after argument list download.do:97

が出て、スペースフィールドに何も表示されない(見た目の結果は質問時と同じ)ようになりました。

このエラーはこのカスタマイズとは別のコード内で起きている?のかと思いますが、さっぱり分かりません。。

全文貼らせていただきますので、解決策がありそうでしたらご教示いただけますと幸いです。

 

「サイト情報」アプリのレコードのsite_loc(フィールドコード)と

「商談報告」アプリのレコードのsite_loc(フィールドコード)が一致するとき

「商談報告」のレコードから商談日、商談相手、目的、商談内容・所感、報告者を関連レコード一覧のような感じで

「サイト情報」のレコードのスペースフィールドに表示する。

・・・ようにしたいけど、報告者(ユーザー選択フィールド)を入れるとうまく動かない、というコードです。

/*
* N:N(複数対複数)の関連レコード一覧を自作する
* Copyright (c) 2018 Cybozu
*
* Licensed under the MIT License
*
*
*/
(function() {
'use strict';
kintone.events.on(['app.record.detail.show', 'app.record.edit.show'], function(event) {
var record = event.record;
// 増殖バグ回避
if (document.getElementById('syoudan') !== null) {
return event;
}
// To HTML escape
function escapeHtml(str) {
return str
.replace(/&/g, '&')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
// スペースを取得
var subtableSpace = kintone.app.record.getSpaceElement('syoudan');
// Rest API
var params = {
'app': '7',
'query': 'site_loc in ("' + record.site_loc.value + '") order by syoudan_no asc limit 500',
'fields': ['$id', '商談日', '商談相手', '目的', '商談内容・所感', '報告者ユーザー選択']
};
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params).then(function(resp) {
// success:生徒一覧を表示する
var tableRecords = resp.records;
var studentTable = '<table class="kintoneplugin-table">';
studentTable += '<thead>';
studentTable += '<tr>';
studentTable += '<th class="kintoneplugin-table-th" style="width: 210px;">';
studentTable += '<span class="title">';
studentTable += '商談日';
studentTable += '</span>';
studentTable += '</th>';
studentTable += '<th class="kintoneplugin-table-th" style="width: 300px;">';
studentTable += '<span class="title">';
studentTable += '商談相手';
studentTable += '</span>';
studentTable += '</th>';

studentTable += '<th class="kintoneplugin-table-th" style="width: 300px;">';
studentTable += '<span class="title">';
studentTable += '目的';
studentTable += '</span>';
studentTable += '</th>';

studentTable += '<th class="kintoneplugin-table-th" style="width: 800px;">';
studentTable += '<span class="title">';
studentTable += '商談内容・所感';
studentTable += '</span>';
studentTable += '</th>';

studentTable += '<th class="kintoneplugin-table-th" style="width: 250px;">';
studentTable += '<span class="title">';
studentTable += '報告者';
studentTable += '</span>';
studentTable += '</th>';

studentTable += '</tr>';
studentTable += '</thead>';
studentTable += '<tbody>';
for (var i = 0; i < tableRecords.length; i++) {
studentTable += '<tr>';
studentTable += '<td>';
studentTable += '<div class="kintoneplugin-table-td-control">';
studentTable += '<a href="/k/7/show#record=' + escapeHtml(tableRecords[i].$id.value);
studentTable += '" target="_blank">';
studentTable += escapeHtml(tableRecords[i].商談日.value);
studentTable += '</a>';
studentTable += '</div>';
studentTable += '</td>';

studentTable += '<td>';
studentTable += '<div class="kintoneplugin-table-td-control">';
studentTable += escapeHtml(tableRecords[i].商談相手.value);
studentTable += '</div>';
studentTable += '</td>';

studentTable += '<td>';
studentTable += '<div class="kintoneplugin-table-td-control">';
studentTable += escapeHtml(tableRecords[i].目的.value);
studentTable += '</div>';
studentTable += '</td>';

studentTable += '<td>';
studentTable += '<div class="kintoneplugin-table-td-control">';
studentTable += escapeHtml(tableRecords[i].商談内容・所感.value);
studentTable += '</div>';
studentTable += '</td>';

studentTable += '<td>';
studentTable += '<div class="kintoneplugin-table-td-control">';
studentTable += escapeHtml(tableRecords[i].報告者ユーザー選択.value);
studentTable += '</div>';
studentTable += '</td>';

studentTable += '</tr>';
}
studentTable += '</tbody>';
studentTable += '</table>';
subtableSpace.innerHTML = studentTable;
}, function(error) {
// error:エラーの場合はメッセージを表示する
var errmsg = 'レコード取得時にエラーが発生しました。';
// レスポンスにエラーメッセージが含まれる場合はメッセージを表示する
if (typeof error.message !== 'undefined') {
errmsg += '' + error.message;
}
subtableSpace.appendChild(document.createTextNode(errmsg));
});
return event;
});
})();

 

 

 

juridon様

 

度々申し訳ございません。

【1】については、解決いたしました!

読み込ませている 51-modern-default.css 内の kintoneplugin-table-td-control の部分に

教えていただいた white-space: pre-line を加えることで参照元の通りに改行できました。

大変助かりました。ありがとうございました。

こんにちは!

【1】うまくいったのですね!良かったです^^

【2】はユーザー選択が表示できないということですね。
(コードの貼り付けありがとうございます。)

ユーザー選択ふぃーるどは↓こんな感じの構造になっています(詳しくはフィールド形式 をご参照下さい)

"<フィールドコード>": {
"type": "USER_SELECT",
"value": [
{
"code": "sato",
"name": "Noboru Sato"

},
{
"code": "kato",
"name": "Misaki Kato"
}
]
}

 

すると、

tableRecords[i].報告者ユーザー選択.value では値が取れないので、

tableRecords[i].報告者ユーザー選択.value[0].code

tableRecords[i].報告者ユーザー選択.value[0].name
のようにすると良いかと思います。

複数人選ばれている場合はforやforeachでループしないといけないかもですが^^;

ご参考になれば幸いです~!

juridon様

 

ご丁寧に教えていただき誠にありがとうございます。

tableRecords[i].報告者ユーザー選択.value[0].name のほうで、やりたいこと実現できました!

このフィールドについては複数人選択されていることはほぼ無いし、あっても最初の1人表示されていれば問題はないので

ループ処理は今回は入れずに採用としました。

 

答えが分かってしまえば【1】も【2】もとても簡単に解決できましたが

自分だけでは答えに辿り着けなかったので、大変助かりました。

あと単純に、思ってたことができて嬉しいです!本当にありがとうございました。