Javascript to highlight negative values with red color and positive values with black color.

[Harpreet]

Hi,

I am using following script to hihlight values in my detail report page but it is giving partial result. As some of the positive values are also showing red.

 

<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock276'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>

[futurist]

Hi @Harpreet,

Can you try laying out the condition for innerHTML < 0 instead of relying just on the Else? Like so:

 

 

<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock276'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else if( isi.innerHTML< 0){
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>

[Harpreet]

nope it doesn't work

 

[autonumber]

Hi @Harpreet, I tried this on my end and it seems to be working as expected. Can you double-check if you are using the correct class in applying the code?

<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormDataCellNumberDate'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>

 

[Harpreet]

21 hours ago, autonumber said:

Hi @Harpreet, I tried this on my end and it seems to be working as expected. Can you double-check if you are using the correct class in applying the code?

<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormDataCellNumberDate'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>

 

<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormDataCellNumberDate cbFormBlock256'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>
For some of the blocks its working fine but for some its not

 

[autonumber]

Hi @Harpreet, can you try using this code? I just removed the 'cbFormBlock256' from the class. 

<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormDataCellNumberDate'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>

 

[Harpreet]

1 hour ago, autonumber said:

Hi @Harpreet, can you try using this code? I just removed the 'cbFormBlock256' from the class. 

<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormDataCellNumberDate'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>

 

But how will it take reference for which block  I need to color.

 

I am using details datapage not the tabular data page

[futurist]

Hi @Harpreet,

apparently you would have to parse the isi.innerHTML to integer first, because it seems like your values come with a decimal value by default (which means that they're float and no longer just integers; more on that here)

 

<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormDataCellNumberDate cbFormBlock256'] span");

if(parseInt(isi.innerHTML) >= 0 ){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>

[Harpreet]

1 hour ago, futurist said:

Hi @Harpreet,

apparently you would have to parse the isi.innerHTML to integer first, because it seems like your values come with a decimal value by default (which means that they're float and no longer just integers; more on that here)

 

<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormDataCellNumberDate cbFormBlock256'] span");

if(parseInt(isi.innerHTML) >= 0 ){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>

Thanks @futurist its work perfect now

 

[Harpreet]

Is there any shortcut that I can add multiple blocks in single script rather than copying script for each block

 

[futurist]

14 minutes ago, Harpreet said:

Is there any shortcut that I can add multiple blocks in single script rather than copying script for each block

 

You can use a For Loop script for this that goes through each of these blocks.

 

<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelectorAll("div[class*='cbFormDataCellNumberDate cbFormBlock'] span");

[].forEach.call(isi , function(is, i) {

if(parseInt(is.innerHTML) >= 0 ){
is.parentNode.style.backgroundColor = 'black';
is.style.color= 'white';
}
else{
is.parentNode.style.backgroundColor = 'red';
is.style.color= 'white';
}

});

});
</script>

 

What this script is gonna do is grab ALL blocks and apply the condition to them. However, I'm not sure about your workflow and whether you wanna apply the conditional styling to all blocks. If not, you would have to find a way to distinguish those blocks you need and blocks you don't. If there's a way to set them apart thru class or some other attribute, you can use that.

[futurist]

Hi @Harpreet,

You can do it by specifying  in the querySelectorAll which ones you wanna apply the script to:

 

<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelectorAll("div[class*='cbFormBlock4'] span, div[class*='cbFormBlock6'] span");

[].forEach.call(isi , function(is, i) {

if(parseInt(is.innerHTML) >= 0 ){
is.parentNode.style.backgroundColor = 'black';
is.style.color= 'white';
}
else{
is.parentNode.style.backgroundColor = 'red';
is.style.color= 'white';
}

});

});
</script>

 

You'll see that in the document.querySelectorAll, i specified two blocks, which are the 4th and 6th block. You can add here all of the blocks you need and separate them by a comma, and the code will go through only those records and apply the conditional styling.

 

 

the only tedious task here really is laying out all of the blocks you need to apply the conditional styling to, but once youve specified all of them, then thats it. youll no longer need to apply the same chunk of script to each block. it's definitely a cleaner code for you and easier to maintain

[Harpreet]

On 8/12/2022 at 3:38 PM, futurist said:

Hi @Harpreet,

You can do it by specifying  in the querySelectorAll which ones you wanna apply the script to:

 

<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelectorAll("div[class*='cbFormBlock4'] span, div[class*='cbFormBlock6'] span");

[].forEach.call(isi , function(is, i) {

if(parseInt(is.innerHTML) >= 0 ){
is.parentNode.style.backgroundColor = 'black';
is.style.color= 'white';
}
else{
is.parentNode.style.backgroundColor = 'red';
is.style.color= 'white';
}

});

});
</script>

 

