Dynamically Change Background Color of Fields in Details DataPage

[Tubby]

I am trying to use the script in this article: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/ to a Details DataPage that I have. I am using the script for tabular reports. However, as it is designed for tables, it only applies the script to a single field. I have basic understanding of scripts but not by much so I am struggling to modify it and use it on my DataPage. 

Current Script that is only applying to a single field:

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

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

The thought is to make the background color of the field red and the font black if it contains any value. Otherwise make it yellow/black. I also am aware of the different class names for numbers/dates.

Any ideas are welcome. Thank you!

[Harpreet]

On 8/6/2022 at 5:13 PM, Tubby said:

I am trying to use the script in this article: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/ to a Details DataPage that I have. I am using the script for tabular reports. However, as it is designed for tables, it only applies the script to a single field. I have basic understanding of scripts but not by much so I am struggling to modify it and use it on my DataPage. 

Current Script that is only applying to a single field:

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

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

The thought is to make the background color of the field red and the font black if it contains any value. Otherwise make it yellow/black. I also am aware of the different class names for numbers/dates.

Any ideas are welcome. Thank you!

Did you find any solution

 

[Kurumi]

Hi @Tubby and @Harpreet - you can try this sample code:

<script>

document.addEventListener('DataPageReady', function (event) {
  
// display fields

var disp= document.querySelectorAll("div[class*='cbFormDataCell'] span");

[].forEach.call(disp, function(disp, i) {

if( disp.innerHTML== "&nbsp;"){
disp.parentNode.style.backgroundColor = 'transparent';
}
else {
disp.parentNode.style.backgroundColor = 'red';
disp.parentNode.style.color= 'black';
}
});
  
// display date fields

var num= document.querySelectorAll("div[class*='cbFormDataCellNumberDate'] time");

[].forEach.call(num, function(num, i) {

if( num.innerHTML== "&nbsp;"){
num.parentNode.style.backgroundColor = 'transparent';
}
else {
num.parentNode.style.backgroundColor = 'red';
num.parentNode.style.color= 'black';
}
});

// input fields

var inp= document.querySelectorAll("div[class*='cbFormFieldCell'] input[type='text']");

[].forEach.call(inp, function(inp, i) {

if( inp.value== ""){
inp.parentNode.style.backgroundColor = 'transparent';
}
else {
inp.parentNode.style.backgroundColor = 'red';
inp.parentNode.style.color= 'black';
}
});
  
// checkbox fields

var cbox= document.querySelectorAll("input[type='checkbox']");

[].forEach.call(cbox, function(cbox, i) {

if( cbox.checked == false){
cbox.parentNode.parentNode.style.backgroundColor = 'transparent';
}
else {
cbox.parentNode.parentNode.style.backgroundColor = 'red';
cbox.parentNode.parentNode.style.color= 'black';
}
});

});
</script>

 

[Tubby]

17 hours ago, Meekeee said:

Hi @Tubby and @Harpreet - you can try this sample code:

<script>

document.addEventListener('DataPageReady', function (event) {
  
// display fields

var disp= document.querySelectorAll("div[class*='cbFormDataCell'] span");

[].forEach.call(disp, function(disp, i) {

if( disp.innerHTML== "&nbsp;"){
disp.parentNode.style.backgroundColor = 'transparent';
}
else {
disp.parentNode.style.backgroundColor = 'red';
disp.parentNode.style.color= 'black';
}
});
  
// display date fields

var num= document.querySelectorAll("div[class*='cbFormDataCellNumberDate'] time");

[].forEach.call(num, function(num, i) {

if( num.innerHTML== "&nbsp;"){
num.parentNode.style.backgroundColor = 'transparent';
}
else {
num.parentNode.style.backgroundColor = 'red';
num.parentNode.style.color= 'black';
}
});

// input fields

var inp= document.querySelectorAll("div[class*='cbFormFieldCell'] input[type='text']");

[].forEach.call(inp, function(inp, i) {

if( inp.value== ""){
inp.parentNode.style.backgroundColor = 'transparent';
}
else {
inp.parentNode.style.backgroundColor = 'red';
inp.parentNode.style.color= 'black';
}
});
  
// checkbox fields

var cbox= document.querySelectorAll("input[type='checkbox']");

[].forEach.call(cbox, function(cbox, i) {

if( cbox.checked == false){
cbox.parentNode.parentNode.style.backgroundColor = 'transparent';
}
else {
cbox.parentNode.parentNode.style.backgroundColor = 'red';
cbox.parentNode.parentNode.style.color= 'black';
}
});

});
</script>

 

Woah, thank you so much @Meekeee! This actually works better than I expected. Even the checkbox are color coded!

[Harpreet]

On 8/13/2022 at 12:55 PM, Tubby said:

Woah, thank you so much @Meekeee! This actually works better than I expected. Even the checkbox are color coded!

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>

