Jump to content

Recommended Posts

I used code provided by Capsio to successfully change background color of table rows depending on the value of a field, but cannot figure out how to do the same to change the font color of text in a row as opposed to the background color. Here is the script for the background:

var isi = document.getElementById("visi[@field:UniqueFieldName]");

if('[@Yes/No FieldName]' == 'Yes'){

isi.parentNode.parentNode.style.backgroundColor = '#YesColor';

}

else{

isi.parentNode.parentNode.style.backgroundColor = '#NoColor';

}

How can I change this to change the font color? Your elp is appreciated. Thank you.

Link to post
Share on other sites
  • 2 weeks later...

Hi,

Try to insert next code:

<!–Tabular Report JavaScript:–>
<script>
var isi = document.getElementById("visi[@field:UniqueFieldName]");

var v_tr = isi.parentNode.parentNode;
var v_tds = v_tr.getElementsByTagName('td');
for(var v_i=0;v_i<v_tds.length;v_i++)
{
    if('[@Yes/No FieldName]' == 'Yes'){
    v_tds[v_i].style.color='#FontColorForYesRows';}
else{v_tds[v_i].style.color='#FontColorForNoRows';
}
}
if('[@Yes/No FieldName]' == 'Yes'){
v_tr.style.backgroundColor = '#BackgroundColorForYesRows';}
else{
v_tr.style.backgroundColor = '#BackgroundColorForNoRows';
}

</script> 

Let me know if this helps.

Link to post
Share on other sites
  • 7 years later...

Hello,

 

You may also want to consider this solution that involves a little less JS, but with some CSS

This is just a revised version of this howto article. The JavaScript controls the condition that adds to the class to the rows in the report. The CSS controls how the elements should be styled.

 

Add this code in an HTML Block:

<div id="visi-[@field:usz]"></div>

<script>

var isi = document.getElementById("visi-[@field:usz]");

if('[@field:usz]' == 'alpha'){
 isi.parentNode.parentNode.classList.add('custom-yes')
}

else{
 isi.parentNode.parentNode.classList.add('custom-no');
}

</script>

 

Add this code block in the Header:

<style>

[class*="custom-"] * {
  color: inherit !important;
}

.custom-yes {
  color: green;
  background-color: orange !important;
}

.custom-no {
  color: red;
  background-color: #46463c !important;
}

</style>

 

The upside on this practice is that we can easily style the given elements by adding/removing/modifying properties to rulesets.

 

Hope this helps.

-DN31337!

 

 

Link to post
Share on other sites
  • 11 months later...
On 8/14/2019 at 6:12 PM, DefinitelyNot31337 said:

Hello,

You may also want to consider this solution that involves a little less JS, but with some CSS

This is just a revised version of this howto article. The JavaScript controls the condition that adds to the class to the rows in the report. The CSS controls how the elements should be styled.

(...........)

 

Hello DefinitelyNot.... (or anyone that might help =)  )

 

I have used this code you provided, and I see it working

Can you explain how to adapt it so that instead of changing the row it can change only the cell?

 

In my case I need to change the color of the cells under the row "Días", (it is a Calculated Field 1) if the value displayed is > 7

no need to paint the row, only the cell

 

Thank you very much in advance!

image.thumb.png.773ca8d61f83e180a94cff54b581dcfc.png

 

Link to post
Share on other sites

Hi @maramedinan,

Solution provided above will not work unless the code placed in HTML block (row element).

I have created a different snippet for highlighting some particular cell that you can try. 

Please make sure that you replace number that refer to the column number in below code. Column count starts with "1".

The following code should go into DataPage Footer.

<script>

document.addEventListener('DataPageReady', function(event){

  let arr = document.querySelectorAll('td:nth-child(4).cbResultSetCalculatedField'); //change number of the column in "nth-child(4)"  

  arr.forEach(element => {


    if (element.innerHTML > 7) { // your target value
        
        element.style.background = 'red'; // color that would be applied on cell that meets the criteria
    }

  });

});

</script>

Hope this helps.

Regards,

Vitalikssssss

Link to post
Share on other sites
1 hour ago, Vitalikssssss said:

 

Thank you very much Vitaliksssss,

it is not working for me, maybe it is because i have grouping levels? I tried several several column numbers in "nth-child( )", but if I am not wrong it is column number 14.

here is a screenshot of my datapage, maybe I am doing something wrong, or you can give another idea

image.thumb.png.f179f3e61520921dcac286b765bfd20e.png

 

Link to post
Share on other sites
6 hours ago, Vitalikssssss said:

Hi @maramedinan,

I have found that the snippet of code on your Datapage has a syntax error.

You should put opening bracket "{"after (element.innerHTML > 7)

Regards,

Vitalikssssss

 

 

Yesss! Now it works.

I tried many times, and I am a bit lost, but I think that it works best if it is in a html block, anyway after trying many times now I don't really know, so I left if both in the html block and the html footer.  (such a rookie thing to do, but l will clean it later ).

It works nice, but it does something funny: on first load, on the first page you don't see the color, if you go to the second page, you see the color and if you go back to page one now you see it.

 

It would be nice to fix that bit, but so far it looks great.

 

Thank you very very much Vitaliksssssssssssssssssssssssssssssssss

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...