■参考にしていた文書
https://cybozudev.zendesk.com/hc/ja/community/posts/202144854-詳細画面のサブテーブルの表の各セルの色を変更する方法について
■ やりたいこと
レコード内にテーブルを作成し、案件管理をしています。
テーブルには「対応済み」というフラグを立てるところがあり、「対応済み」があれば、JavaScriptからCSS上書きでTRのカラーを指定しグレーアウトしたいと考えています。
そもそも技術的に可能なのでしょうか。。。
またコードの書き方がいまいち判らず、ヒントを頂ければと思います。
↑例えば、取り組み中止とテーブルで表示された行をその行ごとグレーアウトにしたいです。
よろしくお願いします。
大西 範知さん
>テーブルには「対応済み」というフラグを立てるところがあり、「対応済み」があれば、JavaScriptからCSS上書きでTRのカラーを指定しグレーアウトしたいと考えています。
>そもそも技術的に可能なのでしょうか。。。
可能です。
現状作成しているソースコードがあると問題点がわかるかと思いますので、記載頂けると助かります。
ご返信ありがとうございます。
そもそものやり方のところから理解できておらず、まだソースコードを書けていません。(すいません。
https://js.cybozu.com/jquery/1.11.2/jquery.min.js
↑現状は、これをアプリにアップロードしたところで止まってしまっています。
なんとなくイメージしていたソースですが、
まったく見当違いのことをしてますかね。。。？
kintone.events.on([‘app.record.detail.show’], function(event) {
var ths = $(kintone.app.record.getFieldElement(“取り組み中止”)).find(‘td’);
trs[2].style.color = ‘#ccc’
return event;
});
大西 範知 さん
ありがとうございます。
修正する必要がありそうな部分としては、getFieldElement()はテーブル内のフィールドに利用できないのと、
テーブル内の行ごとに処理をするので、繰り返し処理を行う必要があります。
過去のコミュニティでも投稿されていましたのでこちらを参考にしてみてください。
https://cybozudev.zendesk.com/hc/ja/community/posts/202144854
ありがとうございます。
自分のレベルでは実装出来そうにないので諦めることにしました。
わざわざありがとうございました。
すいません。他力本願で少しコードを進めてみました。
ループと文字列マッチングし、特定の行までは割り出せたのですが、
CSSで色づけがどうしても出来ない状況です。
jQuery.noConflict();
(function($) {
“use strict”;
// kintone.events.on(“app.record.index.show”, function(e) {
// });
kintone.events.on([‘app.record.detail.show’], function(event) {
var tableRecords = event.record.商談履歴.value;
for (var j = 0; j < tableRecords.length ; j++) {
if (!event.record) {
return;
}
var secondItemName = tableRecords[j].value[‘対応状況’].value;
if ( secondItemName == ‘取り組み中止’ ) {
var el1 = $(‘table tr:nth-child(’+j+‘)’);
$(el1[1]).css(‘color’,‘Red’);
}
}
return event;
});
})(jQuery);
大西 範知 さん
"detail.show"の時点ではまだサブテーブルのHTMLが用意されていないので、setTimeout()でスリープ処理をいれると良さそうです。
以下サンプルになりますので参考にしてみてください。
jQuery.noConflict();
(function($) {
"use strict";
// サブテーブルの特定の行数の色を変更する
function changeColor(arg) {
var tr = $(kintone.app.record.getFieldElement('商談履歴')).find('tr');
var target = arg[0];
for (var i = 0; target.length > i; i++) {
var row = target[i]; // 色を変える行数を取得
$(tr[row]).css('background-color', 'red');
}
}
kintone.events.on(['app.record.detail.show'], function(event) {
var targetRow = []; // 色変え対象の行番号
var tableRecords = event.record['商談履歴'].value;
for (var j = 0; j < tableRecords.length; j++) {
var secondItemName = tableRecords[j].value['対応状況'].value;
if (secondItemName == '取り組み中止') {
targetRow.push(j+1);
}
}
// サブテーブルのhtmlが表示されるまで0.5秒待つ
setTimeout(changeColor, 500, [targetRow]);
return event;
});
})(jQuery);
ありがとうございます。
やっとやりたいことが出来ました。ありがとうございます。
> setTimeout(changeColor, 500, [targetRow]);
たまに表示されない時があったので 500 ⇒ 1000に変更してみました。
少し改造させて頂き、複数の文字列にも対応させてみました。
jQuery.noConflict();
(function($) {
// サブテーブルの特定の行数の色を変更する
function changeColor01(arg) {
var tr = $(kintone.app.record.getFieldElement('商談履歴')).find('tr');
var target = arg[0];
for (var i = 0; target.length > i; i++) {
var row = target[i]; // 色を変える行数を取得
$(tr[row]).css('background-color', '#888');
}
}
// サブテーブルの特定の行数の色を変更する
function changeColor02(arg) {
var tr = $(kintone.app.record.getFieldElement('商談履歴')).find('tr');
var target = arg[0];
for (var i = 0; target.length > i; i++) {
var row = target[i]; // 色を変える行数を取得
$(tr[row]).css('background-color', '#ffc0cb');
}
}
kintone.events.on(['app.record.detail.show'], function(event) {
var targetRow1 = []; // 色変え対象の行番号
var targetRow2 = []; // 色変え対象の行番号
var tableRecords = event.record['商談履歴'].value;
for (var j = 0; j < tableRecords.length; j++) {
var secondItemName = tableRecords[j].value['対応状況'].value;
if (secondItemName == '取り組み中止') {
targetRow1.push(j+1);
}
if (secondItemName == '対応中') {
targetRow2.push(j+1);
}
}
// サブテーブルのhtmlが表示されるまで1秒待つ
setTimeout(changeColor01, 1000, [targetRow1]);
setTimeout(changeColor02, 1000, [targetRow2]);
return event;
});
})(jQuery);
大西 範知 さん
さらにカスタマイズとはすばらしいです！ いい出来ですね。
こんな感じもアリかと。以下例は、テーブルの1列目に入ってる文字をjQueryのセレクタで指定して、そのままcssを指定しています。
テーブルの2列目であれば「nth-child(1)」を「nth-child(2)」にすればOKです。
まぁまぁスッキリしたかと。
jQuery.noConflict();
(function($) {
“use strict”;
// テーブルの1列目に指定のテキストが入っていたらtr全体を網掛け
function set_color(){
$(“td:nth-child(1):contains(‘取り組み中止’)”).closest(‘tr’).css(‘background-color’,‘#888’);
$(“td:nth-child(1):contains(‘対応中’)”).closest(‘tr’).css(‘background-color’,‘red’);
}
// 閲覧画面表示イベント
kintone.events.on(“app.record.detail.show”, function(e) {
// テーブルが表示されるであろう1秒後に実行
setTimeout( set_color , 1000 );
});
})(jQuery);
ご回答ありがとうございます。
コードがだいぶスッキリしてますね。
アプリを複製して試してみたいと思います。