Jump to content

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


Recommended Posts

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>

 

800898805_allcolors.thumb.png.8029509e6d1564a6fb0685f67b506adf.png212523976_allcolors.thumb.png.109806d6ba8551f4c02fe213cf134287.png

 

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>

with predefined set of colors2104833545_predefinedsetofcolors2.thumb.png.d0fa0d89df8fe53861e277188d1b5843.png

 

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

Hope this helps!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

1057501371_tabularallcolors.thumb.png.dd96dc64adb29a1047cb91da11c4c9f2.png

Link to comment
Share on other sites

  • 1 year later...
  • 4 months later...
  • 8 months later...

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
Reply to this topic...

×   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...
×
×
  • Create New...