Change the background color based on value of the record in Gallery DataPage

[SunakoChan]

Hi Team,

Is it possible to change the background color based on the value of the record in the result page of the Gallery DataPage?

For example:
Admin           |   Orange
Manager      |   Yellow
User               |   Green
Public            |   Gray

[telly]

Hi @SunakoChan,

You may use this code on the HTML block of your result page in the Gallery DataPage:
 

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

<script>
document.addEventListener('DataPageReady', function (event) {
var isi = document.getElementById("visi[@field:User_ID#]");

if('[@field:Role]' == 'Admin'){
isi.parentNode.parentNode.style.backgroundColor = 'rgb(237 94 74)';
}
else if('[@field:Role]'== 'Manager'){
isi.parentNode.parentNode.style.backgroundColor = 'rgb(205 241 101)';
}
else if('[@field:Role]'== 'User'){
isi.parentNode.parentNode.style.backgroundColor = 'rgb(44, 143, 152)';
}
else{
isi.parentNode.parentNode.style.backgroundColor = 'rgb(200, 200, 200)';
}
});
</script>

[Kurumi]

Hello - Just wanted to share another way to dynamically change the color of the calculated value/field when a condition is met using CSS.

You can insert this in the Header:

<style>
span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="No"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="Yes"])  {
  color: #29be25;
}

</style>

If you have more conditions or other fields, you can use this:

<style>
span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="No"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="Yes"])  {
  color: #29be25;
}

span.cbFormCalculatedField:has(+ input[name="InsertRecordFIELDNAME"][value="Inactive"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="InsertRecordFIELDNAME"][value="Active"])  {
  color: #29be25;
}
</style>

Hope it helps!

[Kurumi]

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

Text Field and Email

<style>
input[name="InsertRecordFIELDNAME"][value="Active"] {
  color: green;
}
</style>

Display-Only field

<style>
span.cbFormData:has(+ input[name="InsertRecordFIELDNAME"][value="Active"]) {
  color: green;
}
</style>

 

[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 other solution. 

 

[PotatoMato]

Hi! Just to update, Caspio has added an article about dynamically changing the color of a value: https://howto.caspio.com/tech-tips-and-articles/dynamically-changing-colors-of-values/

 

-Potato