Jump to content
  • 0

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


Harpreet
 Share

Question

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>

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

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>

Link to comment
Share on other sites

  • 0

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>

image.png.d00bbc1ea777b83c456de058d32ad621.png

image.png.2d21e182255cf7abf22420ad3d72d33f.png

 

Link to comment
Share on other sites

  • 0
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>

image.png.d00bbc1ea777b83c456de058d32ad621.png

image.png.2d21e182255cf7abf22420ad3d72d33f.png

 

image.png.fa23759d4756673b4383475ed2baffc0.png

<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

 

Link to comment
Share on other sites

  • 0

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>

 

Link to comment
Share on other sites

  • 0
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

Link to comment
Share on other sites

  • 0

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>

Link to comment
Share on other sites

  • 0
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

 

Link to comment
Share on other sites

  • 0
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.

Link to comment
Share on other sites

  • 0

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.

 

image.png.561665440e8f176cb3a70910297a1345.png

 

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

Link to comment
Share on other sites

  • 0
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.

 

image.png.561665440e8f176cb3a70910297a1345.png

 

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.

Link to comment
Share on other sites

  • 0
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>


 

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0
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.

 

 image.png.1202228de8ba1a166b70d40b96c9b393.png

This is detail datapage and I have disable the responsive tab image.png.0b33b32dff1ff7c8a81f777056c242ef.png

Link to comment
Share on other sites

  • 0
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.

 

 image.png.1202228de8ba1a166b70d40b96c9b393.png

This is detail datapage and I have disable the responsive tab image.png.0b33b32dff1ff7c8a81f777056c242ef.png

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.

Link to comment
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
Answer this question...

×   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...
 Share

×
×
  • Create New...