A button that changes the background color (random color) of each record in Gallery Report DataPage

[futurist]

Hi,

Just wanna share this script I made that changes the background color of each record in a Gallery Report DataPage when clicking the button.

For the button:

<button onclick="RandomColor()">Try it</button>

 

For the function that's responsible for changing the colors (For this one, there is no fixed set of color because this makes use of randomizers for setting the color code, so all colors possible can show up):

<script>

function RandomColor() {

 var x = document.querySelector("section[class*='cbColumnarReport cbReportSection']");
  x.querySelectorAll('div > div:nth-child(1)').forEach(e => e.style.backgroundColor = '#' + ('0'+(Math.random()*255|0).toString(16)).slice(-2) + ('0'+(Math.random()*255|0).toString(16)).slice(-2) + ('0'+(Math.random()*255|0).toString(16)).slice(-2))

}

</script>

 

 

Sample DP: https://c1hch576.caspio.com/dp/db26a00071c83c69ac9947d1bfd9

 

Alternatively, if you only wish to have a predefined set of colors to choose from, you can use this (simply change the colors in the array to your liking):

<script>

var colors = ["red", "blue", "green","orange","yellow","violet","lightblue","cyan","magenta"];

function RandomColor() {

 var x = document.querySelector("section[class*='cbColumnarReport cbReportSection']");
  x.querySelectorAll('div > div:nth-child(1)').forEach(e => e.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)])

}

</script>

 

Sample DP: https://c1hch576.caspio.com/dp/db26a000574d59f66468479b955a

Hope this helps!

[futurist]

If you also want to the colors to be already set upon loading the page, you can add this onload script that references the function RandomColor():

document.addEventListener("DataPageReady", function(event){
RandomColor();

});

 

This way, the colors will be implemented for every turn of the page right away

[futurist]

You can use this on a Tabular Report as well, by simply changing a few things on the function:

function RandomColor() {

 var x = document.querySelector("table");
  x.querySelectorAll('tr').forEach(e => e.style.backgroundColor = '#' + ('0'+(Math.random()*255|0).toString(16)).slice(-2) + ('0'+(Math.random()*255|0).toString(16)).slice(-2) + ('0'+(Math.random()*255|0).toString(16)).slice(-2))

}

Note that for this one, I used the table on the querySelector, and used the tr on the querySelectorAll. This basically means that for all the tables in the DataPage, it applies the styling on all the rows in it.

[futurist]

 Hi, 

Just wanna share this customization solution I came up with if you want to make gallery report datapages look more appealing:

 

[IamNatoyThatLovesYou]

Hello Everyone, just sharing this article as well that may be related to the topic. https://howto.caspio.com/tech-tips-and-articles/color-coding-in-datapages/

 

[telly]

Hi, 

I’d also like to share a helpful link where you can find sample configure style for reference. It should provide you with additional insights and examples that could be useful!
https://howto.caspio.com/styles/styles/