Background color for details records.

NDC ELOG November 20, 2020 09:45

Hi all, First of all, I thank you.plz help me.

Why in the Details page, I cannot fill the background color for that row if column [請求済] has [済] value and the error it shows is as follows.

3 followers

8 comments

Sean Tachibana November 21, 2020 20:38 0 votes

Hi NDC,

From what I see in the processing, it looks like you're trying to color it using the event object,

but you can not use the information in the event object to change the decoration information.

It seems like you put the value in tablerecords and output it to the console, but it doesn't have the style information.

Therefore, you need to get the DOM information and color it in the same way as we change the progress information's text color.

Hopefully, this helps.

NDC ELOG November 25, 2020 04:43 0 votes

Hello Sean Tachibana,

I have only set the background color for position i of the vertical row, how can I color horizontally, according to the positions of the variables: elStatus1,elStatus2,elStatus3,...

Yuzo Arai November 25, 2020 21:58 1 vote

Hello NDC,

For rows, you need to set up class attributes to the tr elements.

Eg.
JavaScript File


case '1st row' :
el.rows[i].classList.add("first");

CSS File


.first {
background-color:#7AE1FF;
}

NDC ELOG November 26, 2020 03:04 0 votes

Hello Yuzo Arai,

Can you show me more how can i query for tr of table 1 (currently i have 4 tables for this page), i have tried but i don't know how to run.

Thanks you./..

NDC ELOG November 26, 2020 08:24 0 votes

Hello Yuzo Arai,

Here is the code I just tried again.

Thank you for your help.

Sean Tachibana November 28, 2020 15:51 0 votes

Hi NDC,

As Yuzo commented above, if you want to manipulate the lines together, the tr element is in the form of manipulation.

I'm not quite sure where you want me to explain in details, but you can change the background color of a row by processing it as follows.

Sample to make the background color of a row red

※Please set up jQuery as well.

(function($) {

"use strict";

kintone.events.on("app.record.detail.show", function(e) {



setTimeout(changeColor, 900);



});



function changeColor() {

var tr = $(kintone.app.record.getFieldElement('field code of the table')).find('tr');

$(tr[row number to be changed]).css('background-color', 'red');

}



})(jQuery);

If you make the "row number to be changed" part above as a variable and specify the row according to the other processing, will it be close to the desired processing?

Also, as for the elements, you don't have to get them with getFieldElement, but the app's DOM information is unknown, so I get it in this form.

The settimeout is simply waiting for the table to be described, so it depends on the app situation.

So the number 900 is not important.

NDC ELOG December 02, 2020 01:11 0 votes

Hi Sean Tachibana,

hi, i will try it after i do the more needed functions, thank you.

NDC ELOG December 09, 2020 08:10 0 votes

Hi Sean Tachibana, Yuzo Arai

i can do it, Thanks, you've been very kind.