You'll see that in the document.querySelectorAll, i specified two blocks, which are the 4th and 6th block. You can add here all of the blocks you need and separate them by a comma, and the code will go through only those records and apply the conditional styling.

 

 

the only tedious task here really is laying out all of the blocks you need to apply the conditional styling to, but once youve specified all of them, then thats it. youll no longer need to apply the same chunk of script to each block. it's definitely a cleaner code for you and easier to maintain

Thanks @futurist this works.

[Harpreet]

On 8/16/2022 at 2:08 PM, Harpreet said:

Thanks @futurist this works.

I Have uncheck the enable responsive button in datapage and now my scripts are not working.

The caspio team told me to find the new class for this "div[class*='cbFormBlock52'] span" for this code to work on the unresponsive mode.

Datapage https://c5bkr868.caspio.com/dp/a9f86000a5a08feb7f614bcda5c6

Can you help me with this.

 

My script is

 

 

<style>

.ST514CF67E6E4D4A9C9C2C8913625A88A0 .cbFormFieldCell{
width:100px !important;
height:30px !important;
}
.ST514CF67E6E4D4A9C9C2C8913625A88A0 .cbFormLabelCell{
width:135px !important;
height:30px !important;
}
.ST514CF67E6E4D4A9C9C2C8913625A88A0 .cbFormDataCellNumberDate{
width:100px !important;
height:30px !important;
}
.ST514CF67E6E4D4A9C9C2C8913625A88A0 .cbFormSelect{
width:100px !important;
height:30px !important;
}

.ST514CF67E6E4D4A9C9C2C8913625A88A0 .cbFormTextField{
width:100px !important;
height:30px !important;
}
.ST514CF67E6E4D4A9C9C2C8913625A88A0 .cbFormData{
width:100px !important;
height:30px !important;
}
.cbFormFieldCell {
border: 1px solid black !important;
}
.cbFormDataCellNumberDate{
width: auto !important;
border: 1px solid black !important;
}

</style>
<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock12'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>
<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock14'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>
<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock22'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>
<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock24'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>
<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock32'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>
<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock34'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>
<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock42'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>
<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock44'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>
<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock52'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>
<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock54'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>
<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock62'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>
<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock64'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>
<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock268'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>
<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.querySelector("div[class*='cbFormBlock276'] span");
if( isi.innerHTML>= 0){
isi.parentNode.style.backgroundColor = 'black';
isi.style.color= 'white';
}
else{
isi.parentNode.style.backgroundColor = 'red';
isi.style.color= 'white';
}
});
</script>

 

[futurist]

Hi @Harpreet,

it's a bit unclear to me what exactly you're trying to do, but i assume you're trying to look for the element div[class*='cbFormBlock52']  on the DataPage you provided. I checked, and that element is nonexistent. You can look for it by inspecting the element of your DataPage, going to the console, and pasting the following:

document.querySelector("div[class*='cbFormBlock52']")

 

what it does is look for a div element whose classname contains "cbFormBlock52", but there isnt one.

[Harpreet]

16 hours ago, futurist said:

Hi @Harpreet,

it's a bit unclear to me what exactly you're trying to do, but i assume you're trying to look for the element div[class*='cbFormBlock52']  on the DataPage you provided. I checked, and that element is nonexistent. You can look for it by inspecting the element of your DataPage, going to the console, and pasting the following:

document.querySelector("div[class*='cbFormBlock52']")

 

what it does is look for a div element whose classname contains "cbFormBlock52", but there isnt one.

https://c5bkr868.caspio.com/dp/a9f86000a5a08feb7f614bcda5c6

 

This is my data page and there are number of fields with name Hours and I would to mark background to red when value is less than zero and black when value is greater than zero.

 

 

This is detail datapage and I have disable the responsive tab 

[Tubby]

4 hours ago, Harpreet said:

https://c5bkr868.caspio.com/dp/a9f86000a5a08feb7f614bcda5c6

 

This is my data page and there are number of fields with name Hours and I would to mark background to red when value is less than zero and black when value is greater than zero.

 

 

This is detail datapage and I have disable the responsive tab 

Hi @Harpreet
I am guessing this is the same DataPage that you posted on the other thread. I provided a code there. Please check the link below:

I also noticed how you are using the codes and it seems that you are reusing it for different DataPages. That will not work. Every DataPage assigns a different block number for responsive DataPages. As mentioned by @futurist, you'll need to inspect which field do you need to customize. Also, try optimizing your scripts to run a loop instead of creating multiple instances of the same script just with a different class used.

[Flowers4Algernon]

Hello! Maybe this article could be helpful: https://howto.caspio.com/tech-tips-and-articles/how-to-dynamically-change-the-background-of-a-results-page/