[Tubby]

58 minutes ago, Harpreet said:

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>

Hello there
For one, the script that you are using seems to only be applicable to a single field with the class "cbFormBlock276" so I don't think that will work for all of your fields if that is what you want. Notice how the scripts above are using 

querySelectorAll

And 

[].forEach.call()

This loops and gets all fields with the same class to apply the styling to each matching field.

Care sharing your DataPage's deploy link so we can see what classes do you need to call through the loop?

[Harpreet]

18 hours ago, Tubby said:

Hello there
For one, the script that you are using seems to only be applicable to a single field with the class "cbFormBlock276" so I don't think that will work for all of your fields if that is what you want. Notice how the scripts above are using 

querySelectorAll

And 

[].forEach.call()

This loops and gets all fields with the same class to apply the styling to each matching field.

Care sharing your DataPage's deploy link so we can see what classes do you need to call through the loop?

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 

I manage to make it something like this:


If this is what you want then the code is here:

<script>
document.addEventListener('DataPageReady', function (event) {

var num= document.querySelectorAll("td[class*='cbFormDataCellNumberDate'] span");

[].forEach.call(num, function(num, i) {

if( num.innerHTML .replace(/\,/g,'') >= 0){
num.parentNode.style.backgroundColor = 'black';
num.style.color= 'white';
}
else {
num.parentNode.style.backgroundColor = 'red';
num.style.color= 'white';
}
});
});
</script>

If you hit f12 or right click and choose inspect, you can see the class pretty easily:



I noticed that all of them are basically the same so I used that class, then changed "div" to "td" as you can see it is a td element, maybe due to responsive being disabled. Then the foreach will loop through all of them and apply the script. The kind of difficult part of this is why some values stay uncolored when they are positive values. But then I noticed you have a comma grouping selected for numbers more than 999. So I put  .replace(/\,/g,'') to replace the comma with nothing. 

I hope this is what you are looking for.

[Tubby]

Hi guys, just wanted to share this function that I was able to create using the same approach from Meekee in this comment here:

On 8/12/2022 at 4:24 PM, Meekeee said:

Hi @Tubby and @Harpreet - you can try this sample code:

<script>

document.addEventListener('DataPageReady', function (event) {
  
// display fields

var disp= document.querySelectorAll("div[class*='cbFormDataCell'] span");

[].forEach.call(disp, function(disp, i) {

if( disp.innerHTML== "&nbsp;"){
disp.parentNode.style.backgroundColor = 'transparent';
}
else {
disp.parentNode.style.backgroundColor = 'red';
disp.parentNode.style.color= 'black';
}
});
  
// display date fields

var num= document.querySelectorAll("div[class*='cbFormDataCellNumberDate'] time");

[].forEach.call(num, function(num, i) {

if( num.innerHTML== "&nbsp;"){
num.parentNode.style.backgroundColor = 'transparent';
}
else {
num.parentNode.style.backgroundColor = 'red';
num.parentNode.style.color= 'black';
}
});

// input fields

var inp= document.querySelectorAll("div[class*='cbFormFieldCell'] input[type='text']");

[].forEach.call(inp, function(inp, i) {

if( inp.value== ""){
inp.parentNode.style.backgroundColor = 'transparent';
}
else {
inp.parentNode.style.backgroundColor = 'red';
inp.parentNode.style.color= 'black';
}
});
  
// checkbox fields

var cbox= document.querySelectorAll("input[type='checkbox']");

[].forEach.call(cbox, function(cbox, i) {

if( cbox.checked == false){
cbox.parentNode.parentNode.style.backgroundColor = 'transparent';
}
else {
cbox.parentNode.parentNode.style.backgroundColor = 'red';
cbox.parentNode.parentNode.style.color= 'black';
}
});

});
</script>

 

What I did was apply this to a Pivot table to change the font  color of the Header cell based on its value. Basically, the workflow I am trying to achieve is to color-code the headers of each project that I have, for ease of viewing. Here is my code and the preview result after:
 

<script>
document.addEventListener('DataPageReady', function (event) {

var num= document.querySelectorAll("th[class*='cbResultSetLabel cbResultSetHeaderCell cbCursorPointer'] span");

[].forEach.call(num, function(num, i) {

if( num.innerHTML.startsWith('WMS') == true){
num.style.color= 'red';
}
else if( num.innerHTML.startsWith('CMS') == true){
num.style.color= 'green';
}

else {
num.style.color= 'white';
}
});
});
</script>



Was quite happy with the result so I figure it was worth sharing here 

[Kurumi]

 Hi! You can also use this CSS code in other Form Elements: 

 

[RuisiHansamu]

Maybe this could help you out ussing script on the article: https://howto.caspio.com/tech-tips-and-articles/how-to-dynamically-change-the-background-of-a-results-page/