Nicolás version is DOM change stable – this one is not, plus this is very hacky :)
function hsl_col_perc(percent, start, end) {
var a = percent / 100,
b = (end - start) * a,
c = b + start;
// Return a CSS HSL string
return 'hsl('+c+', 100%, 50%)';
}
var col = hsl_col_perc('${Percent}',0,128);
this.domNode.parentNode.parentNode.parentNode.style.backgroundColor = col;
( Widget: https://marketplace.mendix.com/link/component/43096 )
( JS https://stackoverflow.com/questions/7128675/from-green-to-red-color-depend-on-percentage )
Hi,
You need to set a visibility condition for each color you need to print in your rows.
Selecting the attribute you want to control. If your attribute is bool or enum, use “based on attribute value”, if not, try to use “based on expresion”.
For example, $Entity/Records > 10 and $Entity/Records < 20. Select the background you want to display for this condition and its all.
In this example, i am showing a black button when Active its false, and white button when Active its true.
A better, but more grainy solution, would be to define background colors in css such as;
.listview-styletest-dc {
ul li {
padding: 0;
}
.bg-green {
background-color:green;
}
.bg-yellow {
background-color:yellow;
}
.bg-orange {
background-color:orange;
}
.bg-red {
background-color:red;
}
}
In the list elements properties, tab ‘Appearance’, you’ll find ‘Dynamic classes’. Here you can write something like:
if $currentObject/RandomNumber<=25
then 'bg-green'
else if $currentObject/RandomNumber<=50
then 'bg-yellow'
else if $currentObject/RandomNumber<=75
then 'bg-orange'
else 'bg-red'
This yields the following result:
Of course you can define as many colors as you like in between.
Note: I removed the padding as the color is only applied to the table/div within
Try my Class Container widget:
https://github.com/tieniber/classContainer/releases/tag/3.0.0
It has the ability to do dynamic classes (like is built into the platform now) but it also has the ability to add dynamic styling. Note that the input should be React style props format, not CSS. So a working example would be like:
'{
"color": "blue",
"backgroundColor": "red"
}'