Jump to content
  • 0

Dynamically Change Background Color of Fields in Details DataPage


Tubby
 Share

Question

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!

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

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

 

Link to comment
Share on other sites

  • 0

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>

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

 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

I manage to make it something like this:
image.png.b05bc0915acd2d19c9893fb2273f969e.png

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:

image.thumb.png.206177c58085e2e98eb9ae83bf65fa6b.png

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.

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