How have a border color that changes on every new report

[Nellyjo]

This is a details report that is based off our Cutsheet. I wanted to know if its possible to have border colors rotate as each different reports are pulled. What we are trying to do is have a color rotation of 1-7 colors(ie basic colors green red blue yellow ect). After a the meat is cut its put in a one color bucket so we know that green belongs to Mrs Smith. The Table below is Mrs. Smith's cutsheet and that green bucket goes to the packing dept. That will allow us not to have to print tags anymore. Hope that makes sense.

[IamNatoyThatLovesYou]

Hello @Nellyjo, Caspio has a similar workflow for this that you can check, however, it is for a reports DataPage. You may check the code there if it can fit on your workflow. https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/

[autonumber]

Hello @Nellyjo - I have a similar workflow but I am changing the background color instead. You can try the code that I have and just change the field according to the field name in your table and just make sure you have one unique field. I changed the style attribute where I changed the background color to a border so it will be the same as your workflow. 

1. Add HTML block and paste this code

<div id="visi[@field:random]"></div>

<script>
var isi = document.getElementById("visi[@field:random]");

if('[@field:Course]' =='HRM'){
 isi.parentNode.parentNode.classList.add('custom-less')
}
else if('[@field:Course]' == 'BSCS'){
 isi.parentNode.parentNode.classList.add('custom-greater')
}
else{
 isi.parentNode.parentNode.classList.add('custom-test');
}
</script>

2. Add header and footer and paste this on the header:

<style>

.custom-less {
 border-style: solid;
border-width: 2px ;
  border-color: #FF0000 !important;
}

.custom-greater{
 border-style: solid;
border-width: 2px ;
  border-color: #FFFF00 !important;
}
.custom-test{
 border-style: solid;
border-width: 2px ;
  border-color: #008000 !important;
}
</style>

Please note that you can modify the styles based on your preference. 

Hope this helps!